Question

首先，谢谢你的帮助。

我已经尝试了几乎我在stackoverflow上找到的所有东西，但我无法让它工作。

我创建了一个表单来向网站管理员发送文本（而不是电子邮件）。所以我有我的index.php文件

    <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>

这是我的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>

该脚本不起作用。如果我将action = sendtext.php放在<form>中，它会完美地运行，但它会转发sendtext.php和echo。

我想要的是在echo中显示<div class="result"></div>。

再次感谢您的帮助。

更新＃1 几句评论后......

这就是我到目前为止......

<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>

更新2

阅读完所有评论并尝试不同的选项后，还没有成功！我做了@guy提出的建议，虽然有效，但我想使用form和submit。

再一次，我感谢你所有的时间来帮助我。谢谢！

Answer 1

问题在于，当您添加sendText.php作为操作时，您的jQuery 将执行，因为表单已提交以便可以正常运行... 但是它将会还会转到表单操作字段的页面。你想要做的是不要提交提交，而只是做一个按钮，让jQuery听取该按钮上的点击。

而不是：

<input type="submit" value="Submit" id="submit-button" name="submit" />

将其更改为常规按钮：

<button id="submit-button">Submit</button>

然后在你的jQuery中，改变行

$('#contact-form').submit(function() {

到

$('#submit-button').click(function() {

另外，将appendTo更改为html，然后结果应显示在结果div中。

---- ---- EDIT

这对我有用：

<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>

Answer 2

使用preventDefault（）函数，以便表单不在提交时进行重定向。之后，使用append（）而不是appendTo（）

$（'＃contact-form'）。submit（function（e）{


e.preventDefault（）;

Answer 3

变化：

$(".result").appendTo(response)

为：

$(".result").append(response)

Answer 4

你能试试吗，

 $(".result").html(response);

而不是

 $(".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;
    });        
});

Answer 5

您的appendTo成功回调是落后的。在您的示例中，您尝试将.result元素附加到response变量。应该是：

success: function(response){ response.appendTo(".result")}

提交一个php表单并在div上显示其结果而不重新加载页面

5 个答案: