Passing a variable to JQuery submit function?

Question

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)

Answer 1

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

Answer 2

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

Answer 3

Try this.

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

Answer 4

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

Answer 5

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.