JAVASCRIPT
submit form using ajax
// add jquery
// <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
$(document).ready(function() {
$("#form").on('submit', (function(e) {
e.preventDefault();
$.ajax({
url: $(this).attr('action'),
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function(response) {
$("#form").trigger("reset"); // to reset form input fields
},
error: function(e) {
console.log(e);
}
});
}));
});
Ajax Form All Data Send
$('#submit').on('click', function() {
$.ajax({
url: "controller/php/add_project.php",
type: "POST",
data: new FormData(document.getElementById("add_project_form")),
contentType: false,
processData:false,
cache: false,
success: function(dataResult){
console.log(dataResult);
var dataResult = JSON.parse(dataResult);
},
error:function(dataResult){
console.log(dataResult);
alert('error / Add Project Again');
}
});
});
ajax call with form data
$.ajax({
url: "jobs/php/job_single.php?type=500",
type: "POST",
data: new FormData(document.getElementById("form")),
contentType: false,
processData:false,
cache: false,
success: function(dataResult){
console.log(dataResult);
if(dataResult == 999){
alert("Incomplete Information Provided");
}
else{
if(dataResult == 1){
alert("Job Application successful");
location.reload();
}
else if(dataResult == 0){
alert("Error applying for job, Please try again");
}
}
}
});
how to submit form using ajax
// First add jquery
// <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
$(document).ready(function() {
$("#myForm").on('submit', (function(e) {
e.preventDefault();
$.ajax({
url: $(this).attr('action'),
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function(response) {
$("#myForm").trigger("reset"); // this line is to reset form input fields
alert('submitted');
},
error: function(e) {
alert('Failed to sumit');
}
});
}));
});
//don't forget to add csrf token
ajax submit form data
<form id="contactForm1" action="/your_url" method="post">
<!-- Form input fields here (do not forget your name attributes). -->
</form>
<script type="text/javascript">
var frm = $('#contactForm1');
frm.submit(function (e) {
e.preventDefault();
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
console.log('Submission was successful.');
console.log(data);
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
},
});
});
</script>
jquery form submit ajax
$(document).on('click', '#save_province', function () {
var a = $("#province").val(), b = $("#district").val(), c = getParameterByName('supplier_id');
$.ajax({
url: "postavshik_save.php",
type: "POST",
data: {
province: a,
district: b,
supplier_id: c,
},
beforeSend: function () {
$("#province").attr("disabled", !0), $("#district").attr("disabled", !0);
},
success: function (a) {
alert("Post so`rov yuborildi javob olindi");
}
});
});
jquery ajax form submit example
$.ajax({
type: "POST",
url: "upload.php",
data: { name:name, mobile:mobile, address:address, city:city },
dataType: "json",
success: function(result){
}
});
submit form with ajax
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// отслеживаем событие отправки формы
$('#id_username').keyup(function () {
// создаем AJAX-вызов
$.ajax({
data: $(this).serialize(), // получаяем данные формы
url: "{% url 'validate_username' %}",
// если успешно, то
success: function (response) {
if (response.is_taken == true) {
$('#id_username').removeClass('is-valid').addClass('is-invalid');
$('#id_username').after('<div class="invalid-feedback d-block" id="usernameError">This username is not available!</div>')
}
else {
$('#id_username').removeClass('is-invalid').addClass('is-valid');
$('#usernameError').remove();
}
},
// если ошибка, то
error: function (response) {
// предупредим об ошибке
console.log(response.responseJSON.errors)
}
});
return false;
});
})
</script>
Send forms with ajax
$(document).ready(function() {
function SendFormWithAjax(id) {
$.ajax({
type: $(id).attr('method'),
url: $(id).attr('action'),
data: $(id).serialize(),
success: function(data) {
switch (data) {
case 'success':
$(id).trigger("reset"); //Reset form
swal("Success",
"Nice",
"success");
break;
case 'warning':
swal("Opps",
"Warning",
"warning");
break;
case 'error':
swal("Error",
"Error",
"error");
break;
}
}
});
}
$('#form_one_id').on('submit', function(ev) {
SendFormWithAjax(id);
ev.preventDefault();
});
$('#form_two_id').on('submit', function(ev) {
SendFormWithAjax(id);
ev.preventDefault();
});
});
submit form using ajax
$.post("test.php", $("#testform").serialize());
ajax form submit