提交JQuery表單多次不重新加載頁面

-1

我想讓我的jQuery表單允許多個提交，但它不會在選擇後加載。我有一個網格（比方說2x2）。我點擊一個單元格並從jquery表單填寫我的名字。我點擊提交，我的名字將通過php出現在單元格中。但是，當我點擊另一個單元格時，彈出窗口不會出現。提交JQuery表單多次不重新加載頁面

我已經將我的代碼的簡化版本添加到jsfiddle（https://jsfiddle.net/7j7wxrpu/）。

你可以從那裏看到我的形式是一個彈出窗口中點擊單元格後：

<table border=1> 
<tr><td colspan="11"><center><h2>Away Team</h2></center></td></tr> 
     <tr><th class='header-cols'></th><th class='header-cols'><h1>0</h1></th><th class='header-cols'><h1>1</h1></th></tr><tr><th class='header-rows'><h1>0</h1></th><td class='grid-cells'> 
        <a href='#myPopup' data-rel='popup'> 
         <div id='cell' onclick='setCoords(0,0);'> 
          <div class='grid-num'>1</div> 
          <div class='grid-name'>justin9</div> 
         </div> 
        </a> 
        </td><td class='grid-cells'> 
        <a href='#myPopup' data-rel='popup'> 
         <div id='cell' onclick='setCoords(1,0);'> 
          <div class='grid-num'>2</div> 
          <div class='grid-name'>justin10</div> 
         </div> 
        </a> 
        </td></tr><tr><th class='header-rows'><h1>1</h1></th><td class='grid-cells'> 
        <a href='#myPopup' data-rel='popup'> 
         <div id='cell' onclick='setCoords(0,1);'> 
          <div class='grid-num'>3</div> 
          <div class='grid-name'></div> 
         </div> 
        </a> 
        </td><td class='grid-cells'> 
        <a href='#myPopup' data-rel='popup'> 
         <div id='cell' onclick='setCoords(1,1);'> 
          <div class='grid-num'>4</div> 
          <div class='grid-name'></div> 
         </div> 
        </a> 
        </td></tr></table> 

<div data-role="popup" id="myPopup" class="ui-content" style="min-width:250px;"> 
    <form method="post" action=""> 
    <div> 
     <h3>Pick This Square:</h3> 
     <label for="name" class="ui-hidden-accessible">Name:</label> 
     <input type="text" name="name" id="name" placeholder="Name"> 
     <label for="email" class="ui-hidden-accessible">Email:</label> 
     <input type="text" name="email" id="email" placeholder="Email"> 
     <input type="submit" data-inline="true" value="Submit"> 
     <!--<input type='hidden' name='row' value=''> 
<input type='hidden' name='col' value=''>--> 
     <div id='row-div'></div> 
     <div id='col-div'></div> 
    </div> 
    </form> 
</div>

，這裏是它從文件調用PHP：

<?php 
    include_once 'connectmysql.php'; 

    if(!isset($_POST['name']) || !isset($_POST['email'])){ 
     //fail because one is blank 
     echo "Failed the POSt data: Name: " . $_POST['name'] . " | Email: " . $_POST['email']; 
    } 
    else{ 
     $name = $_POST['name']; 
     $email = $_POST['email']; 
     $row = $_POST['row']; 
     $col = $_POST['col']; 
     $tstamp = date("Y-m-d_H:i:s"); 
     //Write to the sql db 
     $conn = ConnectMySQL(); 
     $sql = "INSERT INTO picks (name,email,paid,row,col,tstamp) VALUES('$name','$email',0,$row,$col,'$tstamp')"; 
     if ($conn->query($sql) === TRUE) { 
      echo "New record created successfully"; 
     } else { 
      echo "Error: " . $sql . "<br>" . $conn->error; 
     } 
    } 
?>

除了在我的PHP缺乏安全性有什麼我失蹤？彈出框如何纔會彈出一次，直到我刷新頁面。我還注意到，當我刷新頁面時，它試圖將「重新發送」數據到服務器。看起來我必須在提交後清理髮布的數據，是一件事情嗎？

來源

2016-10-02 Webtron

我沒有看到負責Ajax調用或彈出窗口的代碼。請在您的問題中發佈所有相關代碼。 –

我添加了表中的代碼 – Webtron

要做到這一點，無需重新加載頁面，您應該使用AJAX調用PHP腳本，該腳本會將新數據插入數據庫，然後再次查詢數據庫並將新值發送到您的JavaScript，然後使用JavaScript更改細胞的值。

此外，更改ID的名稱 - 應具有唯一名稱：cell1，cell2。

來源

2016-10-02 13:47:14

提交JQuery表單多次不重新加載頁面

回答

相關問題