带有2个按钮的jQuery表单插件

时间:2013-01-22 20:25:01

标签: jquery forms plugins

我正在使用jQuery Form插件
http://malsup.com/jquery/form/

<form id="form1" name="form1" method="post" action="" enctype="multipart/form-data">
<input name="submit" id="submit1" type="submit" class="submit_button" value="Save" />
<input name="submit2" id="submit2" type="submit" class="submit_button" value="Send Sale" />
</form>

好的,所以有两个按钮,一个是通过ajax表单发送邮件,另一个是将数据保存到表中。这是我使用的Jquery。

$(document).ready(function() { 
// bind form using ajaxForm 
$('#submit2').click(function() {
    alert('ffff');
    $('#form1').ajaxForm({ 
        // target identifies the element(s) to update with the server response 
        target: '.loading',
        beforeSubmit:  showImg,
        success: showResponse,
        url:       'send_sale.php',
    });
});
});

当我点击“保存”按钮时,它工作正常,但是当我点击“发送销售”时,点击“保存”按钮后,“保存”按钮执行相同的“发送销售”过程。

有谁知道什么是错的?

更新
得到解决方案使用ajaxSubmit而不是ajaxForm

1 个答案:

答案 0 :(得分:0)

只需在表单标记内提交按钮,两个按钮都会提交表单。你可能想要尝试的是将输入提交转换为按钮并将它们移到表单之外。

<form id="form1" name="form1" method="post" action="" enctype="multipart/form-data">
</form>
<button id="submit1" class="submit_button">Save</button>
<button id="submit2" class="submit_button">Send Sale</button>

然后单独定义点击处理程序。

$(document).ready(function () {
    $('#submit1').click(function () {
    alert("action 1")
    $('#form1').ajaxForm({
        target: '.loading',
        beforeSubmit: showImg,
        success: showResponse,
        url: 'send_sale.php',
    });
    });
    $('#submit2').click(function () {
    alert("action 2")
    });
});