具有多个提交按钮的Ajax


Ajax with multiple submit buttons

我如何更改下面的代码,使我想要多个提交按钮,每个按钮都有自己的唯一值,而不是带有提交按钮的文本输入类型?我所尝试的一切都以submit的值未定义而告终。任何帮助都会很棒!

代码来源:提交搜索查询&在不刷新的情况下获得搜索结果

<script type="text/javascript">
    $(function() {
        $("#lets_search").bind('submit',function() {
            var value = $('#str').val();
            $.post('db_query.php',{value:value}, function(data){
                $("#search_results").html(data);
            });
            return false;
        });
    });
</script>
<form id="lets_search" action="" >
    Search:<input type="text" name="str" id="str">
    <input type="submit" value="send" name="send" id="send">
</form>

您可以添加多个提交按钮,并将它们全部附加到onclick事件侦听器。单击按钮时,获取值并发送POST请求。

<script>
$(function(){
    $('input[type=submit]').click(function(){
        $.post('db_query.php', {value:$(this).val()}, function(data){
            $("#search_results").html(data);
        });
        return false;
    });
});
</script>
<form id="lets_search" action="">
    <input type="submit" name="button1" value="hi"/>
    <input type="submit" name="button2" value="bye"/>
</form>

如果您想使用多个提交按钮,您可以捕获单击事件并确定单击了哪个按钮。然后运行不同的Ajax提交。这在命中CCD_ 2时也起作用。

//submit buttons
<form id="lets_search" action="" >
    Search:<input type="text" name="str" id="str" />
    <input type="submit" value="v1"/>
    <input type="submit" value="v2"/>
    //...more submit buttons
</form>    
//submit func
$(function() {
    $("#lets_search input[type=submit]").click(function() {
         switch  ($(this).val){
             case 'v1':...;
             case 'v2':...
         }
    });
});

这是我的版本-现在看起来很像Bingjie,因为它是在我测试他的版本时编写的

演示

<form id="lets_search" action="" >
Search:<input type="text" name="q" id="q">
<input type="submit" value="Google" name="send" id="google">
<input type="submit" value="Bing" name="send" id="bing">
</form>
$(function() {
  $("#lets_search input[type=submit]").click(function() {
    switch  ($(this).val()) {
        case "Bing" :
            $("#lets_search").attr("action","http://www.bing.com/search");
            break;
        case "Google":
            $("#lets_search").attr("action","https://www.google.com/search");
            break;
    }        
  });
});

这里,我更喜欢Vamsi的解决方案n为什么不选择Sanjeev mk?

在选择解决方案时要多加考虑。

案例:如果有多个提交按钮

如果用户在文本字段中并点击回车键,系统将假定第一个提交按钮被点击。

所以,在这里,最好不要多人提交终端用户视角按钮

表单中可以有多个提交按钮,没有问题。它们可能具有相同的名称、类型等,但只是为它们分配不同的值。就像提交按钮1的值可以为"hi",按钮2的值可以是"bye"。

然后,当按钮调用动作函数时,输入函数时所要做的就是用$(this).val 进行检查

HTML:
<input type="submit" name="button1" value="hi"/>
<input type="submit" name="button2" value="bye"/>
jQuery:
$(function() {
    $("#lets_search").bind('submit',function() {
        var value = $(this).val();
        if(value == "hi")
            do_something;
        else
            do_something_else;
    });
});