CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Franklin Pious
Franklin Pious

Reputation: 3848

Find out which html form was submitted

Assume I have many html forms in a website. I need to find out which html form was submitted.

$("form").submit(function(event){ }

Using the function above, can i find out which form was submitted?

Upvotes: 0

Views: 786

Answers (4)

AGoranov
AGoranov

Reputation: 2244

Good question.

I usually submit every form to a different route handler. This way I manage to keep some basic principles (Single responsibility principle). Otherwise, you risk your code becoming too complicated to read.

If you insist on having the same route and then differentiate in the backend, I believe the other answers will give you answer your question.

Upvotes: 0

Babar Baig
Babar Baig

Reputation: 383

Have a look into link below to identify submission of different forms.

$(document).ready(function() {
  $("#Form1").submit(function(event) {
    alert($(this).attr('id'));
    event.preventDefault();
  });

  $("#Form2").submit(function(event) {
    alert($(this).attr('id'));
    event.preventDefault();
  });

  $("#other").click(function() {
    $("#Form1").submit();
  });

  $("#other2").click(function() {
    $("#Form2").submit();
  });
});
<!DOCTYPE html>
<html lang="en">

  <head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>



  </head>

  <body>
    <form id="Form1" action="destination.html">
      <input type="text" value="Hello there">
      <input type="submit" value="Go">
      <div id="other">
        Click to trigger the handler for first form
      </div>
    </form>


    <form id="Form2" action="destination.html">
      <input type="text" value="Hello there">
      <input type="submit" value="Go">
      <div id="other2">
        Click to trigger the handler for second form
      </div>
    </form>


  </body>

</html>

Upvotes: 0

Prajwal
Prajwal

Reputation: 4000

Even though it is recommended to use ID, you can do without it. your event.target provides the reference for the form.

$("form").on("submit", function(event){
event.preventDefault();
var a = $(event.target).children("input[type='text']").val();
console.log(a);
});

JSFiddle

Thanks @31piy for reminding about it.

Upvotes: 1

31piy
31piy

Reputation: 23859

You should assign an identifiable attribute to the form and use event.target to access that attribute.

In this case, I've assigned name to each form and printed the name on the console when the form is submitted.

$("form").submit(function(event) {
  event.preventDefault();
  console.log(event.target.name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form name="form1">
  <button type="submit">submit</button>
</form>

<form name="form2">
  <button type="submit">submit</button>
</form>

<form name="form3">
  <button type="submit">submit</button>
</form>

Upvotes: 3

Related Questions