How to update data using modal with ajax, php and mysql? - php

Question

I want to update data using modal with ajax in PHP. I am beginer, plz tell me where is my mistake .
HTML Code
<button type="submit" class="btn btn-success" data-toggle="modal" data-cphone='.$row['country_phon'].' data-cname='.$row['country_name'].' >Update</button>';
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Update Country</h4>
</div>
<form action="" method="post">
<div class="modal-body">
<input type="text" id="cn" name="pcountry">
</div>
<div class="modal-body">
<input type="text" id="cph" name="pphone">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary updt" name="updatecountry" >Save</button>
JS Code: Here when I click on Button, modal appears with the values fetched from database with the help of jquery.
<script>
$(document).ready(function(){
$(".btn").click(function(){
var cphone =$(this).data('cphone');
var cname = $(this).data('cname');
$("#cph").val(cphone);
$("#cn").val(cname);
$("#myModal").modal('show');
});
});</script>
JS code : This is ajax code . I want to update the text of textbox.
<script>
$(".updt").click(function(e){
e.preventDefault();
var cnt = $("#myModal").find("input[name='pcountry']").val();
var cp = $("#myModal").find("input[name='pphone']").val();
$.ajax({
dataType: 'json',
type:'POST',
url: 'test.php',
data:{pcountry:cnt, pphone:cp},
})
)};
</script></div>
PHP Code :
<?php
if(isset($_POST['updatecountry']))
{$country1 = $_POST['pcountry'];
$phone1 = $_POST['pphone'];
echo $country1;
echo $phone1;
echo "Updated Successfully";
mysqli_query($conn,"update country set country_name='$country1' , country_phon='$phone1' where country_id=18");
mysqli_close($conn);
}?>

Answer 1

On view btn class use for update and save. I suggest you please use different class name or id.
<button type="submit" class="form_update btn btn-success" data-toggle="modal" data-cphone='.$row['country_phon'].' data-cname='.$row['country_name'].' >Update</button>';
JS changes
<script>
$(document).ready(function(){
$(".form_update").click(function(){
var cphone = $(this).attr("data-phone");
var cname = $(this).attr("data-cname");
$("#cph").val(cphone);
$("#cn").val(cname);
$("#myModal").modal('show');
});
});
</script>
Hope this code is workinf fine.