CODEWITHSUNDEEP
javascriptjquery
qitch
qitch

Reputation: 829

Passing a variable to JQuery submit function?

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)

Upvotes: 1

Views: 11318

Answers (5)

eringen
eringen

Reputation: 381

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.

Upvotes: 0

rgin
rgin

Reputation: 2311

Try this.

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

Upvotes: 1

Erik Philips
Erik Philips

Reputation: 54628

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

Upvotes: 2

JFK
JFK

Reputation: 41143

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

Upvotes: 0

Robson Fran&#231;a
Robson Fran&#231;a

Reputation: 661

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

Upvotes: 1

Related Questions