I have PHP web page where I need to insert some information to my database. When insert is done, it refresh the same page. But I've been told that this process is not practical because you are loading all HTML, CSS, and JS of your page every time. And I should you AJAX to do that.
I search for it, and tried this code:
$("#insert").click(function(){
//get the form values
var selectType = $('#selectW').val();
var selectcom = $('#select_at').val();
var pay = $('#pay').val();
var facture = $('#facture').val();
var selectcur = $('#select').val();
//make the postdata
//var postData = 'username='+username+'&name='+name+'&brand='+brand;
//call your input.php script in the background, when it returns it will call the success function if the request was successful or the error one if there was an issue (like a 404, 500 or any other error status)
$.ajax({
url : "insert.php",
type: "POST",
data : postData,
success: function(data,status, xhr)
{
//if success then just output the text to the status div then clear the form inputs to prepare for new data
$("#section2").html(data);
$('#pay').val('');
$('#selectcur').val('');
},
error: function (jqXHR, status, errorThrown)
{
//if fail show error and server status
$("#section2").html('there was an error ' + errorThrown + ' with status ' + textStatus);
}
});// JavaScript Document
And here is my PHP-PDO code where I removed the header lines and replaced them with echo("something"):
if(isset($_POST['insert'])){
$selectOpt1 = $_POST['currency'];
if($selectOpt1=="9"){
$type = $_POST['type'];
$provider = $_POST['alfa_touch'];
$pay = $_POST['pay'];
$facture = $_POST['facture'];
try{
$query = "INSERT INTO sales
(type, provider, pay, facture, date_now, time_now)
VALUES
(:type, :provider, :pay, :facture, :date, now())";
$stmt = $conn->prepare($query);
$stmt->bindValue(":type", $type);
$stmt->bindValue(":provider", $provider);
$stmt->bindValue(":pay", $pay);
$stmt->bindValue(":facture", $facture);
$stmt->bindValue(":date", date("y-m-d"));
$count = $stmt->execute();
//header("location: home.php");
echo ("Done");
}
catch(PDOException $e) {
echo $e->getMessage();
//header("location: ../pages/insert_false.php?id=".$projid);
print_r($conn->errorInfo());
}
}
}
Now, when I click on insert button, the data are added correctly to MySQL database, but, the app stay in insert.php and echo Done. What I need is to stay in the same page. Any help is appreciated.
EDIT
$("#insert").click(function(){
//get the form values
var selectType = $('#selectW').val();
var selectcom = $('#select_at').val();
var pay = $('#pay').val();
var facture = $('#facture').val();
var selectcur = $('#select').val();
//make the postdata
var postData = 'username='+username+'&name='+name+'&brand='+brand;
//call your input.php script in the background, when it returns it will call the success function if the request was successful or the error one if there was an issue (like a 404, 500 or any other error status)
$.ajax({
url : "insert.php",
type: "POST",
data : postData,
success: function(data,status, xhr)
{
//if success then just output the text to the status div then clear the form inputs to prepare for new data
$("#section2").html(data);
$('#pay').val('');
$('#selectcur').val('');
},
error: function (jqXHR, status, errorThrown)
{
//if fail show error and server status
$("#section2").html('there was an error ' + errorThrown + ' with status ' + textStatus);
}
});
return false;
});// JavaScript Document
Still the same problem. And here is my HTML form:
<form name="insertForm" action="insert.php" method="post">
<tr>
<td align="center">
<select id="selectW" name="type">
<option value="Choose">Choose</option>
<option value="Dollars">Dollars</option>
<option value="D & D">D & D</option>
<option value="Cards">Cards</option>
<option value="Phones">Phones</option>
<option value="Acc">Acc</option>
<option value="Bills">Bills</option>
</select>
<!--<select>
<?php foreach($result5 as $rows){ ?>
<option value="<?php echo $rows['item_name'] ?>"><?php echo $rows['item_name'] ?></option>
<?php } ?>
</select>-->
</td>
<td align="center"><select id="select_at" name="alfa_touch">
<option value="Undefined">Not Required</option>
<option value="Alfa">Alfa</option>
<option value="Touch">Touch</option></select></td>
<td align="center"><input type="text" id="pay" name="pay"/></td>
<td align="center"><input type="text" id="facture" name="facture" placeholder="في حال دفع الفواتير عبر omt"/></td>
<td align="center"><select id="select" name="currency">
<option value="9">LBP</option>
<option value="10">Dollars</option>
</select></td>
<td align="center"><input type="submit" id="insert" name="insert" value="insert" />
</td>
</tr>
</form>
Add preventDefault to your javascript function
Function(e){
e.preventDefault()
...
}
In your HTML file you have action = 'insert.php' in <form> tag and you are also calling a function on button click having id insert.
Both are doing the same thing - sending values from HTML page to insert.php. In case <form>, page gets refreshed so go for ajax. Keep the script for click event.
action="insert.php" and method="post" from <form> tag.type = "button" in <button> tag.Hope this will help.