JavaScript Echo Var Within Double Quote - javascript

Okay,
Another novice type question.
I have this array within the head section on my website and want to use it inline JavaScript:
var MyVariable = {"chkboxid":"chkbox"}
chkboxid is a id of a checkbox input.
Now, while validating the checkbox input on form submit, neither this works
$("form#myform").submit(function () {
if ($(MyVariable.chkboxid).is(":checked")) {
} else {
alert(CommentsPlus.nochkboxmsg);
return false;
}
Nor This (check the double quote at the variable)
$("form#myform").submit(function () {
if ($("MyVariable.chkboxid").is(":checked")) {
} else {
alert(CommentsPlus.nochkboxmsg);
return false;
}
However, if I hardcode the checkbox input id, it works. I mean "input#chkbox" in place of MyVariable.chkboxid.
$("form#myform").submit(function () {
if ($("input#chkbox").is(":checked")) {
} else {
alert(CommentsPlus.nochkboxmsg);
return false;
}
How can I use that variable instead of hard coding the input id?

You are missing the "#" before the ID:
$("form#myform").submit(function () {
var element = $("#" + MyVariable.chkboxid)
if (element.is(":checked")) {
} else {
alert(CommentsPlus.nochkboxmsg);
return false;
}
}
Note however that chkboxid is the key, the actual ID of the checkbox should be the value:
var MyVariable = {"chkboxid": "real_id_here"}

please check below code.hope it will work
$("form#myform").submit(function () {
if ($("#chkboxid").is("checked")) {alert("checked");
} else {
alert("not checked");
}
});
thanks,Ripa Saha

Related

DOM not being manipulated from inside a function that is being triggered properly

I have written this function to validate that all form fields and check boxes in a form are filled out. The script automatically disables the submit button and then watches for the moment at which it can be re-enabled. My debugger statements are landing me in all of the proper places, but for some reason, the DOM element is not being updated. I'm sure I am just making a stupid mistake, but can't seem to find a solution. Thank you in advance for any help!
Specifically looking at this section:
if (status === 'enable') {
btn.removeAttr('disabled');
btn.removeClass('disabled');
} else {
btn.prop('disabled', true);
btn.addClass('disabled');
}
Here is the whole script below.
$(document).ready(function() {
validateInput();
$('.validate').keyup(function(event){
validateInput();
});
$('[type=checkbox]').click(function(event){
validateInput();
});
function validateInput() {
var valid = 0;
var checkBox = $('[type=checkbox]');
var inputFields = $('input.validate');
var inputLength = inputFields.length + checkBox.length;
inputFields.each(function() {
if($(this).val() !== '') {
valid++ ;
}
});
checkBox.each(function() {
if($(this).prop('checked')) {
valid++ ;
}
});
if(valid === inputLength) {
updateBtnStatus('enable')
} else {
updateBtnStatus('disable')
}
}
function updateBtnStatus(status) {
var btn = $('input[type="submit"]');
if (status === 'enable') {
btn.removeAttr('disabled');
btn.removeClass('disabled');
} else {
btn.prop('disabled', true);
btn.addClass('disabled');
}
}
});

Jquery if any element in a class meets the condition

I want to check if any element in a class meets certain conditions.
Example.
$(document).on('click','.modalInner_form_nav', function(){
var input = $(this).parents('.modalInner_form').find('.validate_g');
//$(input).each(function(index, element) {
if ($(input).val() == ''){
$(input).css('border', '#BB0000 1px solid');
return false;
}
else {
/////////go to next///////////
if ($(this).parents('.modalInner_form').is(':last-child')){
}
else {
$(this).parents('.modalInner_form').slideUp();
$(this).parents('.modalInner_form').next('.modalInner_form').slideDown();
}
////////////
}
});
This returns false if all input fields are empty, but if one in this class is not empty, it returns true.
The problem is you have a inner function so
$(document).on('click', '.modalInner_form_nav', function () {
var $form = $(this).parents('.modalInner_form');
var $input = $form.find('.validate_g');
var valid = true;
$input.each(function (index, element) {
var $this = $(this)
if ($this.val() == '') {
valid = false;
$this.css('border', '#BB0000 1px solid');
}
});
if (valid) {
if ($form.is(':last-child')) {
//do something else
} else {
$form.slideUp();
$form.next('.modalInner_form').slideDown();
}
}
});
Not really sure what your question is, but here is a way to improve your code.
Save $(this).parents('.modalInner_form') in a variable instead of constantly repeating this same line of code. Then you can replace all those method calls with the variable and just call whatever functions you want on the variable.
var varName = $(this).parents('.modalInner_form');
varName.find('.validate_g');
...
if(varName.is(':last-child')){
...

Form validation with Jquery not behaving as expected

I am using jQuery to validate some fields in a form, and seem to be having an issue with one field in particular (#inputTel).
If an incorrect format is entered, an error message pops up underneath, which is fine, but the problem is once the correct format is entered the message does not disappear.
Here's a jsFiddle with the complete demo.
This is the section in question:
//Tel Validate
function is_valid_tel() {
$this = $("#inputTel");
var pattern = new RegExp("^\d{11}$");
if (pattern.test($this.val())) { // valid
if ($this.closest(".control-group").hasClass("error")) $this.closest(".control-group").removeClass("error");
$this.siblings(".help-inline").css("display", "none");
return true;
} else { // error
if (!$this.closest(".control-group").hasClass("error")) $this.closest(".control-group").addClass("error");
$this.siblings(".help-inline").css("display", "block");
return false;
}
}
Every other field works as expected except this one. My jQuery skills are limited so I'm unsure of how to solve this.
Problem in your code:
Replace var pattern = new RegExp("^\d{11}$"); with var pattern = new RegExp(/^\d{11}$/);
Updated code
//Tel Validate
function is_valid_tel() {
$this = $("#inputTel");
var pattern = new RegExp(/^\d{11}$/);// Update this line
if (pattern.test($this.val())) { // valid
if ($this.closest(".control-group").hasClass("error")) $this.closest(".control-group").removeClass("error");
$this.siblings(".help-inline").css("display", "none");
return true;
} else { // error
if (!$this.closest(".control-group").hasClass("error")) $this.closest(".control-group").addClass("error");
$this.siblings(".help-inline").css("display", "block");
return false;
}
}
Check the fiddle http://jsfiddle.net/rfg8H/
You could also use something like below, less cubersome:
$(function() {
function validateTheForm() {
var ok = true;
$(".input-medium").each(function() {
if($(this).val() == "") //use regex actually here
{
$(this).next().css("display","inline");
ok = false;
}
else {
$(this).next().css("display","none");
}
});
return ok;
}
$(".btn").click(function() {
$("form").submit(validateTheForm());
$("form").submit();
});
});

HTML Multi-Page Form Issues (page is refreshing)

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;
});

JavaScript workaround for not supported HTML5 elements and attributes

I am using Modernizr to detect unsupported HTML5 elements and attributes within browsers. If a element/attribute is not supported I like to write a quick workaround with jQuery.
At the moment I am stumbling around the "required" attribute with input element. My thought was to "detect" the associated form element and hook the jQuery .submit() event of the form. But how to do it?
To gain insight yourself here is a sample code how I fixed the "placeholder" attribute with input element:
if(Modernizr.input.placeholder == false) {
alert('input placeholder not exists, perform a workaround...');
$('[placeholder]').each(function() {
var input = $(this);
var placeholder = input.attr('placeholder');
input.bind('focus', function() {
if(this.value == placeholder) {
this.value = '';
$(this).removeClass('mzr-no-placeholder');
}
}).bind('blur', function() {
if(this.value == '') {
this.value = placeholder;
$(this).addClass('mzr-no-placeholder');
}
});
if(!this.value.length) {
this.value = placeholder;
$(this).addClass('mzr-no-placeholder');
}
});
}
else {
alert('input placeholder exists.');
}
Here is the solution
Thanks to greut.
if(Modernizr.input.required == false) {
alert('Tag input required not exists, perform a workaround...');
$('form').submit(function() {
var requirementsOK = true;
$('[required]', this).each(function() {
if(!this.value.length) {
$(this).addClass('mzr-no-required');
requirementsOK = false;
}
else {
$(this).removeClass('mzr-no-required');
}
});
return requirementsOK;
});
}
else {
alert('Tag input required exists.');
}
Here an hint on how to start that:
if (Modernizer.input.required === false) {
$('form').submit(function() {
$('[required]', this).each(function() {
if (!$(this).val()) {
alert('derp!');
return false;
}
}
}
}

Categories