Submit JQuery form multiple times without reloading page - php

Question

I am trying to get my jquery form to allow for multiple submissions, but it will not load after a selection.
I have a grid (let's say 2x2). I click on a cell and fill in my name from a jquery form. I click submit and my name will appear in the cell via php. However, when I go to click on another cell the pop-up window does not appear.
I have added a simplified version of my code to jsfiddle (https://jsfiddle.net/7j7wxrpu/).
You can see from there my form is a pop-up window after you click on a cell:
<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>
And here is the php it calls from the file:
<?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;
}
}
?>
Besides the lack of security in my php is there anything I am missing? How come the pop-up box will only pop-up once until I refresh the page. I also notice when I refresh the page it tries to "Resend" the post data to the server. It looks like I have to clean the post data after a submit, is that a thing?

Answer 1

To do that without reloading the page you should use AJAX call to a PHP script that will insert the new data in the database and then query the database again and send the new values to your JavaScript and then with JavaScript to change the values of the cells.
Also, change names of the IDs - should have unique names: cell1, cell2.