Question

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.

Answer 1

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/