I have to fix some form validation but there's no jQuery included in the host page. I'd normally do something like this...
if ($("#contactNameAdd").val() !== '' || $("#contactPhoneAdd").val() !== '') {
$("#contactForm").show()
};
How can I re-write that in normal js?
var name = document.getElementById("contactNameAdd");
var phone = document.getElementById("contactPhoneAdd");
var form = document.getElementById("contactForm");
if(name.value != '' || phone.value != '') {
form.style.display = "block";
}
if (document.getElementById('contactNameAdd').value !== '' || document.getElementById('contactPhoneAdd').value !== '') {
document.getElementById('contactForm').style.display = 'block';
}
In plain javascript, you use document.getElementById('id') to get DOM nodes based on the id attribute. You use .value on a DOM Input element to get its value. And you use .style on any DOM element to set css attributes. In this case "show" means "display: block;".
if (document.getElemenById('contactNameAdd').value != '' || document.getElementById('contactPhoneAdd').value != '') {
document.getElementById('contactForm').style.display = 'block';
}
Try this - checks the 2 values then changes the style.display property of the 'contactForm'
This should do the trick.
var contactNameAdd = document.getElementById("contactNameAdd");
var contactPhoneAdd = document.getElementById("contactPhoneAdd");
if((contactNameAdd !== null && contactNameAdd.value !== '') || (contactPhoneAdd !== null && contactPhoneAdd.value !== ''))
{
document.getElementById("contactForm").style.display = 'block';
}
var contactName = document.getElementById('contactNameAdd');
var contactPhone = document.getElementById('contactPhoneAdd');
if(contactName.value !== '' || contactPhone.value !== '') {
// Different as JQuery, there will be no animation.
// I assume you use 'display:none' to hide the form.
var form = document.getElementById('contactForm');
form.style.display = 'block';
}
Related
So i have a simple code that tells that if there is a paragraph and user clicks on it, It should show text field and button. When you enter information in textfield and go the value in text field should be changed with textfield value. My code works fine but it gives error Cannot read property 'nodeName' of null at HTMLDocument.catchIt. Can anyone please tell how to solve it?
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>jobgo</p>
<script type="text/javascript">
var editing = false;
if (document.getElementById && document.createElement) {
var butt = document.createElement('BUTTON');
var buttext = document.createTextNode('Ready!');
butt.appendChild(buttext);
butt.onclick = saveEdit;
}
function catchIt(e) {
if (editing) return;
if (!document.getElementById || !document.createElement) return;
if (!e) var obj = window.event.srcElement;
else var obj = e.target;
while (obj.nodeType != 1) {
obj = obj.parentNode;
}
if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return;
while (obj.nodeName != 'P' && obj.nodeName != 'HTML') {
obj = obj.parentNode;
}
if (obj.nodeName == 'HTML') return;
var x = obj.innerHTML;
var y = document.createElement('TEXTAREA');
var z = obj.parentNode;
z.insertBefore(y,obj);
z.insertBefore(butt,obj);
z.removeChild(obj);
y.value = x;
y.focus();
editing = true;
}
function saveEdit() {
var area = document.getElementsByTagName('TEXTAREA')[0];
var y = document.createElement('P');
var z = area.parentNode;
y.innerHTML = area.value;
z.insertBefore(y,area);
z.removeChild(area);
z.removeChild(document.getElementsByTagName('button')[0]);
editing = false;
}
document.onclick = catchIt;</script>
</body>
</html>
You have onclick event attached on the whole document and are handling everything inside that function. Now you are correctly returning when it is a TextArea or an anchor tag but are forgetting to do so for the BUTTON tag.
Since you have one more onclick handler attached for your button called saveClick() which is doing the actual job you want, your code is working as expected. You only need to return from the other onclick event handler (catchit) when you have a button. Edit like this, it will work :
if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A' || obj.tagName == 'BUTTON') return;
I have problem with this code
I will create a JS addon to resize textarea when textfield is empty,
i think this code is good but not work for me :(
reason = document.getElementById('reason').value !== "";
causes = document.getElementById('causes').value !== "";
corrections = document.getElementById('corrections').value !== "";
comment = document.getElementById('comment').value !== "";
var disabled = $('form-control').is(':disabled') == true;
if (disabled && reason){
$("#reason").attr("rows","5");
}
var disabled = $('form-control').is(':disabled') == true;
if (disabled && causes){
$("#causes").attr("rows","5");
}
var disabled = $('form-control').is(':disabled') == true;
if (disabled && corrections){
$("#reason").attr("rows","5");
}
var disabled = $('form-control').is(':disabled') == true;
if (disabled && comment){
$("#reason").attr("rows","5");
}
You need to not repeat yourself (DRY)
let anyFilled = $("#reason,#causes,#corrections,#comment").filter(function() {
return this.value != "";
}).length>0;
if ($('form-control').is(':disabled') && anyFilled) {
$("#reason").attr("rows", "5");
}
Why are you redeclaring disabled so many times? especially since its the same expression each time? Just declare it once and make sure you brush up on DRY programming
var reason = $('#reason').val() !== "";
var causes = $('#causes').val() !== "";
var corrections = $('#corrections').val() !== "";
var comment = $('#comment').val() !== "";
var disabled = $('form-control').is(':disabled') == true;
if (disabled) {
if (causes || corrections || comment) {
$("#reason").attr("rows", "5");
}
}
everyone! I'm building form validation in HTML/JavaScript. The Problem is that it always behaves like the fields are filled and colors the textboxes in blue.
var fName = document.getElementById('fName').value;
fName = document.getElementById('fName').focus();
var lName = document.getElementById('lName').value;
function validation()
{
//check empty fields
if (fName == "" || lName == "")
{
document.getElementById('fName').style.backgroundColor = "red";
document.getElementById('lName').style.backgroundColor = "red";
}
else(fName != "" || lName != "")
{
document.getElementById('fName').style.backgroundColor = "blue";
document.getElementById('lName').style.backgroundColor = "blue";
}
return false;
}
The problem is the line: fName = document.getElementById('fName').focus(); fName in that line is assigned as undefined so you should try something like:
var element = document.getElementById('fName');
var fName = element.value;
element.focus();
When you fire an event or perform some action for example, the returning value is undefined so fName != "" is true.
E.g.:
console.log(element.classList.add("mystyle")); //return undefined
Also check that you should put else if() instead of else () full example: https://jsfiddle.net/cmq0x2a6/
I suggest you try this:
fname
<input type="text" id="fName" onfocus="checkIfEmpty(event)">
lname
<input type="text" id="lName" onfocus="checkIfEmpty(event)">
<script>
function checkIfEmpty(event) {
if (event.relatedTarget != null) {
if (event.relatedTarget.value.length == 0) {
event.relatedTarget.style.backgroundColor = "red";
} else event.relatedTarget.style.backgroundColor = "green";
}
}
</script>
It looks like the problem is in this typo --
else(fName != "" || lName != "")
{
// set the color to 'blue'
}
You miss the if, so (fName != "" || lName != "") is just an expression that you evaluate and then immediately execute the code inside the curly braces.
It all runs OK because you placed the opening brace on the next line (it would've thrown a SyntaxError otherwise).
You need to change your code to
else if (fName !== "" || lName !== "") {
// set the style
}
I am using this function:
function sel_test(e) {
//alert(e.length-1);
var splitdata = e.split("d");
var newstr = e.substring(0,e.length-1);
dropcall = 1;
nodes = newstr.split(';');
o = 0;
if (nodes[0] == '1') o = nodes.shift();
for (i=0;i<nodes.length;i++) {
e = nodes[i];
var ul = document.getElementById(e);
if (icons) var img = document.getElementById(e+'i');
if (ul) {
if (((ul == 'none') AND (ul.style.display == 'none')) OR (ul.style.display == '')) {
ul.style.display = 'block';
} else if (!o) {
ul.style.display = 'none';
}
}
}
javascript is giving me an error of missing parenthesis:
if (((ul == 'none') AND (ul.style.display == 'none')) OR (ul.style.display == '')) {
what this the correct way of doing this.
You should be using && and || instead of AND and OR.
Shouldn't you?
Try this:
if (((ul == 'none') && (ul.style.display == 'none')) || (ul.style.display == ''))
JavaScript has an AND operator, but it isn't the word AND, it is && (also &, for a bitwise and). Similarly, rather than OR you want || (or | for bitwise).
Note that your ul variable will never be equal to the string 'none' - the return from document.getElementById(e) will always be either the matching DOM element, or null if no element has the supplied id.
Further reading: Logical Operators (and you should read it, because && and || don't always return true or false and MDN explains this).
You are also missing the closing right squiggly for the function.
I really don't know what the issue is here. As far as I can see, the code is simple and should work fine.
var Prices="";
for (var PriceCount = 1; PriceCount <= 120; PriceCount++) {
var CurrentPrice = "Price" + PriceCount;
if (prevDoc.getElementById(CurrentPrice).value != null) {
if (Prices == "") {
Prices = prevDoc.getElementById(CurrentPrice).value;
} else {
Prices += "," + prevDoc.getElementById(CurrentPrice).value;
}
} else {
break;
}
}
There could be up to 120 hidden inputs on the form. The moment we check for an input that doesn't exist the loop should break. My test page has two input elements that get pulled. On the third (the null) I get this error in firebug:
prevDoc.getElementById(CurrentPrice) is null
if (prevDoc.getElementById(CurrentPrice).value != null) {
Yes it is null...that's what the check is for ಠ_ಠ
Does any one know what I'm doing wrong? This seems like it should be really straight forward.
EDIT:
for clarity's sake, prevDoc=window.opener.document
if (prevDoc.getElementById(CurrentPrice).value != null) {
can be expanded to:
var element = prevDoc.getElementById(CurrentPrice);
var value = element.value; /* element is null, but you're accessing .value */
if (value != null) {
value is never null.
If it is not filled in, the value would be "" or a length of zero.
If the element does not exist, you would check for the existence of the element.
var CurrentPrice = "Price" + PriceCount;
var elem = prevDoc.getElementById(CurrentPrice);
if (elem && elem.value != null) {
I think it should be:
var Prices="";
for (var PriceCount = 1; PriceCount <= 120; PriceCount++) {
var CurrentPriceId = "Price" + PriceCount,
CurrentPrice = prevDoc.getElementById(CurrentPriceId);
if (CurrentPrice != null) {
Prices = (Prices == "") ? CurrentPrice.value : (Prices + "," + CurrentPrice.value);
}
else break;
}
Try
if (prevDoc.getElementById(CurrentPrice) !== null)