So I have this:

$('#id').submit(function(e){
    e.preventDefault();
    etc etc

I want to be able to have this:

$('#id' + variable).submit(function(e){
    e.preventDefault();
    etc etc

I'm not sure what I should do to go about that. The reason for it is that there are many similar forms on the page that get generated dynamically.

I tried doing this and I'm guessing that is just a terrible thing to do but it was all I could think to try as I am not very good with JQuery:

function foo(variable){
    $('#id' + variable).submit(function(e){
    e.preventDefault();
    etc etc
}

But that causes the form to be submitted multiple times.

-edit- to respond to a request:

$.ajax({  
    type: "POST",  
    url: "process.php",  
    data: dataString,  
    success: function(data) { 

            var responseData = jQuery.parseJSON(data),
            etc etc do some stuff like show a message (all that works)

So I have this:

$('#id').submit(function(e){
    e.preventDefault();
    etc etc

I want to be able to have this:

$('#id' + variable).submit(function(e){
    e.preventDefault();
    etc etc

I'm not sure what I should do to go about that. The reason for it is that there are many similar forms on the page that get generated dynamically.

I tried doing this and I'm guessing that is just a terrible thing to do but it was all I could think to try as I am not very good with JQuery:

function foo(variable){
    $('#id' + variable).submit(function(e){
    e.preventDefault();
    etc etc
}

But that causes the form to be submitted multiple times.

-edit- to respond to a request:

$.ajax({  
    type: "POST",  
    url: "process.php",  
    data: dataString,  
    success: function(data) { 

            var responseData = jQuery.parseJSON(data),
            etc etc do some stuff like show a message (all that works)

• javascript
• jquery

• 1 Could you post how you submit your form in that submit() function? – Andreas Wong Commented Apr 1, 2012 at 6:56
• What should contain you variable ? If it's another selector, do not forget to use a ma => $('#id, ' + variable) – j_freyre Commented Apr 1, 2012 at 6:57

5 Answers 5

If you are producing multiple forms with different ID's dynamically, it would probably advantageous if they all used the same class="preventSubmit" and your code looked like:

$('.preventSubmit').submit(function(e){
  var currentThis = this;
  alert(this.id);
  e.preventDefault(); // breaks this
  alert(currentThis.id);
  etc etc

If you want to avoid the submission itself, there are two approaches:

1) Use a input type="button" and attach a event handler for click:

<input type="button" id="submit_btn" value="Submit" />

// (In Javascript):

$("#submit_btn").click(function() {

});

2) To stop the submission, use return false :

$("#id" + variable).submit(function() {
    return false;
});

Try this.

$('form').on('submit', function(e){
    var variable = $(this).attr('id');
    e.preventDefault();
});

If you have this html

<div id="wrap">
 <form id="id35">
  <input type="submit" value="submit" />
 </form>
</div>

and this js

var threeFive = 35;
 $("#id"+threeFive).submit(function(e){
  e.preventDefault;
  alert("hi");
 });

it works!! ... BUT, ...if you have this html

<div id="wrap">

</div>

and later you append dynamically the form element to the container, let's say like

sample js function

function addMe(){
 $('#wrap').append('<form id="id35"><input type="submit" value="submit" /></form>')
}

sample add button

<a class="addMe" href="javascript:addMe();">add form</a>

then, the example alert doesn't work anymore when you submit the form.

You would need to modify your script to support that dynamically added form using the .on() method (and jQuery v1.7.x) targeting the parent container like

var threeFive = 35;
$("#wrap").on("submit","#id"+threeFive, function(e){
 e.preventDefault;
 alert("hi");
});

then it will work

if you have to deal with a lot of forms in single page, you might want to exploit bubbling.

<div class="container-for-all-forms">
<form id="..." class="..."> ..... <input type="submit" />  </form>
<form id="..." class="..."> ..... <input type="submit" />  </form>
<form id="..." class="..."> ..... <input type="submit" />  </form>
.
.
</div>

js bit might be

$('#container-for-all-forms').bind('click.formProcessor', function(event){
  var $clicked = $(event.target);
  if($clicked.is(':submit')){
    event.preventDefault();
    console.log($clicked.parents('form').attr('id'));

    /* at this point you can get all id names from php (or template language), bind js variables and match. like:
       var idNames = ['<?...?>','<?...?>']
    */

  }
});

this will bind only one event to container element, and you can run all sorts of checking when a click occurs in that container.