
<form action="" class="contact_form" id="comment">
<center>
<div id="result">
</div>
</center>
<div class="form-group">
<label for="name">Name*
</label>
<input type="name" class="form-control" name="name" placeholder="Type Here">
</div>
<div class="form-group">
<label for="organization">Organization name
</label>
<input type="text" class="form-control" name="organization_name" placeholder="xyz">
</div>
<div class="form-group">
<label for="email">Email*
</label>
<input type="email" class="form-control" name="email" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="sel1">Service you provide
</label>
<select class="form-control" name="service_provider">
<option>Sell
</option>
<option>2
</option>
<option>3
</option>
<option>4
</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
<span class="label_span">I accept the terms and conditions. T&C
</span>
</label>
</div>
<button type="submit" class="btn btn-default btn_submit">Submit
</button>
</form>
After Html Part Just put ajax request
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
$(function(){
$("#comment").submit(function(){
dataString = $("#comment").serialize();
$.ajax({
type: "POST",
url: "db.php",
data: dataString,
success: function(data){
$("#result").html('Successfully updated record!');
$("#result").addClass("alert alert-success");
document.getElementById("comment").reset();
setTimeout(function() {
$('.alert-success').addClass('sss');},5000);
}
});
return false; //stop the actual form post !important!
});
});
</script>
<style media="screen">
.sss {
display: none;
}
</style>