JQuery函数提交()不提交表单

Posted

技术标签:

【中文标题】JQuery函数提交()不提交表单【英文标题】:JQuery function submit() not submitting form 【发布时间】:2013-09-30 17:23:32 【问题描述】:

我无法提交要提交的表单,else 中的 alert ($('#submit').val()); 与提交一起出现,因此代码进入了正确的位置,但表单未提交。

表单有一个其他名称的id,提交按钮被称为名称和保存的id,目前都设置为提交。

任何帮助表示赞赏。

$(document).ready(function()
// force content into cnamex
$('#submit').click(function(event)
    event.preventDefault(); // prevent submit
    error = '';
    for ( var i = 0; i < 10; i++ ) 
        if  ($('#cname' + i).length > 0) 
            if ($('#cname' + i).val().length == 0) 
                error = 'Names for those attending are required';
            
        
    
    if (error != '') 
        alert (error);
    
    else 
        $('#othernames').submit();  
        alert ($('#submit').val());
    
);
); 

htmlphp 生成的,这是一个没有任何验证框的版本

<form enctype="multipart/form-data" name="othernames" id="othernames"  method="post"    action="" target="_self">
<div class="table">
<table  border="0">
<tr>
        <td colspan="3" ><input name="submit" id="submit" type="submit" value="Confirm  Order" ></td>
</tr>
</table>
</div>
</form>

这是要验证的字段:-

<form enctype="multipart/form-data" name="othernames" id="othernames"  method="post" action="" target="_self">
<div class="table">
<table  border="0"><caption>Enter names for tickets, (if any)</caption>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Email (Optional)</th>
    <th scope="col">Club</th>
  </tr><tr><td><input name="cID[]" type="hidden" value="11"><input name="cname[]" id      ="cname0" type="text" size="15" maxlength="20"></td>
            <td><input name="cemail[]" id="cemail0" type="text" size="15"     maxlength="60"></td><td><input name="cclub[]" type="text" size="15" maxlength="25"    value="VRA - United Kingdom"></td></tr><tr><td><input name="cID[]" type="hidden"    value="11"><input name="cname[]" id="cname1" type="text" size="15" maxlength="20"></td>
        <td><input name="cemail[]" id="cemail1" type="text" size="15" maxlength="60"></td><td><input name="cclub[]" type="text" size="15" maxlength="25"  value="VRA - United Kingdom"></td></tr>
<tr>
<td colspan="3" ><input name="submit" id="submit" type="submit" value="Confirm  Order" ></td>
</tr>
</table>
</div>
</form>

使用reyaner的建议解决了问题,谢谢。 JQuery 现在读取,html 使用提交按钮

$(document).ready(function()
// force content into cnamex
    $('#submit').click(function(event)
            error = '';
        for ( var i = 0; i < 10; i++ ) 
            if  ($('#cname' + i).length > 0) 
                if ($('#cname' + i).val().length == 0) 
                event.preventDefault(); // prevent submit
                error = 'Names for those attending are required';
                
            
        
        if (error != '') 
            alert (error);
        
    );
);



enter code here

【问题讨论】:

你能显示你的html 您应该尝试:$(this).closest('form').get(0).submit(); BTW,ID 在上下文页面上必须是唯一的 与其有一个提交按钮,然后使用event.preventDefault(); 来停止默认功能,为什么不简单地使用常规按钮并添加此功能? 你应该发布你的html...,你也可以让提交按钮保持原样,并阻止表单提交:$("form").submit(function(e) //do stuff, prevent submit or dont if its ok.. ); HTML 添加到问题中,我已经尝试了上述两个建议,目前都不适合我, 【参考方案1】:

试试这个:

<form action='#' method='post' onSubmit='return validate()'>...</form>

然后 $('#submit').click 更改为函数 validate()...,删除 .preventDefault(),最后成功返回 true,否则返回 false。

function validate()
    error = '';
    for ( var i = 0; i < 10; i++ ) 
      if  ($('#cname' + i).length > 0) 
          if ($('#cname' + i).val().length == 0) 
              error = 'Names for those attending are required';
          
      
  
  if (error != '') 
    alert (error);
    return false;
  
  else 
    //$('#othernames').submit();  
    alert ($('#submit').val());
    return true;
  
);

【讨论】:

【参考方案2】:

Justinas Jurciukonis 的回答可能很有效,但这是我要使用的最终代码,因为它更短。检查 0 到 10 个可能的字段,如果 PHP 已经创建它们,如果它们是空白的,则警告并阻止提交,出于我的目的,这是足够的验证,但当然你可以在内部添加更多,并且比警告框更有创意.

    $('#submit').click(function(event)
    for ( var i = 0; i < 10; i++ ) 
        if  ($('#cname' + i).length > 0) 
            if ($('#cname' + i).val().length == 0) 
                event.preventDefault(); // prevent submit
                alert('Names for those attending are required');
            
        
    
);

PHP循环生成的html根据需要

    <tr>
    <td><input name="cname[]" id="cname0" type="text"></td>
</tr>
<tr>
    <td><input name="cname[]" id="cname1" type="text"></td>
</tr>
<input name="submit" id="submit" type="submit" value="Confirm  Order" >

【讨论】:

以上是关于JQuery函数提交()不提交表单的主要内容,如果未能解决你的问题,请参考以下文章

使用 jQuery 时提交表单不起作用

jQuery 提交函数不调用 html5 验证

重新提交具有 jQuery 提交函数并返回 False 的表单

jquery AJAX提交前beforesend无效,大家帮我看下谢谢。

jquery允许取消提交后提交表单

怎么使用jquery提交表单