Show div on button click javascript - javascript

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.

Related

Disabled text box is enabled after page reload

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

How to check if any one value not equals and stop calling function within each function using jquery?

in the given code, if any of the input value not equal to the attribute value,it returns false and dont call the function "printDiv()".This printDiv function for window.print().Now if each function fails also calling printdiv after print page opens in another windows then only error alert message showing.If any one the value fails within each function only want to show alert message and dont call printdiv function
How to fix this issue?
$("#btnprint").click(function(e) {
var isValid = true;
$('#printcontent').hide();
var orginaladv = $('#orginal_advamt').val();
var orginalbal = $('#orginal_balamt').val();
var changeadv = $('#advamt').val();
var changebal = $('#balamt').val();
$('.checkattrval').each(function() {
e.preventDefault();
if($(this).val() != $(this).attr('data-orgval')) {
alert("You should update first");
isValid = false;
return false;
}
else {
printDiv();
}
});
return isValid;
});
Move the call to printDiv() outside the loop, and have it check isValid there. Otherwise you call it for each valid field until you get to an invalid one.
$("#btnprint").click(function(e) {
var isValid = true;
$('#printcontent').hide();
var orginaladv = $('#orginal_advamt').val();
var orginalbal = $('#orginal_balamt').val();
var changeadv = $('#advamt').val();
var changebal = $('#balamt').val();
$('.checkattrval').each(function() {
e.preventDefault();
if ($(this).val() != $(this).attr('data-orgval')) {
alert("You should update first");
isValid = false;
return false;
}
});
if (isValid) {
printDiv();
}
});

jquery form validation without click -> when ok show div

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/

appendChild Possibly Deleting Element?

I am trying to create a simple to-do list application JavaScript. I have written up JavaScript to basically take the value from an input element and pass it into a few functions.
I created a live example on CodePen, which you may view here: http://cdpn.io/hnBmD
Edit: Code also located below?
It seems like appendChild could possibly be deleting the "li" node that the parent function is creating? May someone please give me a reasonable explanation to this?
Note: I do have the JavaScript in a separate file and it is being loaded right before the ending body tags.
HTML:
<form>
<p><input type="text" id="inItemText" autofocus><button type="submit" id="submitButton">+</button></p>
</form>
<ul id="toDoList">
</ul>
JavaScript:
// Defining nodes.
var inItemText = document.getElementById("inItemText");
var submitButton = document.getElementById("submitButton");
// Once "enter" is pressed or click event is triggered, execute the function.
// The function below is basically checking the value of the input, to make sure the value is empty. If it isn't, it passes the value and the "ul" element node into the addNewItem function.
submitButton.onclick = function(){
var itemText = inItemText.value;
if (itemText == "" || itemText == " ") {
return false;
} else {
addNewItem(document.getElementById("toDoList"), itemText);
}
}
// Once the parameters are passed. This basically creates a "li" element, applies the value of the input element into the innerText of the "li" element created and then appends the "ul" with the "li" we just created. Also, it resets the value of the input so we can enter another checklist item in.
function addNewItem(list, itemText) {
var listItem = document.createElement("li");
listItem.innerText = itemText;
list.appendChild(listItem);
itemText = inItemText.value = "";
}
Thank you!
You need to return false from the onclick function after it calls addNewItem. Otherwise it will submit the form, which reloads the page.
submitButton.onclick = function(){
var itemText = inItemText.value;
if (itemText == "" || itemText == " ") {
return false;
} else {
addNewItem(document.getElementById("toDoList"), itemText);
return false;
}
}
DEMO
Or more simply:
submitButton.onclick = function(){
var itemText = inItemText.value.trim();
if (itemText !== "" || itemText == " ") {
addNewItem(document.getElementById("toDoList"), itemText);
}
return false;
}
Or, as one of the comments suggested, get rid of the form, then there's nothing to submit.
Remove the form if not necessary or just prevent the default form submit action.
submitButton.onclick = function (e) {
e.preventDefault();
var itemText = inItemText.value;
if (itemText == "" || itemText == " ") {
return false;
} else {
addNewItem(document.getElementById("toDoList"), itemText);
}
}
The button element in your HTML has a type attribute of submit. When its click event is triggered, the default action is performed which is to submit the form. You need to prevent this default behaviour.
var inItemText = document.getElementById("inItemText");
var submitButton = document.getElementById("submitButton");
submitButton.onclick = function(e){
e.preventDefault(); //prevent it from submitting
var itemText = inItemText.value;
if (itemText == "" || itemText == " ") {
return false;
} else {
addNewItem(document.getElementById("toDoList"), itemText);
}
}
function addNewItem(list, itemText) {
var listItem = document.createElement("li");
listItem.innerText = itemText;
list.appendChild(listItem);
}

At least One Check box should be checked in gridview rows using javascript function not working in chrome and firefox

Check box validation checking problem in gridview rows
Hi I was written js function like bellow it will be used to check at least one check box should be checked in side gridview rows , before going to click on submit button this code was working fine In IE but fails to do in Firefox and chrome , can any one tell me where was wrong? .
Hers is the function
function ClientCheck() {
var valid = false;
var gv = document.getElementById("ctl00_cplContent_gvCurrenttarrif");
for (var i = 0; i < gv.all.length; i++) {
var node = gv.all[i];
if (node != null && node.type == "checkbox" && node.checked) {
valid = true;
break;
}
}
if (!valid) {
alert("Invalid. Please select a checkbox to continue with changes.");
}
return valid;
}
Element.all is not standard so you should not use it.
Use childNodes instead.
Change your code like following.
function ClientCheck() {
var valid = false;
var gv = document.getElementById("ctl00_cplContent_gvCurrenttarrif");
for (var i = 0; i < gv.childNodes.length; i++) {
var node = gv.childNodes[i];
if (node != null && node.type == "checkbox" && node.checked) {
valid = true;
break;
}
}
if (!valid) {
alert("Invalid. Please select a checkbox to continue with changes.");
}
return valid;
}
Better you use jQuery or similar library for accessing DOM elements.
e.g. Using jquery
var checkedBoxesCount = $("<%=gvCurrenttarrif.ClientID%>").find("input:checkbox:checked").length;
if(checkedBoxesCount==0) alert("NO CHECKBOX SELECTED");
Highlighting the comment ramakrishna-p as answer:
http://forums.asp.net/t/1932293.aspx?Check+box+validation+checking+problem+in+gridview+rows+
Working code is :
function ClientCheck() {
var valid = false;
var gv = document.getElementById("ctl00_cplContent_gvCurrenttarrif");
for (var i = 0; i < gv.getElementsByTagName("input").length; i++) {
var node = gv.getElementsByTagName("input")[i];
if (node != null && node.type == "checkbox" && node.checked) {
valid = true;
break;
}
}
if (!valid) {
alert("Invalid. Please select a checkbox to continue with changes.");
}
return valid;
}

Categories

Resources