How can I change the code below so instead of a text input type with a submit button I want multiple submit buttons each with their own unique value? Everything I try just ends up with submit's value being undefined. Any help would be great!

Code source: Submit Search query & get Search result without refresh

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

How can I change the code below so instead of a text input type with a submit button I want multiple submit buttons each with their own unique value? Everything I try just ends up with submit's value being undefined. Any help would be great!

Code source: Submit Search query & get Search result without refresh

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

• php
• javascript
• ajax
• jquery

• try $('#send').click(function(){ // code here }); and insted of type=" submit" take it as type="button" – Vamsi Commented Jul 28, 2012 at 7:37

5 Answers 5

You can add multiple submit buttons and attach to all of them onclick event listener. When button was clicked - get the value and send with a POST request.

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

If you want to use multiple submit buttons, you can catch the click event and determine which button was clicked. then run different Ajax submit. this also works when enter is hit.

//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':...
         }
    });
});

Here is my version - which now looks very much like Bingjies because it was written while I was testing out his version

DEMO

<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./search");
            break;

        case "Google":
            $("#lets_search").attr("action","https://www.google./search");
            break;
    }        
  });
});

Here, I would prefer to Vamsi's solution n Why not Sanjeev mk?

Give some extra thought on prefering the solution.

case: If there are mulitple submit buttons

If the user is in the text field and hits enter, the system will assume the first submit button was hit.

So, here, it would be good to go for not having mulitple submit buttons for end user point of view

You can have multiple submit buttons in the form, no problem. They may have the same name, type etc, but just assign them different values. Like Submit Button 1 can have value="hi" and Button 2 can have value="bye".

Then when the action function is called for the button, all you have to do when entering the function is do a check with: $(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;
    });
});