区分使用javascript的表单中的两个提交按钮 [英] Differentiate between two submit buttons in a form using javascript
问题描述
如何找出在javascript中点击了哪个提交按钮？
函数submitForm（）{
//如果发现打开弹出窗口
//否则如果添加继续同一窗口
}
< form action =/ findNamesonsubmit =return submitForm（）>
< input type =submitvalue =Addonclick =submitForm（this）/>
< input type =submitvalue =Findonclick =submitForm（this）/>
< / form>
我试过了什么：
我试着用onclick代替它，但是当点击查找按钮时，它会打开一个弹出窗口并提交父窗口。我怎样才能阻止它提交父窗口？
函数submitForm（submit）{
if（submit.value ==Find）{
find（）; //打开一个弹出窗口
} else if（submit.value ==Add）{
//停留在同一个窗口
}
}
函数find（）{
var width = 1010;
var height = 400;
var params ='width ='+ width +'，height ='+ height;
popupWin = window.open（'find.do'，'windowname5'，params）;
popupWin.focus（）;
}
< form action =/ findNames>
< input type =submitvalue =Addonclick =submitForm（this）/>
< input type =submitvalue =Findonclick =submitForm（this）/>
< / form>
您处于正确的轨道上，提交总是因为你没有取消事件（或者，在DOM Level 2+的说法中，你不是阻止事件的默认行为）。
函数submitForm（button）
{
if（button.value ==Find）
{
/ * open popup * /
find（）;
}
else if（button.value ==Add）
{
/ *留在同一个窗口中* /
}
返回false;
}
< form action =/ findNames>
< input type =submitvalue =Addonclick =return submitForm（this）/>
< input type =submitvalue =Findonclick =return submitForm（this）/>
< / form>
（你永远不应该命名一个与表单有关的变量 submit ，因为如果你不小心覆盖表单对象的提交方法。）
返回值 false 返回到事件处理函数时，会阻止的默认操作单击事件。这意味着用户代理的工作方式就好像提交按钮从未激活过，并且表单未提交。
解决此问题的另一种方法是保存值标识变量或属性中单击的提交按钮，并检查提交事件侦听器中的值。这是可行的，因为按照定义，点击事件发生在输入（提交按钮）的提交表单的事件：
var submitName;
函数submitForm（表单）
{
if（submitName ==Find）
{
/ * open popup * /
找（）;
}
else if（submitName ==Add）
{
/ *留在同一个窗口中* /
}
返回false;
}
函数setSubmit（button）
{
submitName = button.value;
}
< form action =/ findNamesonsubmit =return submitForm（this）>
< input type =submitvalue =Addonclick =setSubmit（this）/>
< input type =submitvalue =Findonclick =setSubmit（this）/>
< / form>
（这只是一个例子，尽量减少全局变量的数量。）
同样，当返回 submit 事件时，返回值 false 处理程序，阻止提交表单。如果您在处理 submit 事件后明确要求提交表单，则可能希望返回 true 。例如，您可能想要验证表单，如果验证成功，则通过目标属性在另一个框架中显示服务器响应。
在脚本代码中添加事件侦听器的事件处理程序属性的优势在于它具有运行时高效，向后兼容以及仍符合标准的特性。缺点是如果事件不起泡，则可能必须复制事件处理程序代码。 （这里没有问题。）
其他人可能会说事件处理程序属性的缺点是标记和函数之间没有分离;不过，你应该对此做出自己的想法。在我看来，函数总是与特定的标记绑定在一起，并且围绕不同的DOM实现工作的跳跃很少值得。
另请参阅： DOM客户端对象交叉引用：DOM事件
这里最重要的是，无论您做出的所有客户端改进如何，该表单都可以访问，即i。即即使没有客户端脚本，它仍然可以使用键盘。您的服务器端脚本（这里： / findNames ）可以作为回退，然后客户端脚本可以避免不必要的往返，改善用户体验并减少网络和服务器负载。
How can I find out which submit button was clicked in javascript?
function submitForm(){
//if find open popup
//else if add continue in the same window
}
<form action="/findNames" onsubmit="return submitForm()">
<input type="submit" value="Add" onclick="submitForm(this)"/>
<input type="submit" value="Find" onclick="submitForm(this)"/>
</form>
WHAT I HAVE TRIED:
I tried to do it with onclick instead as follows but when the "Find" button is clicked it opens a popup window and submits the parent window as well. How can I stop it from submitting the parent window?
function submitForm(submit){
if(submit.value=="Find"){
find();//opens a popup window
}else if(submit.value == "Add"){
//stay in the same window
}
}
function find(){
var width = 1010;
var height = 400;
var params = 'width='+width+', height='+height;
popupWin = window.open('find.do','windowname5', params);
popupWin.focus();
}
<form action="/findNames">
<input type="submit" value="Add" onclick="submitForm(this)"/>
<input type="submit" value="Find" onclick="submitForm(this)"/>
</form>
You are on the right track, but your form is submitted always because you are not canceling the events (or, in DOM Level 2+ parlance, you are not "preventing the default action for the event").
function submitForm (button)
{
if (button.value == "Find")
{
/* open popup */
find();
}
else if (button.value == "Add")
{
/* stay in the same window */
}
return false;
}
<form action="/findNames">
<input type="submit" value="Add" onclick="return submitForm(this)"/>
<input type="submit" value="Find" onclick="return submitForm(this)"/>
</form>
(You should never name a form-related variable submit because if you are not careful that overrides the form object's submit method.)
The return value false, when returned to the event handler, prevents the default action for the click event. This means the user agent works as if the submit button was never activated in the first place, and the form is not submitted.
Another approach to solve this is to save a value identifying the clicked submit button in a variable or property, and check that value in the submit event listener. This works because the click event of the input (submit button) by definition happens before the submit event of the form:
var submitName;
function submitForm (form)
{
if (submitName == "Find")
{
/* open popup */
find();
}
else if (submitName == "Add")
{
/* stay in the same window */
}
return false;
}
function setSubmit (button)
{
submitName = button.value;
}
<form action="/findNames" onsubmit="return submitForm(this)">
<input type="submit" value="Add" onclick="setSubmit(this)"/>
<input type="submit" value="Find" onclick="setSubmit(this)"/>
</form>
(This is just an example. Try to minimize the number of global variables.)
Again, the return value false, when returned to the submit event handler, prevents the form from being submitted. You may want to return true instead if you explicitly want the form to be submitted after you handled the submit event. For example, you may want to validate the form and if validation was successful, display the server response in another frame, through the target attribute.
The advantage of event-handler attributes over adding event listeners in script code is that it is runtime-efficient, backwards-compatible, and still standards-compliant. The disadvantage is that you may have to duplicate event-handler code if the event does not bubble. (Not an issue here.)
Other people may say that a disadvantage of event-handler attributes is also that there is no separation between markup and function; however, you should make up your own mind about that. In my opinion, function is always tied to specific markup, and the jumping through hoops for working around different DOM implementations is seldom worth it.
See also: DOM Client Object Cross-Reference: DOM Events
The most important thing here is that, regardless of all client-side improvements that you make, the form stays accessible, i. e. that it still works with the keyboard even without client-side scripting. Your server-side script (here: /findNames) can work as fallback, then, and the client-side script can avoid unnecessary roundtrips, improving the user experience and reducing the network and server load.
这篇关于区分使用javascript的表单中的两个提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
