使用名为 submit [重复] 的输入使用 Javascript 提交表单

Question

我有一个 HTML 表单，其中一个输入名为 submit 我在表单中还有一个格式很好的 HTML 元素，它应该在点击时提交表单。

我注意到 form.submit 被名为 submit 的输入字段覆盖，因此我无法再调用 form.submit()。

我已经搜索了一个答案，一般的反应是重命名输入。但是我不能那样做。 submit 大部分在请求正文中作为带有值的参数出现。

示例代码：

<form action="http://example.com/search" method="POST">
    <!-- other generated parameters -->
    <input value="findItems" name="submit" type="hidden">
    <a onclick="event.stopPropagation();this.parentNode.submit()" href="javascript:{}">
        <!-- this is dinamically generated 
            and generally much more complex --->
        <strong>search</strong> 
    </a>
</form>

请记住，我的限制如下：

• 用户点击提交表单的元素包含其他格式化元素
• submit 是请求正文中的必需参数
• 请求方法必须是POST
• 无法对后端进行任何修改

PS：这是我关于堆栈溢出的第一个问题，喜欢这个网站。

Answer 1

你可以试试打电话

document.forms[0].submit();

假设文档上只有一个表格， 或者如果这不起作用，您可以尝试在按钮上调用click方法

form.submit.click();

希望有帮助

Answer 2

通过以下方式保持提交作为参数：

<input value="findItems" name="submit[]" type="hidden" />

只需将方括号[] 添加到属性名称中，您就可以在服务器端获取它。

更新：

或者

您可以为您的表单提供<input type="submit">，然后在其上触发点击事件，如下所示：

<form action="http://google.com/search" method="POST">
    <!-- other generated parameters -->
    <input value="findItems" name="submit" type="hidden" />
    <a onclick="event.stopPropagation();" href="javascript:goo()">
        <!-- this is dinamically generated 
            and generally much more complex --->
        <strong>search</strong> 
    </a>
  <input type="submit" id="send" />
</form>

在上面的代码中，我们添加了提交的输入类型并将其分配给 id send 以便从 DOM 访问它。

我们还向search 链接的href 添加了函数调用goo()。现在我们将定义该函数和另一个函数来触发事件：

function goo(){     
       fireEvent(document.getElementById('send'),'click');
    }
    function fireEvent(obj, evt){
     var fireOnThis = obj;
     if( document.createEvent ) {
       var evObj = document.createEvent('MouseEvents');
       evObj.initEvent( evt, true, false );
       fireOnThis.dispatchEvent( evObj );
     }
      else if( document.createEventObject ) { //IE
       var evObj = document.createEventObject();
       fireOnThis.fireEvent( 'on' + evt, evObj );
     } 
} 

查看此演示：http://jsbin.com/vecebo/1/

可以使用 CSS style="visibility: hidden" 隐藏提交按钮

触发事件的函数引用自HERE

Answer 3

我尝试了一些可能会有所帮助的东西。由于我们显然无法使用form.submit()，因此我们可以使用同步 AJAX 调用提交您的表单详细信息。

jQuery 代码告诉你我在说什么：

<script>
function submitForm(){      
  $.ajax({
     url:  "http://example.com/search",
     data: {
         submit : $("#submit").val()
     },
     success: function(){alert("It worked!");},
     error: function (xhr, textStatus, errorThrown){alert(errorThrown)},
     async: false
  });
}
</script>

还有 HTML：

<form id="form1" name="form1" method="POST">
    <input type="hidden" id="submit" name="submit"/>
    <input type="button" value="Submit" onclick="javascript:submitForm()">
</form>