I have this code that sends multiple data in MySQL Database using JQuery Ajax, all works fine but when i try to refresh the page using ajax and add new record, Its populated the number of times equivalent to the last counter.
Below is my index.php page;
<div id="sample_table_data">
<div class="row">
<div class="panel border-cyan-dark">
<div class="panel-heading bg-cyan text-white border-cyan-dark">
<div class="panel-title">
<h4>PHP - Sending multiple forms data through jQuery Ajax</h4>
</div>
</div>
<div class="panel-body">
<div style="padding-bottom: 10px;" align="right">
<button name="add" id="add" class="btn btn-success btn-sm">
<i class="fa fa-plus-square"></i>Add Measures
</button>
</div>
<form method="POST" id="user_form">
<div class="row">
<div class="table-responsive margin-bottom-20" >
<table class="table table-striped table-bordered table-condensed table-hover" id="user_data">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Details</th>
<th>Remove</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="row">
<input type="submit" name="insert" id="insert" class="btn btn-primary btn-sm" value="Insert">
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Form Dialogue Box -->
<div id="user_dialog">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label>Enter First Name</label>
<input type="text" name="first_name" id="first_name" class="form-control input-sm">
<span id="error_first_name" class="text-danger"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label>Enter Last Name</label>
<input type="text" name="last_name" id="last_name" class="form-control input-sm">
<span id="error_last_name" class="text-danger"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<input type="hidden" name="row_id" id="hidden_row_id">
<button type="button" name="save" id="save" class="btn btn-info btn-sm">Save</button>
</div>
</div>
</div>
</div>
<!-- Alert Box -->
<div id="action_alert" title="Action"></div>
<script>
$(document).ready(function(){
var count = 0;
$('#user_dialog').dialog({
autoOpen:false,
width:800
});
$('#add').click(function(){
$('#user_dialog').dialog('option', 'title', 'Add Data');
$('#first_name').val('');
$('#last_name').val('');
$('#error_first_name').text('');
$('#error_last_name').text('');
$('#first_name').css('border-color', '');
$('#last_name').css('border-color', '');
$('#save').text('Save');
$('#user_dialog').dialog('open');
});
$('#save').click(function(){
var error_first_name = '';
var error_last_name = '';
var first_name = '';
var last_name = '';
if($('#first_name').val() == '') {
error_first_name = 'First Name is required';
$('#error_first_name').text(error_first_name);
$('#first_name').css('border-color', '#cc0000');
first_name = '';
} else {
error_first_name = '';
$('#error_first_name').text(error_first_name);
$('#first_name').css('border-color', '');
first_name = $('#first_name').val();
}
if($('#last_name').val() == '') {
error_last_name = 'Last Name is required';
$('#error_last_name').text(error_last_name);
$('#last_name').css('border-color', '#cc0000');
last_name = '';
} else {
error_last_name = '';
$('#error_last_name').text(error_last_name);
$('#last_name').css('border-color', '');
last_name = $('#last_name').val();
}
if(error_first_name != '' || error_last_name != '') {
return false;
} else {
if($('#save').text() == 'Save')
{
count++;
output = '<tr id="row_'+count+'">';
output += '<td>'+first_name+' <input type="hidden" name="hidden_first_name[]" id="first_name'+count+'" class="first_name" value="'+first_name+'" /></td>';
output += '<td>'+last_name+' <input type="hidden" name="hidden_last_name[]" id="last_name'+count+'" value="'+last_name+'" /></td>';
output += '<td><button type="button" name="view_details" class="btn btn-warning btn-xs view_details" id="'+count+'">View</button></td>';
output += '<td><button type="button" name="remove_details" class="btn btn-danger btn-xs remove_details" id="'+count+'">Remove</button></td>';
output += '</tr>';
$('#user_data').append(output);
}
else
{
var row_id = $('#hidden_row_id').val();
output = '<td>'+first_name+' <input type="hidden" name="hidden_first_name[]" id="first_name'+row_id+'" class="first_name" value="'+first_name+'" /></td>';
output += '<td>'+last_name+' <input type="hidden" name="hidden_last_name[]" id="last_name'+row_id+'" value="'+last_name+'" /></td>';
output += '<td><button type="button" name="view_details" class="btn btn-warning btn-xs view_details" id="'+row_id+'">View</button></td>';
output += '<td><button type="button" name="remove_details" class="btn btn-danger btn-xs remove_details" id="'+row_id+'">Remove</button></td>';
$('#row_'+row_id+'').html(output);
}
$('#user_dialog').dialog('close');
}
});
$(document).on('click', '.view_details', function(){
var row_id = $(this).attr("id");
var first_name = $('#first_name'+row_id+'').val();
var last_name = $('#last_name'+row_id+'').val();
$('#first_name').val(first_name);
$('#last_name').val(last_name);
$('#save').text('Edit');
$('#hidden_row_id').val(row_id);
$('#user_dialog').dialog('option', 'title', 'Edit Data');
$('#user_dialog').dialog('open');
});
$(document).on('click', '.remove_details', function(){
var row_id = $(this).attr("id");
if(confirm("Are you sure you want to remove this row data?")) {
$('#row_'+row_id+'').remove();
} else {
return false;
}
});
$('#action_alert').dialog({
autoOpen:false
});
$('#user_form').on('submit', function(event){
event.preventDefault();
var count_data = 0;
$('.first_name').each(function(){
count_data = count_data + 1;
});
if(count_data > 0)
{
var form_data = $(this).serialize();
$.ajax({
url:"pages/insert.php",
method:"POST",
data:form_data,
success:function(data)
{
$('#user_data').find("tr:gt(0)").remove();
count =0;
$('#action_alert').html('<p>Data Inserted Successfully</p>');
$('#action_alert').dialog('open');
}
})
}
else
{
$('#action_alert').html('<p>Please Add atleast one data</p>');
$('#action_alert').dialog('open');
}
});
});
</script>
and this is my insert.php code
<?php
//insert.php
$connect = new PDO("mysql:host=localhost;dbname=test", "root", "****");
$query = "
INSERT INTO tbl_sample
(first_name, last_name)
VALUES (:first_name, :last_name)
";
for($count = 0; $count<count($_POST['hidden_first_name']); $count++)
{
$data = array(
':first_name' => $_POST['hidden_first_name'][$count],
':last_name' => $_POST['hidden_last_name'][$count]
);
$statement = $connect->prepare($query);
$statement->execute($data);
}
?>
Kindly help me how I can reset the counter to 0 after Ajax refresh. Thanks.
Advertisement
Answer
put the var count ouside the $(document)
var count = 0;
$(document).ready(function(){
and in your submit function
$('#user_form').on('submit', function(event){
event.preventDefault();
var count_data = 0;
$('.first_name').each(function(){
count_data = count_data + 1;
});
if(count_data > 0)
{
var form_data = $(this).serialize();
$.ajax({
url:"pages/insert.php",
method:"POST",
data:form_data,
success:function(data)
{
$('#user_data').find("tr:gt(0)").remove();
$('#action_alert').html('<p>Data Inserted Successfully</p>');
$('#action_alert').dialog('open');
}
count =0;
})
}
else
{
$('#action_alert').html('<p>Please Add atleast one data</p>');
$('#action_alert').dialog('open');
}
});
and in additional, you should be using .prop instead of .attr