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.ph开发者_运维问答p" 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.
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/
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.
精彩评论