Multiple submit buttons on one page but distinguishable (jquery)

Question

I am trying to write a code that 'stores items for later' - a button that has url of the item as hidden input, on submit it calls a php script that does the storage in a db. I am more into php, very little knowledge of anything object-oriented, but I need to use jquery to call the php script without moving over there

The problem is how to assign the x and y variables when I have multiple forms on one page

I was only able to write the following

 $("form").bind('submit',function(e){
   e.preventDefault();

      var x =  $("input[type=hidden][name=hidden_url]").val();
      var y =  $("input[type=hidden][name=hidden_title]").val();



   $.ajax({
   url: 'save_storage.php?url='+x+'&tit='+y,
   success: function() {
    alert( "Stored!");
     location.reload();
   }
});

});

It works fine if you have something like...

<form method="post" action="#">
 <input type="hidden" id="hidden_url"  name="hidden_url" value="<?php echo $sch_link; ?>"/>
 <input type="hidden" id="hidden_title" name="hidden_title" value="<?php echo $sch_tit; ?>"/>
 <input type="submit" id="send-btn"  class="store" value="Store" />
</form>

..once on the page, I've got about 50 of them.

These are generated via for-loop I suppose I could use $i as an identifier then but how do I tell jquery to assign the vars only of the form/submit that was actually clicked?

Answer 1

You'll have to scope finding the hidden fields to look within the current form only. In an event handler, this will refer to the form that was being submitted. This will only find inputs matching the given selector within that form.

$("form").bind('submit',function(e){
  e.preventDefault();

  var x =  $(this).find("input[type=hidden][name=hidden_url]").val();
  var y =  $(this).find("input[type=hidden][name=hidden_title]").val();

  $.ajax({
    url: 'save_storage.php',
    data: {
      url: x,
      tit: y
    },
    success: function() {
      alert( "Stored!");
      location.reload();
    }
  });
});

As @Musa said, it's also better to supply a data key to the $.ajax call to pass your field values.

Answer 2

Inside your form submit handler, you have access to the form element through the this variable. You can use this to give your selector some context when searching for the appropriate inputs to pass through to your AJAX data.

This is how:

$("form").bind('submit',function(e) {
    e.preventDefault();

    // good practice to store your $(this) object
    var $this = $(this);

    // you don't need to make your selector any more specific than it needs to be
    var x = $this.find('input[name=hidden_url]').val();
    var y = $this.find('input[name=hidden_title]').val();

    $.ajax({
        url: 'save_storage.php',
        data: {url:x, tit: y},
        success: function() {
            alert( "Stored!");
            location.reload();
        }
    });
});

Also, IDs need to be unique per page so remove your id attribute from your inputs.