CODEWITHSUNDEEP
jqueryajax
Sweepster
Sweepster

Reputation: 1949

jQuery Ajax not returning success

I have this code that goes to form.php instead of pulling the echoed php into a #success div on my main page:

<script type="text/javascript">

    data = $(form).serialize();
    $('#form').submit(function() {   
        $.ajax({
        url: '../wp-content/themes/MC/form.php',
        type: 'POST',
        data: data,
        success: function(result) {
            $('#success').html('').html(result);
            }
        });
    });
</script>
                <div id="form">
                <br>
                <form action="http://www.mcfilmmakers.com/wp-content/themes/MC/form.php" method="post">
                    Name / Nom:<input type="text" name="fullname" /><br />
                    E-mail / Courriel:<input type="text" name="email" /><br />                          Your Daily URL / Votre URL Quotidien:<input type="text" name="link" /><br />
                    Voting Instructions / Instructions de Vote:<textarea name="instr" style="width: 450px; height: 100px;"/></textarea><br />
                    <input type="submit" value="Submit" />
                </form>
            </div>
            <div id="success">
            </div>

The form.php does recieve the post information because it is echoing the input. For some reason though, it's just not being inserted into #success.

Upvotes: 0

Views: 2248

Answers (2)

Rusty Fausak
Rusty Fausak

Reputation: 7525

Try this:

$('#form').submit(function(event) {   
    $.ajax({
        url: '../wp-content/themes/MC/form.php',
        type: 'POST',
        data: data,
        success: function(result) {
            $('#success').html(result);
        }
    });
    event.preventDefault();
});

When submitting your form, by default it will post the form the the action attribute of the form. You want to prevent that post from happening, and instead do it with ajax. So event.preventDefault() will prevent that.

Also no need to chain .html('') because it sets the entire content. See http://api.jquery.com/html/

Upvotes: 1

DrStrangeLove
DrStrangeLove

Reputation: 11587

your code:

$('#form').submit(function()

#form points to `div id="form"`

You register onsubmit event to div. try adding id=form like this:

<form action="http://www.mcfilmmakers.com/wp-content/themes/MC/form.php" method="post" id="form">

and delete id="form" from div.

Upvotes: 1

Related Questions