Am tying to update the users status on the database and if it is successful, the ajax function will display another a thankYou modal, else it should display error message. here is my code;
matchdata.php
#This a sample data that is in the db
#$matchedby = "31";
#$matchID_Fname = "Nwabia";
#$matchID_Lname = "Chidozie";
#$dob = "1998-01-10";
$matchedby = $_POST['matchID_UsersID'];
$matchID_Fname = $_POST['matchID_Fname'];
$matchID_Lname = $_POST['matchID_Lname'];
$dob = $_POST['id_dob'];
//$output = "0";
//Selecting the data
$match = $conn->query("SELECT * FROM img_upload WHERE uploadedBy='".$matchedby."' AND uploadstatus='1' ");
if($match->num_rows > 0){
#fatch data
$result = $match->fetch_assoc();
$rdob = $result['idDOB'];
$rfn = $result['idFname'];
$rln = $result['idLname'];
#check data submitted against db
if($matchID_Fname == $rfn && $matchID_Lname == $rln && $dob == $rdob){
#update users status
$updateStatus = $conn->query("UPDATE users SET users_status='5' WHERE users_id='".$matchedby."' ");
$output = "done";
}
else
{
# code...
$output = "Data do not match ID";
}
}else {
# code...
$output = "Unable to match data, login and try again";
}
echo $output;
this is where the call takes place index.php
function submitMatch(){
var matchID_UsersID = document.getElementById('matchID_UsersID').value;
var matchID_Fname = document.getElementById('matchID_Fname').value;
var matchID_Lname = document.getElementById('matchID_Lname').value;
var id_dob = document.getElementById('id_dob').value;
//check submited inputes
if(matchID_Fname.trim() == ''){ document.getElementById('fname_error').innerHTML = "required"; }
else if(matchID_Lname.trim() == '') { document.getElementById('lname_error').innerHTML = "required"; }
else if (id_dob =='') { document.getElementById('dob_error').innerHTML = "required";
}
else{
//Submit data to databese using Ajax
$.ajax({
type:'POST',
url:'matchdata.php',
data:'submitData=1&matchID_UsersID='+matchID_UsersID+'&matchID_Fname='+matchID_Fname+'&matchID_Lname='+matchID_Lname+'&id_dob='+id_dob,
beforeSend: function () {
$('#matchID_btn').attr("disabled","disabled");
$('.modal-body').css('opacity', '.5');
},
success:function(msg){
if(msg == "done"){
$('#matchdata').modal('hide');
$('#idVerifyThankYou').modal('show');
}else{
$('.msg').html(msg);
}
$('#matchID_btn').removeAttr("disabled");
$('.modal-body').css('opacity', '1');
}
});
}
}<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<i class='fa fa-info-circle'></i><span class="btn btn-primary" data-toggle='modal' data-target='#matchdata'>Match Data</span>
<!-- ******************* -->
<!--// Match User Data //-->
<!-- ******************* -->
<div class="modal fade" id="matchdata" role="dialog" >
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content" style="width: 60%; margin: auto">
<div class="modal-header" >
<h5 class="modal-title">Match Data</h5>
</div>
<div class="modal-body" role="document">
<div class="col-md-12 bg-primary mb-20">
<span><i class="fa fa-info-circle"></i>Match your data with that of uploaded ID.</span>
</div>
<span class="msg text-danger text-center"></span>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<input type="hidden" id="matchID_UsersID" name="matchID_UsersID" value="<?php echo $aUsersID; ?>" />
<span id="fname_error"></span>
<input type="text" placeholder="Enter first name" id="matchID_Fname" class="form-control" value="" name="matchID_Fname" />
</div>
<div class="col-md-6">
<span id="lname_error"></span>
<input type="text" placeholder="Enter last name" id="matchID_Lname" class="form-control" value="" name="matchID_Lname" />
</div>
</div>
</div>
<div class="form-group">
<!--<input type="text" id="id_dob" class="form-control" value="" name="id_dob" />-->
<span id="dob_error"></span>
<input type="date" placeholder="eg: YYYY-MM-DD" id="id_dob" class="form-control" value="" name="id_dob" />
</div>
<div class="form-group text-center">
<input type="button" id="matchID_btn" onclick="submitMatch()" class="btn btn-primary" value="Match Data" />
</div>
</div>
</div>
</div>
</div>
<!-- Modal Identity Verification Thank you box -->
<div class="modal fade" id="idVerifyThankYou" role="dialog" >
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content" style="width: 60%; margin: auto">
<div class="modal-header" >
<h5 class="modal-title">Success</h5>
</div>
<div class="modal-body text-center" role="document">
<img src="../img/done.png" alt="done image">
<div class="statusMsg col-md-12"></div>
<div class="col-md-12 pt-10">
<p>Your ID has been recieved, pending approval.</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>if the right data is enter it updates the users database, dose not display the modal thank you modal box.
