CODEWITHSUNDEEP
ajaxform-submit
Randy Tang
Randy Tang

Reputation: 4353

Ajax: several forms share the same id

When using Ajax for form submission, can several forms share the same id? Such as the following.

HTML: 

<form id="myForm" action="/form" method="post"> 
  Phone: <input type="text" name="phone" /> 
  <input type="submit" value="Submit" /> 
</form>
...
<form id="myForm" action="/form" method="post"> 
  Name: <input type="text" name="name" /> 
  Comment: <textarea name="comment"></textarea> 
  <input type="submit" value="Submit Comment" /> 
</form>

Script:

<script> 
    // wait for the DOM to be loaded 
    $(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        $('#myForm').ajaxForm(function() { 
            alert("Thank you for your comment!"); 
        }); 
    }); 
</script>

Upvotes: 0

Views: 296

Answers (3)

fiso
fiso

Reputation: 1415

I don't recommend you to have the same id, if you want to have something similar I think that is better to have the same (css) class.

Having a repeated id will give you more that one problem.

Upvotes: 0

SLaks
SLaks

Reputation: 887449

You cannot have multiple HTML elements with the same ID, period.

Instead, you should use clas="".

Upvotes: 0

user1726343
user1726343

Reputation:

No: as a general principle, whenever you want to use the same term to group a bunch of elements you should use a class name:

<form class="myForm" action="/form" method="post"> 
  Phone: <input type="text" name="phone" /> 
  <input type="submit" value="Submit" /> 
</form>
...
<form class="myForm" action="/form" method="post"> 
  Name: <input type="text" name="name" /> 
  Comment: <textarea name="comment"></textarea> 
  <input type="submit" value="Submit Comment" /> 
</form>

Your JS would then be:

$(document).ready(function() { 
    // bind 'myForm' and provide a simple callback function 
    $('.myForm').ajaxForm(function() { 
        alert("Thank you for your comment!"); 
    }); 
});

Upvotes: 1

Related Questions