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

Share Improve this question Follow asked Jun 13, 2017 at 12:05 rematnarabrematnarab 1,32555 gold badges2525 silver badges4646 bronze badges 1

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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>