I am trying to submit a form using jquery. I am running a Django server.
The JS Code and HTML are as follows:
document.addEventListener('DOMContentLoaded', function() {
// Submit comment form
document.querySelector('#comment-form').addEventListener("submit", function(event){event.preventDefault()});
document.querySelector('#comment-form').addEventListener('submit', () => save_comment());
});
function save_comment() {
console.log('Save function triggered');
frm = document.querySelector('#comment-form');
data_submit = {
updated_comment: frm.querySelector('#comment-editbox').value,
month: frm.querySelector('#comment-mth').value,
gl_code: frm.querySelector('#comment-gl').value,
csrfmiddlewaretoken: jQuery("[name=csrfmiddlewaretoken]").val(),
};
console.log('Save function triggered 2');
frm.submit(function (e) {
console.log('Submit triggered');
e.preventDefault();
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: data_submit,
success: function (data) {
console.log("successful");
},
error: function(data) {
console.log("failed");
}
});
console.log('save ended');
return false;
});
}
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<label id="comment-heading">Comments <span id="comment-subheading"></span></label>
<form action="{% url 'comment' %}" method="post" id='comment-form'>
{% csrf_token %}
<textarea id="comment-editbox" name="comment-editbox"></textarea><br>
<input type="hidden" id="comment-mth" name="comment-mth" value="">
<input type="hidden" id="comment-gl" name="comment-gl" value="">
<input class="btn btn-primary" type="submit" value="Save" id='comment-save'>
</form>
</div>
</div>
"Save function triggered" and "Save function triggered 2" get logged onto the console when I submit the form. But "Submit triggered" does not.
The form does get submitted to the server which returns a json response and causes the form to navigate to the response route. I do not want the form to redirect to the response route or reload the page.
What am I doing wrong?
Why are you using?
frm.submit(function (e) {
...
});
You are calling submit method on the DOM and passing in a function to it. There is no function with submit(); Those two lines should be removed.
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#comment-form').addEventListener('submit', save_comment);
});
function save_comment(e) {
e.preventDefault();
console.log('Save function triggered');
const frm = document.querySelector('#comment-form');
const data_submit = {
updated_comment: frm.querySelector('#comment-editbox').value,
month: frm.querySelector('#comment-mth').value,
gl_code: frm.querySelector('#comment-gl').value,
csrfmiddlewaretoken: jQuery("[name=csrfmiddlewaretoken]").val(),
};
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: data_submit,
success: function(data) {
console.log("successful");
},
error: function(data) {
console.log("failed");
}
});
console.log('save ended');
}
Related
I have a form on click of submit the input box is highlighted with the red color border if it is empty. Now i have jquery ajax form submission on success of the form i will display a message "data submitted" and i will reset the form so all the input fields will be highlighted in red color. Now i want to empty the fields after the success of form submission and it should not be highlighted in red color.
HTML
(function() {
'use strict';
window.addEventListener('load', function() {
var form = document.getElementById('index-validation');
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
})();
$(".index-form").submit(function(e) {
e.preventDefault();
return false;
}
else {
var ins_date = new Date($.now()).toLocaleString();
var parms = {
name: $("#name").val(),
email: $("#email").val(),
inserted_date: ins_date
};
var url2 = "http://localhost:3000/api";
$.ajax({
method: 'POST',
url: url2 + "/homes",
async: false,
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(parms),
success: function(data) {
console.log('Submission was successful.');
$(".alert-success").removeClass("d-none");
$(".alert-success").fadeTo(2000, 500).slideUp(500, function() {
$(".alert-success").slideUp(500);
});
$('.index-form')[0].reset();
console.log(data);
},
error: function(data) {
console.log('An error occurred.');
console.log(data);
},
})
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="container index-form" id="index-validation" novalidate>
<input class="form-control" type="text" id="name" name="name" placeholder="Your name" required>
<input class="form-control" type="email" id="email" name="email" placeholder="Email Address" required>
<div class="invalid-feedback">Please Enter a Valid Email Id.</div>
<input type="submit" id="submit" class="btn btn-default btn-lg btn-block text-center" value="Send">
</form>
I'm not clear with your question, Do you want to reset form or remove the error class. But anyways I'll try solving out both :
SCRIPT
<script type="text/javascript">
(function() {
'use strict';
window.addEventListener('load', function() {
var form = document.getElementById('index-validation');
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
})();
$(".index-form").submit(function(e) {
e.preventDefault();
return false;
} else {
var ins_date=new Date($.now()).toLocaleString();
var parms = {
name : $("#name").val(),
email : $("#email").val(),
inserted_date:ins_date
};
var url2="http://localhost:3000/api";
$.ajax({
method: 'POST',
url: url2 + "/homes",
async: false,
dataType : "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(parms),
success: function(data){
console.log('Submission was successful.');
//if you are removing specific property from class
$(".alert-success").css('display', 'none');
$(".alert-success").fadeTo(2000, 500).slideUp(500, function(){
$(".alert-success").slideUp(500);
});
$("form")[0].reset();
console.log(data);
}, error: function (data) {
console.log('An error occurred.');
console.log(data);
},
})
}
});
</script>
Jquery doesn't support any method such as reset() of javascript, So you can trigger javascript's reset() method.
Feel free to ask doubts if stuck. Happy coding....!!!!!
$(this.('.index-form').find("input[type=text]").val("");
You can just empty the form value by giving the .val() as empty, you have to give this on after your ajax response.
and also instead of using fade in and fade out just try to use hide and show function both may work like same.
I have a form in modal as follows:
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Modal Header</h4>
</div>
<form id="Myform" action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="button" onclick="submitform()" value="Submit">
</form>
</div>
</div>
</div>
Javascript
function submitform() {
//try
//event.stopImmediatePropagation();
//event.stopPropagation();
//check validate is valid
if (formValid) {
$("#Myform").trigger("submit");
}
}
$("#Myform").submit(function (e) {
e.preventDefault();
// e.stopImmediatePropagation();
$.ajax({
type: this.method,
cache: false,
url: this.action,
enctype: 'multipart/form-data',
data: new FormData(this),
processData: false,
contentType: false,
success: function (data) {
$('#create-media').modal('toggle');
}
},
error: function (error) {
console.log(error);
}
});
});
Currently, when the user click on the submit button, the data will be sent to the server to process, during the time waiting for the results returned, the modal has not been closed, the user can click to submit more times. I do not want this to happen.
I want to prevent users submitting continuously, do not allow users to click on the second submit button, the user must wait for the results returned, if successful, the modal will be closed.
I was thinking of disabling the submit button, but that's not safe, because the user can enable that button because of javascript on the user machine.
I tried using event.stoppropagation () and event.stopimmediatepropagation () but it did not work.
Am I doing something wrong? How do I prevent users from submitting continuously?
Thanks AlL
Follwing CertainPerformance idea, I would suggest you use a variable. However, instead of placing the variable at the beginning of the code, I would suggest to use the beforeSend callback provided by Ajax, it will be called right before sending the request.
var isBusy = false;
$("#Myform").submit(function (e) {
e.preventDefault();
if(isBusy) {
return;
}
$.ajax({
type: this.method,
cache: false,
url: this.action,
enctype: 'multipart/form-data',
data: new FormData(this),
processData: false,
contentType: false,
beforeSend: function(xhr) {
isBusy = true;
},
success: function (data) {
$('#create-media').modal('toggle');
isBusy = false;
},
error: function (error) {
console.log(error);
isBusy = false;
}
});
});
You can learn more about the beforeSend callback here
P.S. You could also use the $.ajax.active variable, which returns the amount of active ajax request, this might be a more elegent method.
Give your submitform function a persistent alreadySubmitted variable. Also, try attaching the button handler from Javascript instead of HTML, and preventDefault:
const submitform = (() => {
let alreadySubmitted = false;
return (e) => {
e.preventDefault();
if (alreadySubmitted) return;
alreadySubmitted = true;
if (formValid) {
$("#Myform").trigger("submit");
}
}
})();
document.querySelector('#Myform input[type="button"]').addEventListener('click', submitForm);
I have the following form:
<form class="footer-newsletter-form" id="footer-newsletter" method="post" action="http://xxxxxx.us1.list-manage.com/subscribe/post-json?u=xxxxxxxxxxxxxxxxxxxxxxxxx&id=xxxxxxxxxx&c=?">
<input id="email" name="EMAIL" type="email" class="input-text required-entry validate-email footer__newsletter-field" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}" aria-label="{{ 'general.newsletter_form.newsletter_email' | t }}">
<button type="submit" title="Subscribe" class="button button1 hover-white footer__newsletter-button">SUBSCRIBE</button>
<div id="subscribe-result"></div>
</form>
And the following jquery bit:
<script type="text/javascript">
$(document).ready(function () {
function register($form) {
jQuery.ajax({
type: "GET",
url: $form.attr('action'),
data: $form.serialize(),
cache : false,
dataType : 'jsonp',
contentType: "application/json; charset=utf-8",
error : function(err) { console.log('error') },
success : function(data) {
if (data.result != "success") {
console.log('success');
} else {
console.log('not success');
//formSuccess();
}
}
});
}
jQuery(document).on('submit', '.footer-newsletter-form', function(event) {
try {
var $form = jQuery(this);
event.preventDefault();
register($form);
} catch(error){}
});
});
</script>
Which submits correctly. However, when I press the submit button what I expect to happen is that the page does not refresh and when I check the browser console I'll either see "success" or "not success". Instead what happens is I'm sent to a page that displays the following JSON message: ?({"result":"success","msg":"Almost finished... We need to confirm your email address. To complete the subscription process, please click the link in the email we just sent you."}).
So how do I take that success message (or error if there's an error) and have the page not only remain as is, but also capture the success message so I can display a "Success" alert? The success alert I know how to do. I just need help having the browser remain where it is and tell the difference between success and error.
P.S. I'm not sure if this is relevant but the platform is Shopify. I don't think Shopify does anything to prevent the submission from going through as it should or the response coming back so I don't think it is relevant.
The whole issue was the $(document).ready(function () {}); part. For some reason unbeknownst to me that causes the event.preventDefault(); method from running and the form submits regularly. If you remove the $(document).ready(function () {}); part it'll work as intended.
My final code for anyone looking in the future:
Form:
<form class="footer-newsletter-form" method="POST" id="footer-newsletter" action="https://xxxxxxxxxxxxx.us1.list-manage.com/subscribe/post-json?c=?">
<input type="hidden" name="u" value="xxxxxxxxxxxxxxxxxxxxxxxxxxx">
<input type="hidden" name="id" value="xxxxxxxxxx">
<input id="email" name="EMAIL" type="email" class="input-text required-entry validate-email footer__newsletter-field">
<button type="submit" title="Subscribe" class="button button1 hover-white footer__newsletter-button">SUBSCRIBE</button>
<div id="subscribe-result"></div>
</form>
And the JS:
<script>
function register($form) {
$.ajax({
type: "GET",
url: $form.attr('action'),
data: $form.serialize(),
cache: false,
dataType: 'json',
contentType: "application/json; charset=utf-8",
error: function (err) {
console.log('error')
},
success: function (data) {
if (data.result != "success") {
console.log('Error: ' + data.msg);
} else {
console.log("Success");
$($form).find("div#subscribe-result").html("<p class='success-message'>Almost finished... We need to confirm your email address. To complete the subscription process, please click the link in the email we just sent you!</p>");
setTimeout(function() { $($form).find("div#subscribe-result").hide(); }, 7000);
}
}
});
}
$(document).on('submit', '#footer-newsletter', function (event) {
try {
var $form = jQuery(this);
event.preventDefault();
register($form);
} catch (error) {}
});
</script>
I have a form which should submit data after pressing the submit button. After tagging a few input fields as required the form always shows me when there is no input in the required field after pressing the submit button - so far, so good.
What I would like to realize is that there is a redirection to another page if the submission was successful. If there are some empty required fields the form should show me, without redirecting me to another page.
By now I have the following code:
Submit button:
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" name="submityes" id="submityes" class="btn btn-danger">Submit</button>
</div>
</div>
Also I have the following js function to submit the form and to redirect me to another page:
$('document').ready(function () {
"use strict";
$(function () {
$('#submityes').click(function () {
$.ajax({
type: "POST",
/* url: "process.php", //process to mail
data: $('form.contact').serialize(), */
success: function (msg) {
window.location.replace("/submit_resolved.php");
},
error: function () {
alert("error");
}
});
});
});
});
The problem I have right now is that I will always be redirected to the "submit_resolved.php" page, whether all required fields are complete or not.
How can I solve this problem? I only want to be redirected when all required fields are not empty.
You should bind to the submit event, not click event:
UPDATED TO MATCH THE COMMENTS
$(function () {
var submityesClicked;
//catch the click to buttons
$('#submityes').click(function () {
submityesClicked = true;
});
$('#submitno').click(function () {
submityesClicked = false;
});
$('#webform').submit(function (e) {
e.preventDefault();//prevent the default action
$.ajax({
type: "POST",
/*url: "process.php", //process to mail
data: $('form.contact').serialize(),*/
success: function (msg) {
window.location.replace(submityesClicked ? "/submit_resolved_yes.php" : "/submit_resolved_no.php");
},
error: function () {
alert("error");
}
});
});
});
The submit event is triggered only if the form is valid.
Note that the submit event is triggered by the form but the click event is triggered by the input element.
Do redirection on complete. Not on success
$('document').ready(function () {
"use strict";
$(function () {
$('#submityes').click(function () {
$.ajax({
type: "POST",
/* url: "process.php", //process to mail
data: $('form.contact').serialize(), */
success: function (msg) {
//window.location.replace("/submit_resolved.php");
},
complete: function () {
window.location.replace("/submit_resolved.php");
},
error: function () {
alert("error");
}
});
});
});
});
I assume you are validating form in process.php so, you have to return error if validation fail from process.php like this.
header('HTTP/1.1 500 Internal Server Booboo');
header('Content-Type: application/json; charset=UTF-8');
die(json_encode(array('message' => 'ERROR', 'code' => 1337)));
check this link: Return errors from PHP run via. AJAX?
Hope this may be helpful to you.
The simplest thing you can do is to add "required" attribute to you input elements.Example:
<form action="/action_page.php">
Username: <input type="text" name="usrname" required>
<input type="submit">
</form>
It's a HTML5 attribute, so no JavaScript required. And it is supported by all major browsers. Check this link:
http://caniuse.com/#search=required
Anyway, you shouldn't rely just on front-end verification. Check those inputs on back-end, too.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<form action="">
Username: <input type="text" id="usrname" required>
<button type="button" name="submityes"
id="submityes" class="btn btn-danger">Submit</button>
</form>
</div>
function isValid(){
var usrname = $("#usrname").val();
if(usrname == ""){
return false;
}
return true;
}
$(function () {
$('#submityes').submit(function () {
if(isValid() == true){
$.ajax({
type: "POST",
/*url: "process.php", //process to mail
data: $('form.contact').serialize(),*/
success: function (msg) {
alert("success");
window.location.replace("/submit_resolved.php");
},
});
}else{
alert("error");
}
});
});
How to show loading.gif while uploading a file using jQuery?
<input type="file" class="form-control" name="profilepic" id="profilepic" accept="image/*" required >
<div id="loader_img"></div>
<button type="submit" name="submit" id="submit" class="btn btn-primary"><span class="glyphicon glyphicon-check"></span> Save</button>
When I click on the save button, loading.gif has to be shown while loading a file.
This is my jQuery:
<script>
$(function() {
$('form[name="chngimg"]').find('input,select,textarea').not('[type=submit]').jqBootstrapValidation({
submitSuccess: function ($form, event) {
$.ajax({
type: "POST",
url: "propicchng.php",
data: $('form').serialize(),
success: function(msg){
$('#loader_img').show();
// just to confirm ajax submission
$("#imgchng").modal('hide');
alert(msg);
$( '#chngimg-form' ).each(function(){
this.reset();
});},
error: function(){
alert("failure");
}
});
event.preventDefault();
}
});
});
</script>
What #Mehran Torki is saying is that you need to first put the loader to show before the request - and then hide it in success callback. This is how your code should look like to show the loader - mind the comments!
$(function() {
$('form[name="chngimg"]').find('input,select,textarea').not('[type=submit]').jqBootstrapValidation({
submitSuccess: function ($form, event) {
//here - showing loader to the user
$('#loader_img').show();
$.ajax({
type: "POST",
url: "propicchng.php",
data: $('form').serialize(),
success: function(msg){
//here - hiding when request is done
$('#loader_img').hide();
// just to confirm ajax submission
$("#imgchng").modal('hide');
alert(msg);
$( '#chngimg-form' ).each(function(){
this.reset();
});},
error: function(){
alert("failure");
}
});
event.preventDefault();
}
});
});