防止表單提交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 santa

您可以顯示一些您創建的代碼嗎？ – 2011-04-22 20:21:07

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

刷新將不會提交表格。對於回車鍵，只有當表單處於焦點狀態（選定）時才應提交。如果你確定它是隱藏的，點擊回車就不會提交它。

來源

2011-04-22 20:23:41

但從技術上講，如果用戶點擊編輯按鈕，顯示一個表單編輯一個字段，但然後改變他的想法並返回到文本預覽，然後點擊輸入...我想我想傻到它最大。 – 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');

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

來源

2011-04-22 20:28:26 scurker

我會做這樣的事：

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

來源

2011-04-22 20:28:41 Esben

防止表單提交w/jQuery

回答

相關問題