CODEWITHSUNDEEP
javascriptjqueryforms
MaxPower
MaxPower

Reputation: 871

Form Handler not preventing default

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.

Upvotes: 0

Views: 52

Answers (1)

Devima
Devima

Reputation: 1566

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

Upvotes: 2

Related Questions