Reputation: 1949
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
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
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