Question

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> 

Answer 1

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!"); 
    }); 
});