Question

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>

Answer 1

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>