Form Handler not preventing default

Question

I am new to jQuery.

I am trying to submit a form, but the form handler is not preventing form submission.

This is my form:

<form action = "myForm.php" id="testForm">
        <ul data-role="listview" data-style="inset">
            <li>
                <label>Message: </label>
                <input type="text" name="message"/>
            </li>
            <li>
                <label>From: </label>
                <input type="text" name = "from" />
            </li>
            <li>
                <label>To: </label>
                <input type="text" name = "to" />
            </li>
        </ul>
        <center><input type="submit" /></center>
    </form>

and the jQuery (which does appear after the form)

<script>
        $( "#testForm" ).submit(function( event ) {
            event.preventDefault();
            var $form = $(this), 
            messageValue = $form.find("input[name = "message"]").val(),
            messageFrom = $form.find("input[name = "from"]").val(),
            messageTo = $form.find("input[name = "to"]").val(),
            url = "myForm.php";
            var posting = $.post(url, {message: messageValue, from: messageFrom, to: messageTo})
            posting.done(function( data ) {
                var content = $( data ).find( "#content" );
                $( "#result" ).empty().append( content );
            });
        });
    </script>

But the form handler is not preventing default submission. Any help as to what I am doing wrong is greatly appreciated.

Here is a little light reading that will help you to understand what is going on - http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false Your code worked for me, but you may want to go ahead and enclose the script in a document ready handler and then test. — Jay Blanchard, Apr 29 '14 at 16:36
You should have errors in console, check it and fix it. e.g, this is wrong syntax: `.find("input[name = "message"]")` — A. Wolff, Apr 29 '14 at 16:40
Thank you! Now, I kinda feel dumb...I used double quotes when it should have been single... — MaxPower, Apr 29 '14 at 16:53

Devima · Accepted Answer · 2014-04-29T16:55:48.290

You must also be careful to single quotes and double quotes in your selectors

<script type="text/javascript">
$(document).ready(function(){
       $( "#testForm" ).submit(function( event ) {
            event.preventDefault();
            var $form = $(this), 
            messageValue = $form.find("input[name = 'message']").val(),
            messageFrom = $form.find("input[name = 'from']").val(),
            messageTo = $form.find("input[name = 'to']").val(),
            url = "myForm.php";
            var posting = $.post(url, {message: messageValue, from: messageFrom, to: messageTo})
            posting.done(function( data ) {
                var content = $( data ).find( "#content" );
                $( "#result" ).empty().append( content );
            });
        });

})
</script>

        messageValue = $form.find("input[name = 'message']").val(),//correct
        messageValue = $form.find('input[name = "message"]').val(),//correct
        messageValue = $form.find('input[name = 'message']').val()//no
        messageValue = $form.find("input[name = "message"]").val()//no

Form Handler not preventing default

1 Answers1