Question

我试图让我的jquery表单允许多个提交，但是在选择后它不会加载。我有一个网格（比方说2x2）。我点击一个单元格并从jquery表单填写我的名字。我点击提交，我的名字将通过php出现在单元格中。但是，当我单击其他单元格时，弹出窗口不会出现。

我已将代码的简化版本添加到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缺乏安全性，我还有什么遗漏？为什么弹出框只会弹出一次，直到刷新页面为止。我还注意到，当我刷新页面时，它会尝试将post数据“重新发送”到服务器。看来我必须在提交后清理帖子数据，这是件事吗？

Answer 1

要在不重新加载页面的情况下执行此操作，您应该使用AJAX调用PHP脚本，该脚本将新数据插入数据库，然后再次查询数据库并将新值发送到JavaScript，然后使用JavaScript更改值细胞

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

多次提交JQuery表单而不重新加载页面

1 个答案: