1

如何更改下面的代码，而不是带有提交按钮的文本输入类型，我想要多个提交按钮，每个按钮都有自己的唯一值？我尝试的一切都以未定义的提交值结束。任何帮助都会很棒！

代码来源：提交搜索查询并获得搜索结果而不刷新

<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>
4

5 回答 5

2

您可以添加多个提交按钮并附加到所有这些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>
于 2012-07-28T08:18:23.933 回答
1

如果您想使用多个提交按钮，您可以捕获点击事件并确定点击了哪个按钮。然后运行不同的 Ajax 提交。这在enter被击中时也有效。

//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':...
         }
    });
});
于 2012-07-28T08:12:53.390 回答
0

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

演示

<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;
    }        
  });
});
于 2012-07-28T08:43:16.357 回答
-1

您可以在表单中有多个提交按钮，没问题。它们可能具有相同的名称、类型等，但只是为它们分配不同的值。就像提交按钮 1 可以有 value="hi" 并且 Button 2 可以有 value="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;
    });
});
于 2012-07-28T07:39:06.543 回答
-1

在这里，我更喜欢 Vamsi 的解决方案 n 为什么不是 Sanjeev mk？

对首选解决方案进行一些额外的思考。

case: 如果有多个提交按钮

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

因此，在这里，最好不要为最终用户的观点设置多个提交按钮

于 2012-07-28T07:48:13.567 回答