防止表单提交w/jQuery

问题描述：

我有一个显示数据的页面。用户可以点击“编辑”按钮，文本显示在表单中。基本上我隐藏窗体并点击切换文本来隐藏和显示。我需要确保无法通过页面刷新或单击Enter键提交表单，直到它可见并且用户单击提交按钮。防止表单提交w/jQuery

我该怎么做？

$("#dataForm").hide(); 

$("#editData").click(function() { 
    $("#dataForm").toggle(); 
    $("#dataText").toggle(); 
}); 


<div id="dataForm"> 
    <label>Label 1</label> 
    <input type="text"> 

    <label>Label 2</label> 
    <input type="text"> 

    <input type="submit"> 
</div> 


<div id="dataText"> 
    Label 1: abc 
    <br> 
    Label 2: 123 
    <br> 
    <span id="editData">Edit</span> 
</div>

您可以显示一些您创建的代码吗？ – 2011-04-22 20:21:07

http://*.com/questions/895171/prevent-users-from-submitting-form-by-hitting-enter – 2011-04-22 20:26:08

答

刷新将不会提交表格。对于回车键，只有当表单处于焦点状态（选定）时才应提交。如果你确定它是隐藏的，点击回车就不会提交它。

但从技术上讲，如果用户点击编辑按钮，显示一个表单编辑一个字段，但然后改变他的想法并返回到文本预览，然后点击输入...我想我想傻到它最大。 – santa 2011-04-22 20:39:44

答

可以防止从形式使用submit event handler提交：

// When the form is closed... 
$('form').bind('submit.myform', function(e) { 
    e.preventDefault(); // form will not be submitted 
}); 

// When the form is opened 
$('form').unbind('submit.myform');

您可以命名空间中的提交事件（如上），使其更容易稍后删除。

答

我会做这样的事：

HTML：

<table> 
    <tr> 
     <td class="text"> 
      Some text 
     </td> 
     <td> 
      <a href="#" id="edit">Edit</a> 
     </td> 
    </tr> 
</table> 

<div id="form"> 
    <form action="page" method="POST"> 
     <input type="text" name="text"> 
     <input type="submit" name="submit" id="submit"> 
    </form> 
</div>

CSS：隐藏表单的DIV，这样你就可以切换它的可视性与jQuery。

#form { 
    display:none; 
}

jQuery：绑定链接上的点击事件，并将文本发送到输入。表格将显示出来。

$("table").find('td').delegate('a', 'click', function() { 
    var a_elem = $(this), 
     parent_tr = a_elem.parents('tr'), 
     thetext = parent_tr.find('td.text').text().trim(); 

    $("input[name=text]").val(thetext); 
    $("div#form").show(); 
});

防止表单提交w/jQuery

相关推荐