Prevent form from submit w/ jQuery

Question

I have a page that displays data. A user can click "edit" button and the text displays within a form. Basically I hide form and on click toggle text to hide and form to show. I need to make sure that the form can not be submitted, via page refresh or clicking Enter key, until it is visible and the user clicks submit button.

How do I do that?

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

http://stackoverflow.com/questions/895171/prevent-users-from-submitting-form-by-hitting-enter — James Montagne, Apr 22 '11 at 20:26

score 1 · Answer 1 · answered Apr 22 '11 at 20:23

1

Refresh will not submit the form. For the enter key, it should submit only if the form is in focus (selected). If you make sure it is hidden, clicking enter will not submit it.

answered Apr 22 '11 at 20:23

Ron Harlev

16,227
24
89
132

But technically, if the user clicks edit button, shows a form edits a field but then changes his mind and goes back to text preview and then clicks enter... I think I want to fool-proof it to the max. – santa Apr 22 '11 at 20:39

score 1 · Answer 2 · answered Apr 22 '11 at 20:28

You can prevent the form from submitting by using a 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');

You can namespace the submit event (as above) to make it easier to remove later on.

score 0 · Answer 3 · answered Apr 22 '11 at 20:28

I would do something like this:

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: Hide the form div, so you can toggle it's visibility with jQuery.

#form {
    display:none;   
}

jQuery: Bind click event on the link, and send the text to the input. The form will then show itself.

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

Prevent form from submit w/ jQuery

3 Answers3