AJAX POST - infrequent XHR Failed loading - data missing in PHP post - php

Question

Likely a duplicate in theme/name, but no previous solutions will work either because I'm missing something or there is something else going on.
The form - seemingly at random - fails (not altering data in any field, just the defaults set in html) and when it does succeed the PHP file logs only two of the values, the second one and the fourth (both pure numbers/ints). The two it doesn't echo are 1: a text field and 3: a float.
This is the result the .php picks up -
Connected
'' + '8080' + '' + '1'
Here is the .html and .js, what on earth am I missing here?
<form id="form_0" name="form_0" method="post" action="">
<input type="text" id="coinname" name="coinname" value="litecoin"><br>
<input type="number" id="coins" name="coins" value="8080"><br>
<input type="number" id="cost" name="cost" value="0.0808"><br>
<input type="number" id="show" name="show" value="1"><br>
<input type="submit" id="submit" name="submit" value="Save">
</form>
<script>
$("#form_0").submit(function() {
var selectedcoin = $("#coinname").val();
var coins = $("#coins").val();
var buyprice = $("#cost").val();
var show = $("#show").val();
$.ajax({
type: "POST",
url: "write-database.php",
data: "selectedcoin=" + selectedcoin + "&coins=" + coins + "&buyprice=" + buyprice + "&show=" + show,
success: function(data) {
alert(data);
}
});
});
</script>
and here is the .php
<?php
$servername = "localhost";
$username = "#";
$password = "#";
$dbname = "#";
// Create connection
$con = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
else {
echo "Connected <br>";
}
$selectedcoin=$_POST['selectedcoin'];
$coins=$_POST['coins'];
$buyprice=$_POST['buyprice'];
$show=$_POST['show'];
$sql= mysqli_query($conn,"INSERT INTO coin_price (coin_name, coin, price, display) VALUES ('".$selectedcoin."','".$coins."','".$buyprice."','".$show."')");
echo "'$selectedcoin' + '$coins' + '$buyprice' + '$show'";
mysqli_close($con);
?>

Answer 1

Just use serialize method to get all data from form values, as inputs names in $_POST global variable.
<form id="form_0" name="form_0" method="post" action="">
<input type="text" id="coinname" name="coinname" value="litecoin"><br>
<input type="number" id="coins" name="coins" value="8080"><br>
<input type="number" id="cost" name="cost" val="0.0808"><br>
<input type="number" id="show" name="show" value="1"><br>
<input type="submit" id="submit" name="submit" value="Save">
</form>
<script>
$("#form_0").submit(function() {
e.preventDefault();
$.ajax({
type: "POST",
url: "write-database.php",
data: $(this).serialize(),
success: function(data) {
alert(data);
}
});
});
</script>
<?php
$selectedcoin=$_POST['coinname'];
$coins=$_POST['coins'];
$buyprice=$_POST['cost'];
$show=$_POST['show'];
$sql= mysqli_query($conn,"INSERT INTO coin_price (coin_name, coin, price, display) VALUES ('".$selectedcoin."','".$coins."','".$buyprice."','".$show."')");
echo "'$selectedcoin' + '$coins' + '$buyprice' + '$show'";
?>

Answer 2

I hadn't disabled the default submit behaviour that refreshes the page...
$("#form_0").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "write-database.php",
data: $(this).serialize(),
success: function(data) {
alert(data);
}
});
});