What i am trying to accomplish is to check weather a coupon code is applied on my application, and submit the form to apply the coupon if it has not been applied yet. However the console log continues to report null and not submit the form.
if(document.getElementById("#vapsummarycolcoupon").innerHTML== null) {
$( "#activatecoupon" ).submit();
} else {
return null;
}
}
When the form is submitted, the page will reload and have a new element with id="vapsummarycolcoupon" so to break from the page constantly submitting I have tried to check if the innerHTML != "$ 5.00" as well as == "undefined" and == null but with no luck. Something must be wrong, or there is a better way to accomplish this task. Thank you in advance.
By reversing the if statement, i was actually able to resolve the issue as well as check the length instead. Thanks for trying people, down voting cause you couldnt resolve the issue is sad.
$( window ).load(function() {
if($("#vapsummarycolcoupon").length > 0 ) {
return null;
} else{
$( "#activatecoupon" ).submit();
}
});
Try:
if($("#vapsummarycolcoupon").innerHTML== null) {
$( "#activatecoupon" ).submit();
} else {
return null;
}
Try this,
if (typeof(Storage) !== "undefined")
{
alert("Browser doesn't support Storage");
}
else
{
var X = document.getElementById("#vapsummarycolcoupon").innerHTML;
if(X == "")
{
if(sessionStorage.getItem("submit") != true)
{
sessionStorage.setItem("submit", true);
$( "#activatecoupon" ).submit();
}
else
{
console.log("Already Submitted");
}
}
else
{
return null;
}
}
Related
I am working on javascript conditions.
If the field is empty I open an alert, else the function gets executed.
But I am trying to add another condition -- to verify the class of the field. If it is not in the page, or if it's empty, then directly execute the function/show an error.
How can I check with javascript if the class is in the page and if it's filled ?
$("#bouton").on("click", function(){
var warnning_message = 'warning message';
if(!$('.the-class').val()) {
alert(warnning_message);
}
else{
console.log('ok');
}
Seems hasclass will be useful
if($('.the-class').val()==='' && $('.the-class').hasClass('className')) {
alert(warnning_message);
}
You can check the existence of the class with $(".the-class").length > 0 code:
$("#botton").on( "click", function() {
var warnning_message = 'warning message';
if( $(".the-class").length > 0) {
alert(warnning_message);
}
else {
console.log('ok');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="botton" class="the-class">Click Here</div>
If you want to check whether an element with specific class exists or not use the following:
if ($(".the-class").length>0){
alert('Exists');
}
You could put ID to the field in order to select it and then do something like this:
if($( "#mydiv" ).hasClass( "the-class ))
console.log('has class');
else
console.log('no class');
Check the length of the array
if( $('.the-class').length == 0) {
alert(warnning_message);
}
else if (!$('.the-class').val()){
alert(warnning_message);
}
I have the following code and the callback doesn't seem to work properly. My understanding is that if the username is undefined or blank then the #username-error div should show and the error class should be added to the get added to the username input. Only once all of that is done should the alert get fired. However, when I look in my browser, the error div does not show, and the alert gets triggered. So clearly the class 'error' is getting added, and therefore it's reasonable to suggest that the #username-error div is having the .show() function called upon it but it sure does't look like it. Any help you can give me getting the alert to fire only once the #username-error div has appeared would be greatly appreciated.
<script type="text/javascript">
$(document).ready(function() {
$("input[name='username']").bind("blur", function() {
validateUsername(myFunction);
});
$("input[type='submit']").bind("click", function() {
validateUsername(myFunction);
});
$("#username-error").hide();
$("#username-success").hide();
});
function myFunction() {
if ($(".error").length > 0) {
alert("errors on page");
return false;
}
}
function validateUsername(callback) {
var $username = $("input[name='username']");
if (typeof $username.val() === "undefined" || $username.val() === "") {
$("#username-error").show();
$("#username-success").hide();
$username.addClass("error");
} else {
$("#username-error").hide();
$("#username-success").show();
$username.removeClass("error");
}
if (callback) {
callback();
}
}
</script>
You need to add a return the button click
$("input[type='submit']").bind("click", function() {
return validateUsername(myFunction);
});
and you should return true
function myFunction() {
if ($(".error").length > 0) {
alert("errors on page");
return false;
}
return true;
}
and add return in the validate method
function validateUsername(callback) {
var $username = $("input[name='username']");
if (typeof $username.val() === "undefined" || $username.val() === "") {
$("#username-error").show();
$("#username-success").hide();
$username.addClass("error");
} else {
$("#username-error").hide();
$("#username-success").show();
$username.removeClass("error");
}
if (callback) {
return callback();
}
}
but the use of the callback in this really does not make much sense.
This question has been done to death on SO and I'm really, really sorry! I've already taken the bones of the below idea from a couple of SO questions on the same theme.
All said though, I still can't get it to work as expected.
It works OK if NONE are filled in.
It works OK if the END input is filled in and not the others.
It works OK if the MIDDLE input is filled in.
If you fill in ONLY the FIRST input though, it alerts, but submits anyway?
JSFIDDLE
$(document).ready(function (e) {
// completed count submit handler
$("#submit_counts_button").on('click', function () {
window.incomplete = false;
$('input[type=number]').each(function () {
if ($(this).val().length == 0) {
window.incomplete = true;
alert('Some fields are empty');
return false;
} else {
if (window.incomplete === false) {
$("#submit_counts_button").prop('disabled', true);
$("#submit_counts_button").html('Please Wait ...');
//$("#update_form").submit();
}
}
});
});
});
I'm sure it's something totally embarrassingly obvious but after a 16 hour day, I just can't see it. Any help appreciated ...
You need to pull the 'incompletion' check outside of the .each
$(document).ready(function (e) {
// completed count submit handler
$("#submit_counts_button").on('click', function () {
window.incomplete = false;
$('input[type=number]').each(function () {
if ($(this).val().length == 0) {
window.incomplete = true;
alert('Some fields are empty');
return false;
}
});
if (window.incomplete === false) {
$("#submit_counts_button").prop('disabled', true);
$("#submit_counts_button").html('Please Wait ...');
//$("#update_form").submit();
}
});
});
http://jsfiddle.net/6WpeF/6/
try
if(document.getElementById('id of input').value != ""){}
I am validating a form that's working fine but i don't know why the form not submit after all validations.
Here is validation code:
$('#coupon_options').submit(function(e){
e.preventDefault();
var name = $('input[name="coupon_name"]'),
code = $('input[name="coupon_code"]'),
value = $('input[name="coupon_value"]'),
valid = $('input[name="coupon_valid"]'),
status = true;
if( $.trim(name.val()) == "" ){
name.css('border-color', '#ff0000');
status = false;
} else { name.removeAttr('style'); }
if( $.trim(code.val()) == "" ){
code.css('border-color', '#ff0000');
status = false;
} else { code.removeAttr('style'); }
if( $.trim(value.val()) == "" ){
value.css('border-color', '#ff0000');
status = false;
} else { value.removeAttr('style'); }
if( $.trim(valid.val()) == "" ){
valid.css('border-color', '#ff0000');
status = false;
} else { valid.removeAttr('style'); }
if( status == true ){ return status; }
else { return false; }
});
As i know to stop the refresh after submit event i have used the return false but i am not sure return true works here or not?
I don't want to use Ajax, just want to submit after validation.
Is there something wrong in this code??
remove:
e.preventDefault();
it stopping the default action to occur even you return true;.
For example:
Prevent a submit button from submitting a form
Prevent a link from following the URL
e.preventDefault(); is the issue, but you should note that it's never a good sign when you have multiple functions that basically perform the same action for different elements, you can simplify your code to this:
$('#coupon_options').submit(function(e){
var status = true;
$('input[name="coupon_name"],input[name="coupon_code"],input[name="coupon_value"],input[name="coupon_valid"]').each(function(){
if($.trim($(this).val()) == ""){
$(this).css('border-color', '#ff0000');
status = false;
} else {
$(this).removeAttr('style');
}
});
return status;
});
And you could even use $('input[name^="coupon_"]') to select all inputs that start with that prefix.
I am having a problem with a multi-page form submission. The problem is that the page is refreshing when I press the next page button. I believe it is a return true/false problem, but I don't know where the issue is. Here is the code:
$(document).ready(function () {
var info = [];
function showinfo() {
for (i=0; i<info.length; i++) {
$('#step3 ul').append(
$('<li>' + info[i] + '</li>')
);
};
};
$('#step1_btn').click(function() {
$("input").each(function() {
if (input.type != radio) {
info.push(this.name+':'+this.value);
} else if ($('.radio').is(':checked')) {
info.push(this.name+':'+this.value);
}
});
$('#step1').css('display','none');
$('#step2').css('display','inherit');
$('#progbar').attr('value',33);
return false;
});
$('#step2_btn').click(function() {
$("input").each(function() {
if (input.type != radio) {
info.push(this.name+':'+this.value);
} else if ($('.radio').is(':checked')) {
info.push(this.name+':'+this.value);
}
});
$('#step2').css('display','none');
$('#step3').css('display','inherit');
$('#progbar').attr('value',66);
showinfo();
return false;
});
});
Not sure if that is all you need to see. If you need to see the html as well, I can provide that. Thanks in advance for any help you all can give. I can read javascript fairly well when someone else writes it, but for some reason writing it myself ends up in catastrophe every time.
try event.preventDefault():
$('#step1_btn').click(function(e) {
e.preventDefault();
// your code here
return false;
});