Specify submit in jQuery/AJAX

Question

I have a web page with multiples submit and I'm using an ajax request to send one but I'm having troubles to select which submit button has has to be send.

I have this for the moment :

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

It's working good on one submit button but all the others doesn't work anymore. I'm guessing this is because I select all of them instead of selecting one. I tried to changed this line $("#lets_search").bind('submit',function() and specify the name of the submit I want to send but it won't work...

Any ideas ? Thank you :)

Edit :

<form id="lets_search" method="POST" action="#">
    //my search bar
    Search:<input type="text" name="str" id="str">
    <input type="submit" value="send" name="send" id="send">

    <div id="search_results"></div>

    //and let just imagine I have others submit button
    <input type="submit" value="ok" name="ok" id="ok">
    <input type="submit" value="hello" name="hello" id="hello">
</form>

After I use this ajax script, the search bar is working well, but the others submit button aren't working anymore. So I want to specify in the ajax script, my submit button "send" instead of selecting all of them.

Answer 1

submit event is related to forms, not to buttons, you should probably move to click button on specific buttons?

Script

<script type="text/javascript">
  $(function() {
    $("#lets_search").on('click', '#ok', function() {
      var value = $('#str').val();
      alert('first button');
      $.post('db_query.php',{value:value}, function(data){
        $("#search_results").html(data);
      });
      return false;
    });

    $("#lets_search").on('click', '#hello', function() {
      var value = $('#str').val();
      // The other one
      alert('second button');
      $.post('db_query.php',{value:value}, function(data){
        $("#search_results").html(data);
      });
      return false;
    });
  });
</script>

Html

<form id="lets_search" method="POST" action="#">
  //my search bar
  Search:<input type="text" name="str" id="str">
  <input type="submit" value="send" name="send" id="send">

  <div id="search_results"></div>

  //and let just imagine I have others submit button
  <input type="submit" value="ok" name="ok" id="ok">
  <input type="submit" value="hello" name="hello" id="hello">
</form>

Hope this helps :)

Answer 2

Why not bind ajax on a button click event?

<script type="text/javascript">
  $(function() {
    $("#send").click(function(){
      var value = $('#str').val();
       $.post('db_query.php',{value:value}, function(data){
         $("#search_results").html(data);
       });
       return false;
    });
  });
</script>

Below is html:

<form id="lets_search" method="POST" action="#">
    //my search bar
    Search:<input type="text" name="str" id="str">
    <input type="submit" value="send" name="send" id="send">

    <div id="search_results"></div>

    //and let just imagine I have others submit button
    <input type="submit" value="ok" name="ok" id="ok">
    <input type="submit" value="hello" name="hello" id="hello">
</form>

Try running below fiddle it will give you an idea.

 $(document).ready(function(){ $("#send").click(function(){ alert($("#value").val()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="text" id="value"/> <input type="button" id="send" value="Send"/> <input type="button" id="send1" value="Another button"/> <input type="button" id="send2" value="One more button"/> </form>