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

时间:2013-03-22 16:30:21

标签: html prototypejs

我不希望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 )">

然而,所有按钮名称都显示为传递的表单变量 - 我希望只传递单击的按钮,如复选框或提交按钮...(如果未选中 - 不通过它)

如何确定选择了WHICH按钮 - 我需要这个,因为基于按钮的动作会有所不同。

使用原型'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    });
}

THX

3 个答案:

答案 0 :(得分:1)

你可以这样做:

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

答案 1 :(得分:1)

你应该使用observeon()方法而不是普通的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" >

如果您通过向其提供id“myform”将观察者附加到您的表单,则“点击”事件会从按钮冒泡到父表单,您可以找到点击源自哪个按钮在像这样传递的事件上使用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 :(得分:0)

在您的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    });

}