提交表格后留在頁面上

Question

目的是一旦單擊了提交按鈕，而不是發送send.php，它將僅保留頁面，我什至不希望頁面重新加載。 如果你們有另一種方法可以做到這一點，那就太好了。

我的Ajax代碼

$("#sendtxt").click(function(e) {
        e.preventDefault();
        var phonenum = $("#phonenum").val();
        var provider = $("#provider").val();
        var message = $("#message").val();
        $.ajax({
            type : 'POST',
            data : dataString,
            url : 'send.php',
            success : function(data) {
                alert(data);
            }
        });
    });

我的表格代碼

    <form name="reqform" action="" method="post">
        <h1>Phone Number:
        <input name="phonenum" id="phonenum" type="text" class="txtbox-style" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" required/>
        <select name = "provider" id ="provider" class="txtbox-style" required>
            <option value="@sms.mycricket.com">Cricket Wireless</option>
        </select>
        <br/>
        Message:
        <input name="message" id="message" type="text" class="txtbox-style"/>
        <br/>
        How many times?
        <input name="amount" id="amount" type="number" min="1" max="20" class="txtbox-style" required/>
        <br />
        <input type="submit" id="sendtxt" name="sendtxt" class="btn-style" value="Start Sending" />
        </h1>
    </form>

我的send.php

<?php
 $to = $_POST["phonenum"];
 $provider = $_POST["provider"];
 $subject = 'Hi';
 $message = $_POST["message"];
 $headers = 'From: Hello' . phpversion();

 mail($to . $provider, $subject, $message, $headers);
?>

Answer 1

您的數據屬性不正確，沒有發送任何內容。 您可以這樣嘗試，它將起作用：

您必須在頁面中包含jQuery，您可以使用以下代碼行將其放置在腳本上方：

<script>
        $(document).ready(function(){
        $('input[name="phonenum"]').keyup(function(e) {
            if (/\D/g.test(this.value)) {
                // Filter non-digits from input value.
                this.value = this.value.replace(/\D/g, '');
            }
        });
        $("#sendtxt").click(function(e) {
            e.preventDefault();
            var phonenum = $("#phonenum").val();
            var provider = $("#provider").val();
            var message = $("#message").val();
            $.ajax({
                type : 'POST',
                data : {
                    provider : provider,
                    // ^key that appears in post
                    message : message,
                    // ^var you fetched before from the input
                    phonenum : phonenum
                },
                url : 'send.php',
                success : function(data) {
                    alert(data);
                    console.log('Success');

                },
                error : function(xhr, err) {
                    console.log("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
                    console.log("responseText: " + xhr.responseText);
                }
            });
        });
      });
    </script>

編輯：

檢查您的控制台是否有錯誤（chrome中為F12），如果有錯誤，它將看起來像這樣或類似的東西：

如果ajax成功，則至少會有“成功”

另一個編輯：

將您的表單放在<h1>標記之外，像這樣使用它：

<h1>Phone Number:</h1>

並刪除表單末尾的</h1> 。

Answer 2

我認為最好的方法是使用jquery $.post方法

$("form").submit(function(e) {
  e.preventDefault();

  $.post('send.php', $( this ).serialize()).done(function(data){
    alert(data);
  });

}

http://api.jquery.com/serialize/

http://api.jquery.com/jQuery.post/

**更新**

js小提琴示例：

http://jsfiddle.net/de71ju0r/1/

Answer 3

我更喜歡綁定表單的submit事件（因為用戶可能會在聚焦的<input>元素上按回車，而不是通過單擊<input type="submit"> ），此外還有一種更簡單的數據收集方法：

$("form").submit(function(e) {
    e.preventDefault();

    $.ajax({
        type : 'POST',
        data : $(this).serialize(),//Here we collect all entered data
        url : 'send.php',
        success : function(data) {
            alert(data);
        }
    });
});