最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Passing a variable to JQuery submit function? - Stack Overflow

programmeradmin4浏览0评论

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)
Share Improve this question edited Apr 1, 2012 at 7:35 Your Common Sense 158k42 gold badges224 silver badges365 bronze badges asked Apr 1, 2012 at 6:53 qitchqitch 8293 gold badges12 silver badges21 bronze badges 2
  • 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
Add a ment  | 

5 Answers 5

Reset to default 2

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.

发布评论

评论列表(0)

  1. 暂无评论