使用Javascript提交带有提交的输入的表单

问题描述:

我有一个HTML表单,其中输入之一称为submit 我在表单中还有一个格式良好的HTML元素,该元素应该在单击时提交表单.

I have a HTML form where one of the inputs is called named submit I also have a nicely formatted HTML element inside the form which is supposed to submit the form on click.

我注意到form.submit被名为submit的输入字段覆盖,所以我不能再调用form.submit().

I noticed that form.submit is overridden by the input field which is named submit so I can't call form.submit() anymore.

我一直在寻找答案,一般的回答是重命名输入.但是我不能那样做. submit大多数显示为在请求正文中带有值的参数.

I've searched for an answer, the general response is to rename the input. However I cannot do that. submit most appear as a parameter with a value in the request body.

示例代码:

<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>

请记住,我的限制如下:

Keep in mind that my constraints are the following:

  • 用户单击以提交表单的元素包含其他格式化元素
  • submit是请求正文中的必需参数
  • 请求方法必须为 POST
  • 无法对后端进行任何修改
  • the element which the users clicks to submit the form is contains other formatted elements
  • submit is a required parameter in the request body
  • the request method must be POST
  • cannot make any modifications to the back-end

PS:这是我关于堆栈溢出的第一个问题,喜欢这个网站.

PS: this is my first question on stack overflow, love this site.

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

Keeping submit as a parameter by the following:

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

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

Just add the square brackets [] to the attribute name and you will be able to get it on the server-side.

您可以向表单提供<input type="submit">,然后按如下所示触发其点击事件:

You can supply your form with <input type="submit"> and then triggering click event on it as follows:

<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>

在上面的代码中,我们添加了Submit的输入类型,并将其分配给id send,以允许轻松地从DOM访问它.

In the above code, we added input type of submit and assigned it to id send to allow accessing it from the DOM easily.

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

Also we added a function call goo() to the href of your search link. Now we will define that function and another function to trigger the event:

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 中引用了触发事件的功能. >

The function of triggering the event is referenced from HERE