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