This tutorial is posted for beginners as well as experienced developers. It will help you insert form data into the MySQL Database without page refresh.
<body>
<!– form start –>
<div class="card">
<div id="notification" style="padding:10px; color:white"></div><br/>
<div class="container" style="padding:20px">
<h3>Login Form</h3><br/>
<div class="form-group">
<label>Username</label>
<input type="text" id="username" class="form-control" />
<span id="msg1" style="color:red"></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="text" id="password" class="form-control" />
<span id="msg2" style="color:red"></span>
</div>
<button type="button" class="btn btn-success" id="submitbtn">Submit</button><br/><br/>
<div class="preview">
<img id="preview-selected-image" />
</div>
</div>
<br/>
</div>
<!– code for insert data –>
<script type="text/javascript">
$(document).ready(function(){
// alert('hi');
$(document).on('click','#submitbtn',function(){
var username = document.getElementById('username');
var password = document.getElementById('password');
$.ajax({
url:'submit.php',
method:'POST',
data:{Username: username, Password: password},
beforeSend:function(){
$('#submitbtn').html('Loading…');
$('#submitbtn').css('background', '#ccc');
$('#submitbtn').css('border', 'none');
$('#submitbtn').css('pointer-events', 'none');
},
success:function(data){
// alert('hi');
if(data == 504){
$('#notification').show();
}
else{
}
}
});
});
});
</script>
<!– code for fetch data –>
<script type=”text/javascript”>
$(document).ready(function(){
function ajaloadlogo(){
$.ajax({
url:'fetch_partner_logo.php',
type:'POST',
success:function(data){
$('#logo_load').html(data);
}
});
}
ajaloadlogo();
});
</script>
<tbody id="logo_load">
</tbody>
</body>
