Question

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

我该怎么做？

$("#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>

Answer 1

刷新不会提交表单。对于回车键，仅当表单处于焦点（选中）时才应提交。如果您确定它已隐藏，请单击“输入”将不会提交。

Answer 2

您可以使用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');

您可以命名提交事件（如上所述），以便以后更容易删除。

Answer 3

我会做这样的事情：

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

使用/ jQuery阻止表单提交

3 个答案: