Question

我试图让我的表单提交，而不是每次都刷新页面

然而，当我插入ajax并将php放入一个新文件时，表单不提交，我不明白为什么？

任何建议都会被贬低！

PHP

<?php
if(isset($_POST['name'], $_POST['email'], $_POST['phone'], $_POST['message'])){
    //Post data
    $name = $_POST['name'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $message = $_POST['message'];
    //mail settings
    $to = "arshdsoni@gmail.com";
    $subject = 'Soni Repairs - Support Request';
    $body = <<<EMAIL

Hi There!

My name is $name.

Message: $message.

My email is: $email
Phone Number: $phone

Kind Regards
EMAIL;

    $header = "From: $email";

    if($_POST) {
        if($name == '' || $email == '' || $phone == '' || $message == '') {
            echo $feedback = "<font color='red'> *Please Fill in All Fields!";
        }
        else {
            mail($to, $subject, $body, $header);
            echo $feedback = "<font color='green'> *Message sent! You will receive a reply shortly!";
        }
    }

}

else{
    echo $feedback = "<font color='red'> Missing Params";
}

?>

AJAX

<script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            $(document).ready(function(){

                $("#submitBtn").click(function( event ) {
                    //values
                    var name=document.getElementById('name').value;
                    var email=document.getElementById('email').value;
                    var phone=document.getElementById('phone').value;
                    var message=document.getElementById('message').value;
                    var occasion=document.getElementById('occasion').value;
                    var dataString = $("#contact").serialize();

                    $.ajax({
                        type:"post",
                        url:"php.php",
                        data: dataString,
                        success: function(html) {
                            $('#feedback').html(html);
                        }
                    });
                  event.preventDefault();
                });
            });
        </script>

HTML CODE HERE：http://www.codeply.com/go/e3jAo1WrPl

Answer 1

.bind（）函数可能是使用此表单的方法，因为它将单击按钮的操作绑定到事件处理程序。

在ajax调用之前使用event.preventDefault（）也可能是有益的。

            $(document).ready(function(){
            $("#submitBtn").bind([boundElement],function( event ) {
                event.preventDefault();
                var name=document.getElementById('name').value;
                var email=document.getElementById('email').value;
                var phone=document.getElementById('phone').value;
                var message=document.getElementById('message').value;
                var occasion=document.getElementById('occasion').value;
                var dataString = $("#contact").serialize();

                $.ajax({
                    type:"post",
                    url:"php.php",
                    data: dataString,
                    success: function(html) {
                        $('#feedback').html(html);
                    }
                });
             return true;
            });
        });

我建议仔细检查.bind（）参数中绑定元素的语法。它是用于引用命名表单元素的单引号示例HTML：

Answer 2

以下是使用按钮代替提交的建议。我评论了preventDefault，因为在这种情况下没有必要 - 我们实际上并没有提交表格。这给了我们更多的控制权。

请求已提交。在这种情况下，它显然失败了。在您的情况下，它是否失败将取决于您在服务器端的进展。

http://plnkr.co/edit/txuxaFUkgFq9SFDcqUdp

<form action="http://www.yahoo.com" id="contactForm" method="get" target="_blank">
    <div class="innerForm">
        <label for="name">Name:</label>
        <input id="name" name="name" type="text" />
        <label for="phone">Phone:</label>
        <input id="phone" name="phone" type="text" />
        <label for="email">Email:</label>
        <input id="email" name="email" type="text" />
        <label for="occasion">Occasion:</label>
        <input id="occasion" type="text" name="occasion" />
        <label id="messageLabel" for="message">Message:</label>
        <textarea id="message" name="message"></textarea>
        <button id="test">test</button>
        <!--input type="submit" value="Submit" id="submitBtn" name="submit" onclick="return chk();"/ -->
    </div>
    <div id="feedback"></div>
</form>

$(document).ready(function(){
    $("#test").click(function (event) {
      //values
      alert("test clicked");
      var name = document.getElementById('name').value;
      var email = document.getElementById('email').value;
      var phone = document.getElementById('phone').value;
      var message = document.getElementById('message').value;
      var occasion = document.getElementById('occasion').value;
      var dataString = $("#contactForm").serialize();

      $.ajax({
          type: "get",
          url: "http://www.yahoo.com",
          data: dataString,
          success: function (html) {
              alert("success");
              //$('#feedback').html(html);
          },
          error: function(result){
              alert("failure");
          }
      });
      //event.preventDefault();
  });
});

Answer 3

这可能会帮助您解决问题：

$(document).ready(function() {
    $("#contact").submit(function(event) {
        event.preventDefault();

        var name       = $('#name').val(),
            email      = $('#email').val(),
            phone      = $('#phone').val(),
            message    = $('#message').val(),
            occasion   = $('#occasion').val(),
            dataString = $(this).serialize();

        $.ajax({
            url: 'php.php',
            type: 'post',
            data: dataString,
        })
        .done( function( html ) {
            $( '#feedback' ).html( html );
        })
        .fail( function( response ) {
            console.log( response );
        });

    });
});

首先，你有表单和提交按钮，所以当你按下按钮时，事件'submit'被触发，所以你阻止事件被触发，然后你做你的编码，变量，但我不明白为什么你宣布所有这些，如果你不使用它们，但这取决于你。

Php表单提交没有刷新 - Ajax无法正常工作

3 个答案: