Question

所以我有这个：

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

我希望能够拥有这个：

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

我不确定该怎么做才能解决这个问题。原因是页面上有许多类似的表格可以动态生成。

我尝试过这样做，我猜这只是一个可怕的事情，但我只能想到尝试，因为我对JQuery不是很好：

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

但是这会导致表单多次提交。

-edit-回应请求：

$.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

如果您动态生成具有不同ID的多个表单，那么如果它们都使用相同的class="preventSubmit"并且您的代码看起来像是这样的话，则可能会有所帮助：

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

Answer 2

如果您想避免提交本身，有两种方法：

1）使用输入类型=“按钮”并附加一个事件处理程序以进行单击：

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

// (In Javascript):

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

});

2）要停止提交，请使用return false：

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

Answer 3

试试这个。

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

Answer 4

如果你有这个html

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

和js

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

它有效!! ... 但是，...如果你有这个html

<div id="wrap">

</div>

稍后您将form元素动态追加到容器中，比如说

示例js函数

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

示例添加按钮

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

然后，当您提交form时，示例警报将不再起作用。

您需要修改脚本以支持动态添加form使用.on()方法（和jQuery v1.7.x）定位父容器，如

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

那么它会起作用

Answer 5

如果你必须在单个页面中处理很多表单，你可能想要利用冒泡。

<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位可能是

$('#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 = ['<?...?>','<?...?>']
    */

  }
});

这只会将一个事件绑定到容器元素，并且可以在该容器中发生单击时运行各种检查。

将变量传递给JQuery提交函数？

5 个答案: