I have a simple js validation function that checks if a checkbox is checked, if it's then the textbox input is enabled for the user, but when the checkbox is not checked it automatically makes the textbox field disabled.
The problem is that when after saving the page in the AJAX with not checked field, causes that the textbox field is again enabled even the checkbox is not checked, when I check it again 2 times then the function works again, but each time the page reloads and save previously selected values the function does not works at is should.
What I am doing wrong? Is there a different way to prevent this behavior?
function enableTextBodField() {
var checkboxField= document.querySelector('.checkbox');
var textBoxField= document.querySelector('.textBoxField');
if (checkboxField.checked == false)
{
textBoxField.disabled = true;
}
else if (checkboxField.checked == true)
{
textBoxField.disabled = false;
}
}
You can store the state of that textbox in browser localStorage and work it out from there.
$(document).ready(function() {
var textboxState = localStorage.getItem("txtboxState"); // Get state from localstorage
var textBoxField= document.querySelector('.textBoxField');
var checkboxField= document.querySelector('.checkbox');
if(textboxState != "" || textboxState != NULL){
if(textboxState = "hidden"){
textBoxField.disabled = true;
checkboxField.checked = false;
}else{
if(textboxState == "visible"){
textBoxField.disabled = false;
checkboxField.checked = true;
}
}
}else{
textBoxField.disabled = false;
checkboxField.checked = false;
}
});
function enableTextBodField() {
var checkboxField= document.querySelector('.checkbox');
var textBoxField= document.querySelector('.textBoxField');
if (checkboxField.checked == false)
{
textBoxField.disabled = true;
localStorage.setItem("txtboxState","hidden"); // Set state in localstorage variable
}
else if (checkboxField.checked == true)
{
textBoxField.disabled = false;
localStorage.setItem("txtboxState","visible"); // Set state in localstorage variable
}
}
Related
I want a validation check before submitting a user input details to the DB. I have tabs of form and one common separate save button which on click call the save function describe as bellow;
$scope.saveFn = function () {
$("#active_form_id")
.find("input,textarea,select")
.each(function (e) {
var value = $(this).val();
var id = $(this).prop("id");
if (value == null || value == "") {
return false;
//Abort things here
}
});
alert("After validation check");
}
This was called when user hit the save button, And bellow it one endpoint call which saves the data to server.
My problem is, even though the return false statement is executing, then too my endpoint is getting called and below written alert is executed.
How can i stop executing alert statement?
alert("After validation check");
You can try this code. In that I have set one global variable and if validation false set that variable to false
var IsValid=true;
$scope.saveFn = function () {
$("#active_form_id")
.find("input,textarea,select")
.each(function (e) {
var value = $(this).val();
var id = $(this).prop("id");
if (value == null || value == "") {
IsValid=false;
return false;
//Abort things here
}
});
if(IsValid){
alert("After validation check");
}
}
function bookingchanneldisable(stopSale){
if (stopSale == "N") {
document.getElementById("applicableBookingChannel").readOnly = false;
document.getElementById("applicableBookingChannelReservation").readOnly = false;
}else{
document.getElementById("applicableBookingChannel").checked = true ;
document.getElementById("applicableBookingChannelReservation").checked = false ;
document.getElementById("applicableBookingChannel").readOnly = true;
document.getElementById("applicableBookingChannelReservation").readOnly = true;
}
}
this function working fine in firefox (ubuntu) , but it is not working in firefox (windows). please can you help me
readonly prevents users from changing the field value. So it works with inputs in which you can change the value (like text boxes), but it doesn't work on inputs in which you do not change the value but the field state (like checkboxes).
To solve the problem, you should use disabled with checkboxes instead. Like this:
function bookingchanneldisable(stopSale){
if (stopSale == "N") {
document.getElementById("applicableBookingChannel").disabled = false;
document.getElementById("applicableBookingChannelReservation").disabled = false;
}else{
document.getElementById("applicableBookingChannel").checked = true ;
document.getElementById("applicableBookingChannelReservation").checked = false ;
document.getElementById("applicableBookingChannel").disabled = true;
document.getElementById("applicableBookingChannelReservation").disabled = true;
}
}
See it working on this JSFiddle: http://jsfiddle.net/fg1xLr1h/
I have a div which is invisible by default. I want, when button click it shows up.
I have tried, but the problem is it shows for just seconds and then again hide.
Here is my code:
function validate() {
var ta = document.getElementById("t").value;
var oa = document.getElementById("oa").value;
var ob = document.getElementById("ob").value;
var oc = document.getElementById("oc").value;
var od = document.getElementById("od").value;
if (ta == "") {
alert("Title can't be null");
document.getElementById("t").style.borderColor = "#E34234";
return false;
}
if (oa == "" && ob == "") {
alert("Atleast two options are compulsory");
document.getElementById("oa").style.borderColor = "#E34234";
document.getElementById("ob").style.borderColor = "#E34234";
return false;
}
document.getElementById("g").style.visibility="visible";
return true;
}
Div id is 'g' and on submit button function validate() is called which validates the form and also show the div.
I'm taking a guess here and assuming that the form is submitting and hence you see the div being visible for a fraction of a second. You should use this code instead:
function validate() {
var ta = document.getElementById("t").value;
var oa = document.getElementById("oa").value;
var ob = document.getElementById("ob").value;
var oc = document.getElementById("oc").value;
var od = document.getElementById("od").value;
var flag = false; // initially assume that all is well
if (ta == "") {
alert("Title can't be null");
document.getElementById("t").style.borderColor = "#E34234";
flag = true; // something wrong, flag it
}
if (oa == "" && ob == "") {
alert("Atleast two options are compulsory");
document.getElementById("oa").style.borderColor = "#E34234";
document.getElementById("ob").style.borderColor = "#E34234";
flag = true; // something wrong, flag it
}
if(flag) // if something wrong, show div and disable form submit
{
document.getElementById("g").style.visibility="visible";
return false;
}
return true;
}
What we are doing here is creating a flag to check its value at the end. If it's true, it means there are errors on form and hence form submit should be disabled. If not, then there are no errors and form submit can proceed as usual.
Just return false instead of true. It will stop page refresh and the div won't be hidden. Also, if you need the page refresh, just pass a GET parameter with the url and when the page is loaded, check the get parameter and if its set, make the div visible by default.
function validate() {
var ta = document.getElementById("t").value;
var oa = document.getElementById("oa").value;
var ob = document.getElementById("ob").value;
var oc = document.getElementById("oc").value;
var od = document.getElementById("od").value;
if (ta == "") {
alert("Title can't be null");
document.getElementById("t").style.borderColor = "#E34234";
document.getElementById("g").style.visibility="visible";
return false;
}
if (oa == "" && ob == "") {
alert("Atleast two options are compulsory");
document.getElementById("oa").style.borderColor = "#E34234";
document.getElementById("ob").style.borderColor = "#E34234";
document.getElementById("g").style.visibility="visible";
return false;
}
return true;
}
This way, the div will be shown only if the validation has failed. If you want to submit the form as well as keep the div visible, you need to use the approach with get Parameter, or you need to use ajax.
is it possible to do this automatically. mean when i type text and click on the second textfield autocheck the first one. then when both ok show the div2 and so on.
here is some code
var step1 = function() {
var first = $("#f_name").val();
var last = $("#l_name").val();
var error = false;
if (first == "") {
$("#f_name").next().text("*ErrorMsg");
error = true;
} else {
$("#f_name").next().text("");
}
if (last == "") {
$("#l_name").next().text("*ErrorMsg");
error = true;
} else {
$("#l_name").next().text("");
}
if (error == false) {
$("#send").submit();
$('#div1').show('slow');
} else {
returnfalse;
}
}
var step2 = function() {
var email1 = $("#e_mail").val();
var adress1 = $("#adress").val();
var error2 = false;
if (email1 == "") {
$("#e_mail").next().text("*ErrorMsg");
error2 = true;
} else {
$("#e_mail").next().text("");
}
if (adress1 == "") {
$("#adress").next().text("*ErrorMsg");
error2 = true;
} else {
$("#adress").next().text("");
}
if (error2 == false) {
$("#send2").submit();
$('#div2').show('slow');
} else {
returnfalse;
}
}
$(document).ready(function() {
$('#div1').hide();
$('#div2').hide();
$("#send").click(step1);
$("#send2").click(step2);
});
hope anyone can help me. and sorry for my bad english :)
greatings
The way that I would do it is:
Assign a variable, something like numSteps and set its initial value to 1
onFocus and onBlur, run a function that steps through each field, based on numSteps
If any fields are empty (or however you want to validate them), set error = true
if !error numSteps++
Make all elements up to numSteps visible
Hope this helps
Very crude example, but demonstrates what I was referring to:
http://jsfiddle.net/aSRaN/
On change of a dropdown value, I need to confirm whether the user wants to change the value or changed it by mistake.
If user clicks on OK then system should apply the modification, otherwise the value should not change.
As of now I have written code as follows:
document.getElementById("dropdownid").onchange = function (){
var a = confirm("Do you want to change");
if (a == true){
return true;
}
if (a == false){
return this;
}
}
here am getting the confirm box but regardless of whether if I press OK or Cancel, the dropdown always shows the new value.
check this fiddle
var drop = document.getElementById("dropdownid");
var selected =drop.options[drop.selectedIndex]; //save selection initially
drop.onclick = function (e){
selected = drop.options[drop.selectedIndex]; // save current selection
}
drop.onchange = function (e){
var a = confirm("Do you want to change");
if (a == false) // no need to check for true
{
selected.selected=true; // if cancel, set the existing selected option
}
}
Please try this:
document.getElementById("dropdownid").onchange = function (){
var a = confirm("Do you want to change");
if (a == true)
{
return true;
}
if (a == false)
{
return false;
}
}
You can undo the selection like this:
document.getElementById("dropdownid").onchange = function (){
if (!confirm("Do you want to change")) {
if (typeof this.prevVal=='undefined') {
this.prevVal=this.options[0].value;
for (var i=0;i<this.options.length;i++)
if (this.options[i].defaultSelected)
this.prevVal=this.options[i].value;
}
this.value=this.prevVal;
} else {
this.prevVal=this.value;
}
}
Basically you save in an attribute the previously selected value, and you search for the default value if not changed yet.
try using this code
document.getElementById("dropdownid").onchange = function (eve){
var a = confirm("Do you want to change");
if (a == true){
return true;
}
if (a == false){
eve.preventDefault();
}
}