确定在 HTML 表单中单击了哪个按钮 - 不提交类型答案

【问题标题】：determine which button was clicked in HTML form - NOT submit type确定在 HTML 表单中单击了哪个按钮 - 不提交类型
【发布时间】：2013-03-12 14:32:39
【问题描述】：

我不想要 type="submit" 因为它会更改页面 -
我通过 ajax 提交..所以我使用 type="button"

<input type="button" value="This is a submit button" name="submit1" onClick="submitMe( this.form )">
<input type="button" value="Another submit button" name="submit2" onClick="submitMe( this.form )">
<input type="button" value="Yet another submit button!" name="submit3" onClick="submitMe( this.form )">

但是所有按钮名称都显示为传递的表单变量 - 我希望只传递单击的按钮，例如复选框或提交按钮...（如果未选中 - 不要传递它）

我如何确定选择了哪个按钮 - 我需要这个，因为操作会因按钮而异。

使用原型“AJAX.UPDATER”来处理表单。

JS 看起来是这样的......

function submitMe( frm ) {
    var div = 'msgDiv';
    var url = 'mypage.aspx';
    var pars = Form.serialize( frm ); 
    var myAjax = new Ajax.Updater( div, url, { asynchronous:true, method:'post', parameters:pars    });
}

谢谢

【问题讨论】：

标签： html prototypejs

【解决方案1】：

您可能应该使用 observe 或 on() 方法而不是普通的 onclick 属性 - 为您的 html 添加一个类

<input type="button" value="This is a submit button" class="submitbutton" name="submit1" >
<input type="button" value="Another submit button" class="submitbutton" name="submit2" ">
<input type="button" value="Yet another submit button!" class="submitbutton" name="submit3" >

如果您通过将“myform”的id 给一个观察者附加到您的表单，则“click”事件将从按钮冒泡到父表单，您可以使用findElement() 像这样传递的事件的方法。在这种情况下，我将使用 on() 方法，因为您可以指定 CSS 选择器来限制事件处理的范围。否则每次点击都会触发处理程序。

$('#myform').on('click','.submitbutton',function(event){
    var clickedbutton = event.findElement();

    //then you can fire your submitMe() function
    submitMe(this);
});

在on() 方法中this 是被观察的元素

【讨论】：

【解决方案2】：

你可以这样做：

<input id="a" type="button" value="This is a submit button" name="submit1" onClick="submitMe(this.id)">
<input id="b" type="button" value="Another submit button" name="submit2" onClick="submitMe(this.id)">
<input id="c" type="button" value="Yet another submit button!" name="submit3" onClick="submitMe(this.id)">

然后在你的 JS 中

submitMe(id){
  switch(id)
  {
  case 'a':
    -----
    break;
  case 'b':
    -----
    break;
  }
}

【讨论】：

问题是我已经在通过表单了... submitMe(this.form);和 js submitMe(frm) { var params = Form.serialize(frm); ... }
mmm 如果你只传递“this”并且在你的函数中使用“form”和“id”？？
这也有效，但我的意思是，submitMe(this)... 在你的函数中： sumbmit(obj){ form = obj.form, id= obj.id ...}跨度>

【解决方案3】：

在您的 HTML 代码中，您可以使用 id 属性而不是 name 并将单击按钮的 id 传递给函数...

<input type="button" value="This is a submit button" id="submit1" onClick="submitMe( this.id)">
<input type="button" value="Another submit button" id="submit2" onClick="submitMe( this.id)">
<input type="button" value="Yet another submit button!" id="submit3" onClick="submitMe( this.id)">

然后在你的 JS 中你可以通过...获取 formId

function submitMe(eleId) {
    var clickedButton = eleId // use it as you want
    var frm = $(eleId).up('form'); // this will give the parent form 
    var div = 'msgDiv';
    var url = 'mypage.aspx';
    var pars = Form.serialize( frm ); 
    var myAjax = new Ajax.Updater( div, url, { asynchronous:true, method:'post', parameters:pars    });

}

【讨论】：