First of all, thank you for your kind help.
I have tried almost everything I found on stackoverflow but I cannot get this to work.
I created a form to send a text to the webmaster (instead of an email). So I have my index.php file
<style>
.result{
padding: 20px;
font-size: 16px;
background-color: #ccc;
color: #fff;
}
</style>
<form id="contact-form" method="post">
<div>
<input type="text" id="fullname" name="fullname" value="" placeholder="Name" required="required" autofocus="autofocus" autoplete="off" />
</div>
<div>
<input type="email" id="email" name="email" value="" placeholder="[email protected]" required="required" autoplete="off" />
</div>
<div>
<textarea id="message" name="message" value="" placeholder="20 characters max." required="required" maxlength="50" autoplete="off" ></textarea>
</div>
<div>
<input type="submit" value="Submit" id="submit-button" name="submit" />
*indicates a required field
</div>
</form>
<div class="result"></div>
And this is my jquery
<script src=".10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#contact-form').submit(function() {
$.ajax({
type:"POST",
url:"sendtext.php",
data: $("#contact-form").serialize(),
success: function(response){$(".result").appendTo(response)}
});
//return false;
});
});
</script>
The script does not work. If I put action = sendtext.php in the <form> it will work perfectly but it will take me to sendtext.php and echo the message.
What I want is to show the echo in the <div class="result"></div>.
Again thank you for your help.
UPDATE # 1 After a few ments...
this is what I have so far...
<script>
$(document).ready(function(){
$('#contact-form').submit(function(e) {
e.preventDefault();
$.ajax({
type:"POST",
url:"sendtext.php",
data: $("#contact-form").serialize(),
success: function(response){$(".result").append(response)}
});
//return false;
});
});
</script>
Update 2
After reading all the ments and try different options, no success just yet! I did what @guy suggested, and it worked but I want to use form and submit.
Again, I appreciate all your time you put to help me out. Thank you!
First of all, thank you for your kind help.
I have tried almost everything I found on stackoverflow but I cannot get this to work.
I created a form to send a text to the webmaster (instead of an email). So I have my index.php file
<style>
.result{
padding: 20px;
font-size: 16px;
background-color: #ccc;
color: #fff;
}
</style>
<form id="contact-form" method="post">
<div>
<input type="text" id="fullname" name="fullname" value="" placeholder="Name" required="required" autofocus="autofocus" autoplete="off" />
</div>
<div>
<input type="email" id="email" name="email" value="" placeholder="[email protected]" required="required" autoplete="off" />
</div>
<div>
<textarea id="message" name="message" value="" placeholder="20 characters max." required="required" maxlength="50" autoplete="off" ></textarea>
</div>
<div>
<input type="submit" value="Submit" id="submit-button" name="submit" />
*indicates a required field
</div>
</form>
<div class="result"></div>
And this is my jquery
<script src="http://ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#contact-form').submit(function() {
$.ajax({
type:"POST",
url:"sendtext.php",
data: $("#contact-form").serialize(),
success: function(response){$(".result").appendTo(response)}
});
//return false;
});
});
</script>
The script does not work. If I put action = sendtext.php in the <form> it will work perfectly but it will take me to sendtext.php and echo the message.
What I want is to show the echo in the <div class="result"></div>.
Again thank you for your help.
UPDATE # 1 After a few ments...
this is what I have so far...
<script>
$(document).ready(function(){
$('#contact-form').submit(function(e) {
e.preventDefault();
$.ajax({
type:"POST",
url:"sendtext.php",
data: $("#contact-form").serialize(),
success: function(response){$(".result").append(response)}
});
//return false;
});
});
</script>
Update 2
After reading all the ments and try different options, no success just yet! I did what @guy suggested, and it worked but I want to use form and submit.
Again, I appreciate all your time you put to help me out. Thank you!
Share Improve this question edited Jan 17, 2014 at 19:29 rob asked Jan 17, 2014 at 18:11 robrob 7342 gold badges8 silver badges22 bronze badges5 Answers
Reset to default 7The problem is that when you add sendText.php as the action, your jQuery will execute because the form is submitted so that will work... BUT it will also take you to the page of the form's action field. What you want to do is not call submit but just make a button instead and have the jQuery listen to a click on that button.
Instead of:
<input type="submit" value="Submit" id="submit-button" name="submit" />
Change it to a regular button:
<button id="submit-button">Submit</button>
Then in your jQuery, change the line
$('#contact-form').submit(function() {
to
$('#submit-button').click(function() {
Also, change appendTo to html and then the result should show up in your result div.
----EDIT----
This worked for me:
<style>
.result{
padding: 20px;
font-size: 16px;
background-color: #ccc;
color: #fff;
}
</style>
<div id="contact-form" >
<div>
<input type="text" id="fullname" name="fullname" value="" placeholder="Name" required="required" autofocus="autofocus" autoplete="off" />
</div>
<div>
<input type="email" id="email" name="email" value="" placeholder="[email protected]" required="required" autoplete="off" />
</div>
<div>
<textarea id="message" name="message" value="" placeholder="20 characters max." required="required" maxlength="50" autoplete="off" ></textarea>
</div>
<div>
<button id="submit-button">Submit</button>
*indicates a required field
</div>
</div>
<div class="result"></div>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#submit-button').click(function() {
$.ajax({
type:"post",
url:"sendText.php",
data: $("#contact-form").serialize(),
success: function(response){
$(".result").html(response);
}
});
});
});
</script>
Use the the preventDefault() function so that the form doesn't do the redirection on submit. After that, use append() instead of appendTo()
$('#contact-form').submit(function(e) {
e.preventDefault();
Change:
$(".result").appendTo(response)
to:
$(".result").append(response)
Can you try this,
$(".result").html(response);
instead of
$(".result").appendTo(response)
Jaavscript:
$(document).ready(function(){
$('#contact-form').submit(function() {
$.ajax({
type:"POST",
url:"sendtext.php",
data: $("#contact-form").serialize(),
success: function(response){
$(".result").html(response);
}
});
return false;
});
});
Your appendTo in success callback is backward. In your example, you are trying to append the .result element to the response variable. Should be:
success: function(response){ response.appendTo(".result")}