Form with two buttons

Question

I am trying to create multiple forms which have two buttons, each will submit the form to different script, one via ajax and second one will just submit the form.

<?php foreach($objects as $object) : ?>      
<div class="card-body">
   <form id="edit-form" action="#" method="POST">
      <input name="subject" value="<?=$object['subject']?>" type="text" id="title" class="input-xxlarge">
      <textarea id="content" name="content" rows="25"><?=$object['content']?></textarea>
      <button type="button" id="send-button" class="btn btn-primary">Send</button>
      <input type="submit" id="submit-button" value="Submit"/>
   </form>
</div>
<?php endforeach; ?>

First I am trying to get the current form, but I have problem with that. console.log shows something only on the first form, if I click on the buttons from other forms then It will do nothing.

$('#send-button').on('click', function(e) {
        e.defaultPrevented;
        $form = $(this);
        $url = $form.attr('action');
        $data = $form.serialize(); console.log($form);
        console.log($url);
    });

Is it because my button has same ID for every form ?

Answer 1

You shouln't use ID's multiple times on the same page. Try to use a class for that case. Also as stated in the comments use e.preventDefault(); to stop the event.

$(this) will result in the #send-button beeing targeted. To access the form you need to find the closest form element like this:

$form = $(this).closest('form');

Answer 2

html:

<form method="POST" action="#">
  <input type="text">
  <button type="button">send</button>
  <input type="submit" value="submit" />
</form>

<form method="POST" action="#">
  <input type="text">
  <button type="button">send</button>
  <input type="submit" value="submit" />
</form>

js:

$("form").each(function() {
  var form = this;
  $(form).find('button').on('click', function(e) {
    e.preventDefault();
    console.log(form);
    console.log(this);
  })
});

this will add events on every form you have on your page, button will submit form via script and submit will just submit it. also here's a fiddle to play with