要在同一網頁上顯示結果

我使用php，mysql和ajax來顯示聯繫表單，但問題是輸出「插入1條記錄」顯示在下一頁上。我希望在提交時顯示在同一頁面上。要在同一網頁上顯示結果

以下是代碼

validation.html

<html> 
<head> 
    <title>Contact Form</title> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script type="text/javascript" language="javascript"> 

// <script type="text/javascript"> 

$(document).ready(function(){ 
    $("#myButton").click(function() { 
    alert("Hii"); 
     $.ajax({ 
     cache: false, 
     type: 'POST', 
     url: 'validation.php', 
     data: $("#contact").serialize(), 
     success: function(d) { 
      $("#record").html(d); 
     } 
     }); 
    }); 
}); 

</script> 
    </head> 
    <body> 
    <form method="post" id="contact" action="validation.php"> 
    Name: <input type="text" name="name"> <br> 
    E-mail: <input type="text" name="email"> <br> 
    Password: <input type="text" name="pass"> <br> 
    Mobile: <input type="number" name="mobile"> <br> 
    <br> 
    <input type="submit" value="SUBMIT" id="mybutton"/> 
    </form> 
    <div id="record">Record has been inserted</div> 
    </body> 
</html>

任何人都可以請指出我怎麼能去這樣做或需要什麼樣的所有更改？

來源

2014-01-27 Caffeine Coder

使用Ajax後，而不是提交 –

將不得不尋找到它，初始搜索有意義的答案。你能否更具描述性，並將其作爲答案發布？ –

爲什麼不把'

這是因爲當您單擊#myButton時，您提交表單並重定向您。

只需防止默認操作。

$("#myButton").click(function(event) { 
event.preventDefault(); 
alert("Hii"); //what is this for??? 
    $.ajax({ 
    cache: false, 
    type: 'POST', 
    url: 'validation.php', 
    data: $("#contact").serialize(), 
    success: function(d) { 
     $("#record").html(d); 
    } 
    }); 
});

來源

2014-01-27 07:45:26

我做了同樣的事情，但它仍然被重定向到下一個頁面:( –

聲音像其他事情正在進行，如果你防止默認，表單不應該被提交 –

我已經插入回聲在if if else循環顯示數據已經插入在validation.php中，除此之外沒有什麼更多的了 –

當前表單由您的按鈕提交，因爲它是Submit-Button。如果你不希望提交表單的方法有幾種，但是這兩個是最好的：

// Use prevent default 
$("#myButton").click(function(e) { // This 'e' is important 
    e.preventDefault() 
    # rest of the function here 
});

，或者你可以只更換您的提交按鈕，鏈接標記（只是一個佔位符的href）像這裏：

<html> 
    <head> 
    <title>Contact Form</title> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script type="text/javascript" language="javascript"> 

    <script type="text/javascript"> 
     // Actual Javascript code here 
    </script> 
    </head> 
    <body> 
    <form method="post" id="contact" action="validation.php"> 
    Name: <input type="text" name="name"> <br> 
    E-mail: <input type="text" name="email"> <br> 
    Password: <input type="text" name="pass"> <br> 
    Mobile: <input type="number" name="mobile"> <br> 
    <br> 
    <a href="#" id="mybutton">SUBMIT</a> 
    </form> 
    <div id="record">Record has been inserted</div> 
    </body> 
</html>

最好的情況是兩者結合。

來源

2014-01-27 07:53:42

花了8分鐘發佈我發佈的答案？ –

仔細閱讀，我提出了不同的幫助！ –

它打開另一個頁面，因爲當您單擊#myButton時，表單將執行提交過程。
有一些方法可以解決這個問題。

1.附加屬性到表單標籤：

<form method="post" id="contact" action="validation.php" onsubmit="return false;">

或
2.讓你的按鈕，以防止返回false提交procces：

$(document).ready(function(){ 
    $("#myButton").click(function() { 
     alert("Hii"); 
     $.ajax({ 
     cache: false, 
     type: 'POST', 
     url: 'validation.php', 
      data: $("#contact").serialize(), 
      success: function(d) { 
       $("#record").html(d); 
      } 
     }); 
     return false; 
    }); 
});

來源

2014-01-27 07:59:07

試過這個，但是數據沒有插入到數據庫中 –

你的'return false'是'click'的回調函數外''' – vher2

對不起我的錯，返回應該是在點擊函數 –

U的提交按鈕，只需改變

<input type="button" id="myButton">Submit</input> 
OR 
<button id="myButton">Submit</button>

它會調用你的ajax請求。

來源

2014-01-27 08:02:03

這是如何upvoted？表單內的按鈕仍然默認爲提交操作。 –

對我來說也沒有任何意義，只是爲了確保它被重定向。 –

夥計們，如果他使用提交，請求將作爲表單提交，並且這不會調用您的JQuery事件函數。查看用戶的表單，沒有使用onsubmit =「return false;」所以它會直接使用HTTP請求發送到服務器 –

試圖調用函數onclick事件輸入元素的

<input type="submit" value="SUBMIT" id="mybutton" onclick="return myFunction()"/>

然後調用這個函數

function myFunction() 
{ 
    $.ajax({ 
    cache: false, 
    type: 'POST', 
    url: 'validation.php', 
    data: $("#contact").serialize(), 
    success: function(d) { 
     $("#record").html(d); 
    } 
    }); 
    return false; 
}

也是這個

<form method="post" id="contact" action="validation.php">

代之以

<form method="post" id="contact" action="validation.php" onsubmit="return false;">

它應該幫助你！謝謝。

來源

2014-01-27 08:03:15

試試這個

<input type="button" id="myButton">Submit</input>

OR 再次提交

來源

2014-02-06 12:35:37 harish

要在同一網頁上顯示結果

回答

相關問題