提交一个PHP表单，并在div上显示其结果，无需重新载入页面 [英] Submit a php form and display its result on div without reloading page
问题描述
我已经尝试了几乎所有我在stackoverflow上找到的东西，但是我无法得到它。
我创建了一个表单向网站管理员发送文本（而不是电子邮件）。所以我有我的index.php文件
< style>
.result {
padding：20px;
font-size：16px;
background-color：#ccc;
颜色：#fff;
}
< / style>
< form id =contact-formmethod =post>
< div>
< input type =textid =fullnamename =fullnamevalue =placeholder =Namerequired =requiredautofocus =autofocusautocomplete =off/>
< / div>
< div>
< input type =emailid =emailname =emailvalue =placeholder =example@yourdomain.comrequired =requiredautocomplete =off/>
< / div>
< div>
< / div>
< div>
< input type =submitvalue =Submitid =submit-buttonname =submit/>
*表示必填字段
< / div>
< / form>
< div class =result>< / div>
这是我的jquery
< script src =http://ajax.googleapis.com/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）}
}）;
//返回false;
}）;
} ）;
< / script>
该脚本不起作用。如果我在< form> 中放置了 action = sendtext.php ，它会很好地工作，但它会让我sendtext.php和 echo 消息。
我想要显示 echo < div class =result>< / div> 。
再次感谢您的帮助。
更新＃1
在几点评论之后......
这就是我到目前为止...
<脚本>
$（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）}
}）;
//返回false;
} ）;
}）;
< / script>
更新2
阅读完所有评论并尝试不同的选项后，还没有成功！我做了@guy建议的操作，但它工作正常，但我想用 form 和 submit 。
再次感谢您为我提供帮助的所有时间。谢谢！
问题是，当你添加sendText.php作为动作时，你的jQuery strong>执行，因为表单已提交，因此可以工作... 但它也会将您带到表单操作字段的页面。你想要做的是不要调用提交，但只需制作一个按钮，让jQuery在该按钮上点击点击。
而不是：
< input type =submitvalue =Submitid =submit -buttonname =submit/>
将其更改为常规按钮：
< button id =submit-button>提交< / button>
然后在您的jQuery中，更改行
< pre $
$（'＃contact-form'）。submit（function（）{
到
$（'＃submit-button'）。click（function（）{
另外，将appendTo更改为html，然后结果应显示在结果div中。
----编辑----
这对我有用：
< style>
.result {
padding：20px;
font-size：16px;
background-color：＃ ccc;
颜色：#fff;
}
< / style>
< div id =contact-form>
< div>
< input type =textid =fullnamename =fullnamevalue =placeholder =Namerequired =requiredautofocus =autofocusautocomplete =off/>
< / div>
< div>
< input type =emailid =emailname =emailvalue =placeholder =example@yourdomain.comrequired =requiredautocomplete =off/>
< / div>
< div>
< / div>
< div>
< button id =submit-button>提交< / button>
*表示必填字段
< / div>
< / div>
< div class =result>< / div>
< script src =http://ajax.googleapis.com/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>
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" autocomplete="off" />
</div>
<div>
<input type="email" id="email" name="email" value="" placeholder="example@yourdomain.com" required="required" autocomplete="off" />
</div>
<div>
<textarea id="message" name="message" value="" placeholder="20 characters max." required="required" maxlength="50" autocomplete="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.com/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 comments...
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 comments 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!
The 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" autocomplete="off" />
</div>
<div>
<input type="email" id="email" name="email" value="" placeholder="example@yourdomain.com" required="required" autocomplete="off" />
</div>
<div>
<textarea id="message" name="message" value="" placeholder="20 characters max." required="required" maxlength="50" autocomplete="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.com/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>
这篇关于提交一个PHP表单，并在div上显示其结果，无需重新载入页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
