Hello i am trying to get the id of a form of which the onsubmit event is triggered. I have lots of forms in a page so i need to do this. I have tried the ones in the test method and all of those return "undefined"

<form id="addToBasketForm_39"  title="" method="post" onsubmit="test()">
          <input type="hidden" name="product_id" value="39">
          <input type="hidden" name="_token" value="M1kqlhvmIsZr9N8amTF84lwZeTuMgopHchEt4nhs">
            <a id="submit" class="add-to-cart" onclick="$('#addToBasketForm_39').submit()" >
            <i class="fa fa-shopping-cart"></i>Sepete Ekle</a>
        </form> 



function test(){
 var formID = $(this).parents("form").attr("id");

//var formID = $(this).closest("form").attr('id');
//var formID = $(this).closest("form[id]").attr('id');
alert(formID + ' form submitted');

}  

Hello i am trying to get the id of a form of which the onsubmit event is triggered. I have lots of forms in a page so i need to do this. I have tried the ones in the test method and all of those return "undefined"

<form id="addToBasketForm_39"  title="" method="post" onsubmit="test()">
          <input type="hidden" name="product_id" value="39">
          <input type="hidden" name="_token" value="M1kqlhvmIsZr9N8amTF84lwZeTuMgopHchEt4nhs">
            <a id="submit" class="add-to-cart" onclick="$('#addToBasketForm_39').submit()" >
            <i class="fa fa-shopping-cart"></i>Sepete Ekle</a>
        </form> 



function test(){
 var formID = $(this).parents("form").attr("id");

//var formID = $(this).closest("form").attr('id');
//var formID = $(this).closest("form[id]").attr('id');
alert(formID + ' form submitted');

}  

• javascript
• jquery

• `function test(event) { var formId = event.target.id; }? – putvande Commented Jun 13, 2017 at 12:07

3 Answers 3

Here is how to assign to all submit links unobtrusively

Also NEVER use the name or ID submit it can easily hide the submit event

Lastly IDs need to be unique, I removed the no longer used ID from the anchor

$(function() {
  $(".add-to-cart").on("click", function(e) { // anything with class add-to-cart
    e.preventDefault(); // cancel the link
    var $form = $(this).closest("form"); // The form this add-to-cart is in
    test($form.attr("id")); // not sure what you want here
    $form[0].submit(); // submit the actual DOM form
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="addToBasketForm_39" title="" method="post">
  <input type="hidden" name="product_id" value="39">
  <input type="hidden" name="_token" value="M1kqlhvmIsZr9N8amTF84lwZeTuMgopHchEt4nhs">
  <a class="add-to-cart" href="#"><i class="fa fa-shopping-cart"></i>Sepete Ekle</a>
</form>

I would remend you to use unobtrusive event handler instead of ugly inline event handler.

$('form').on('submit', test)

In the function

function test(){
  console.log(this.id);
}

As per the current code, pass the current element context i.e. this

<form id="addToBasketForm_39" onsubmit="test(this)">

Access the context in the code

function test(element){
  console.log(element.id)
}

<form id="addToBasketForm_39"  title="" method="post" onsubmit="test(this)">
          <input type="hidden" name="product_id" value="39">
          <input type="hidden" name="_token" value="M1kqlhvmIsZr9N8amTF84lwZeTuMgopHchEt4nhs">
            <a id="submit" class="add-to-cart" onclick="$('#addToBasketForm_39').submit()" >
            <i class="fa fa-shopping-cart"></i>Sepete Ekle</a>
        </form> 

<script type="text/javascript"> 
    function test(event)
    {
        var id = event.id;
        alert(id);
    }
</script>