I am attempting to .focus() a text box when a user clicks on a larger div. The input is a child of the div and I can locate the element, however Javascript throws an error upon attempting the .focus() function.
I have already tried to directly .focus() the childNodes as shown but I cannot 1) focus the node and 2) locate the input tag in the list.
function clickables() {
let clickables = document.getElementsByClassName("clickables")
for (var i = 0; i < clickables.length; i++) {
clickables[i].addEventListener("click", function(e) {
const target = e.srcElement.childNodes;
target.focus(input); // .getElementsByTagNames isn't working
});
}
}
clickables();
The expected results is that upon clicking the larger div it will focus the input inside of it, the actual result is java script tossing an error.
First you should be using inputs.length and not clickables.length.
Second you need to pick which child to .focus().
function clickables() {
let inputs = document.getElementsByClassName("clickables");
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener("click", function(e) {
const target = e.srcElement.firstElementChild;
target.focus();
});
}
}
clickables();
.clickables {
background-color: #999;
padding: 10px;
}
<div class="clickables">
<input type="text" value="first">
<input type="text" value="second">
<input type="text" value="third">
</div>
In this example I am picking the first element to focus on.
UPDATE
As stated you need to know which child you want to call .focus() on.
Let's say that you use the attribute autofocus on the child you want to receive focus then you can do this:
function clickables() {
let inputs = document.getElementsByClassName("clickables");
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener("click", function(e) {
let target = e.srcElement.querySelector('[autofocus]');
if (!target) {
target = e.srcElement.firstElementChild;
}
target.focus();
});
}
}
clickables();
.clickables {
background-color: #999;
padding: 10px;
}
<div class="clickables">
<input type="text" value="first">
<input type="text" value="second" autofocus>
<input type="text" value="third">
</div>
<hr>
<div class="clickables">
<input type="text" value="first">
<input type="text" value="second">
<input type="text" value="third" autofocus>
</div>
<hr>
<div class="clickables">
<input type="text" value="first">
<input type="text" value="second">
<input type="text" value="third">
</div>
Since #sean indicated, correctly, that the above example is a miss use of autofocus you should probably use a different attribute or here is an alternate way to accomplish the same thing:
function clickables() {
let inputs = document.getElementsByClassName("clickables");
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener("click", function(e) {
let index = Number(e.srcElement.getAttribute('focus')||'1')-1;
console.log(index)
let target = e.srcElement.children[index];
target.focus();
});
}
}
clickables();
.clickables {
background-color: #999;
padding: 10px;
}
<div class="clickables" focus="2">
<input type="text" value="first">
<input type="text" value="second">
<input type="text" value="third">
</div>
<hr>
<div class="clickables" focus="3">
<input type="text" value="first">
<input type="text" value="second">
<input type="text" value="third">
</div>
<hr>
<div class="clickables">
<input type="text" value="first">
<input type="text" value="second">
<input type="text" value="third">
</div>
I think the attribute is the best solution since you can guarantee setting .focus on the correct/expected element.
You could try something like
function clickables() {
let inputs = document.getElementsByClassName("clickables")
for (var i = 0; i < clickables.length; i++) {
clickables[i].addEventListener("click", function(e) {
const childElements = e.srcElement.children;
for (var j = 0; j < childElements.length; j++) {
childElements[j].focus();
}
});
}
}
clickables();
Related
This is my html
<input type="checkbox" name="checked" id="check" onclick="unlocking()">
<label for="checkbox">If checked</label>
<fieldset id="unlock" style="display:none;">
<input type="text" name="Name" value="Name" id="inside" required>
<input type="text" name="email" value="email" id="inside" required>
<input type="text" name="Adress" value="Adress" id="inside" required>
</fieldset>
And this is my js with the function to hide and show the fieldset.
function unlocking() {
var checkBox = document.getElementById("check")
var form = document.getElementById("unlock")
if(checkBox.checked) {
form.style.display="block";
}else {
form.style.display="none";
}
}
If the fieldset is show i want the input to be required and if not just to skip it.
You could loop through each child and set its required attribute to either true or false depending on if the checkbox is checked or not, like so:
for (child of form.children) {
child.required = true;
}
Please check the snippet below:
function unlocking() {
var checkBox = document.getElementById("check");
var form = document.getElementById("unlock");
if (checkBox.checked) {
form.style.display = "block";
for (child of form.children) {
child.required = true;
console.log(child);
}
} else {
form.style.display = "none";
for (child of form.children) {
child.required = false;
console.log(child);
}
}
}
<input type="checkbox" name="checked" id="check" onclick="unlocking()" />
<label for="checkbox">If checked</label>
<fieldset id="unlock" style="display: none;">
<input type="text" name="Name" value="Name" id="inside" />
<input type="text" name="email" value="email" id="inside" />
<input type="text" name="Adress" value="Adress" id="inside" />
</fieldset>
//element.setAttribute("required", ""); turns required on
//element.removeAttribute("required"); turns required off
function unlocking() {
var checkBox = document.getElementById("check")
var form = document.getElementById("unlock")
var inputs = document.querySelectorAll('input[type=text]')
if(checkBox.checked) {
form.style.display="block";
for(var i = 0; i < inputs.length; i++)
inputs[i].setAttribute("required", "");
}else {
form.style.display="none";
for(var i = 0; i < inputs.length; i++)
inputs[i].removeAttribute("required");
}
}
I am making a website and one of the requirements is it to be IE8 compatible. I have a simple form on my page and using a radio button I am changing what fieldsets of the form are visible. Basically I am giving user an option to either input his name or his number. I am using IE11 on W10 in IE8 compatibility mode in F12 menu and the switching is not working. It works everywhere else, even in IE9+. Do you know what could be the problem?
Both my radio buttons have an onclick function that set one fieldset at display:none and the other at display:block. The "header__form__fs_person" is hidden by default.
html:
<form class="header__form" name="form_name">
<fieldset class="header__form__label_choices">
<label class="header__form__label" for="person">Podle jména</label>
<input class="header__form__input_radio" type="radio" value="person_on" id="person" name="choice" onclick="hideIc(this)" checked>
<span class="header__form__divider">/</span>
<label class="header__form__label" for="ic">Podle IČ</label>
<input class="header__form__input_radio" type="radio" value="ic_on" id="ic" name="choice" onclick="hidePerson(this)">
</fieldset>
<fieldset class="header__form__fs_person">
<input class="header__form__input_text" type="text" id="name" placeholder="Jméno" required>
<input class="header__form__input_text" type="text" id="lastname" placeholder="Příjmení" required>
<input class="header__form__input_text" type="text" id="bday" placeholder="Narozen" onfocus="(this.type='date')" required>
</fieldset>
<fieldset class="header__form__fs_ic" disabled>
<input class="header__form__input_text" pattern=".{9,}" placeholder="123456789" required>
</fieldset>
<label class="header__form__terms" for="terms">Souhlasím s <a class="header__form__terms_a" href="">obchodnimi podmínkami</a></label>
<input class="header__form__input_checkbox" type="checkbox" id="terms" required>
<input class="header__form__input_btn" type="submit" value="Ověřit">
</form>
js:
<script>
function hideIc(radio_btn) {
if (radio_btn.checked) {
var ic = document.getElementsByClassName("header__form__fs_ic");
var person = document.getElementsByClassName("header__form__fs_person");
for (var i=0; i < ic.length; i++) {
ic[i].style.display = "none";
ic[i].disabled = true;
person[i].style.display = "block";
person[i].disabled = false;
}
}
}
function hidePerson(radio_btn) {
if (radio_btn.checked) {
var ic = document.getElementsByClassName("header__form__fs_ic");
var person = document.getElementsByClassName("header__form__fs_person");
for (var i=0; i < ic.length; i++) {
ic[i].style.display = "block";
ic[i].disabled = false;
person[i].style.display = "none";
person[i].disabled = true;
}
}
}
</script>
IE8 doesn't support getElementsByClassName().
See here: http://caniuse.com/#feat=getelementsbyclassname
There is a walk-around:
if(!document.getElementsByClassName) {
document.getElementsByClassName = function(className) {
return this.querySelectorAll("." + className);
};
Element.prototype.getElementsByClassName = document.getElementsByClassName;
}
The answer isn't mine... I found it here: javascript document.getElementsByClassName compatibility with IE
I have several div tags with the class of opt that have an input and button element inside them. I am trying to create a function that will take the value from the input tag and when you click the button, the next input and button field will pop up and ask you to enter different information, while the previous input and button tags will hide itself. However, the function is not working here is the jsfiddle.
HTML
<div id="container">
<div class="opt active"> <input type="text" placeholder ="Enter Name"name="name"> <button>OK</button>
</div>
<div class="opt">
<input type="text" placeholder ="Enter Age" name="age"> <button>OK</button>
</div>
<div class="opt">
<input type="text" placeholder ="Enter Race" name="race"> <button>OK</button>
</div>
<div class="opt">
<input type="text" placeholder ="Enter Sex" name="sex"> <button id="done">Done</button>
</div>
</div>
Javascript
function init(){
var opt = document.getElementsByClassName('opt');
var num = 0;
var prop = [];
var propVal = [];
for (var i = 0 ; i < opt.length; i++)
{
opt[i].querySelector('input').value = "";
}
opt[num].querySelector('button').onclick = function()
{
prop[num] = opt[num].querySelector('input').name;
propVal[num]= opt[num].querySelector('input').value;
opt[num].className = "opt";
opt[num+1].className ="opt active";
console.log(prop +" "+ propVal);
num++;
};//button function
}
init();
You need bind the click handlers in the loop as well. You also don't need to use parallel arrays to store the properties when you could use an object instead.
Make sure that there is a "next input" before trying to change the class of the next one.
var opt = document.getElementsByClassName('opt'),
num = 0, prop = {};
function nextInput() {
var input = opt[num].querySelector('input');
prop[input.name] = input.value;
console.log(prop);
opt[num].className = "opt";
if (num + 1 < opt.length) {
opt[num + 1].className = "opt active";
num++;
} else {
// submit?
}
}
for (var i = 0; i < opt.length; i++) {
opt[i].querySelector('input').value = "";
opt[i].querySelector('button').onclick = nextInput;
}
.opt { display: none }
.opt.active { display: block }
<div id="container">
<div class="opt active">
<input type="text" placeholder="Enter Name" name="name">
<button>OK</button>
</div>
<div class="opt">
<input type="text" placeholder="Enter Age" name="age">
<button>OK</button>
</div>
<div class="opt">
<input type="text" placeholder="Enter Race" name="race">
<button>OK</button>
</div>
<div class="opt">
<input type="text" placeholder="Enter Sex" name="sex">
<button id="done">Done</button>
</div>
</div>
To do checking on required fields and a custom method of alerting users that required fields are missing, I'm trying to get an array of elements in a form, and have been hunting but not finding a good method.
Is there some variation of
document.getElementById(form).elements;
that would return all the required elements of an array, or a way to test if a given element is required... something akin to either
var my_elements = document.getElementById(form).required_elements;
or
var my_elements = document.getElementById(form).elements;
for (var this_element in my_elements){
if (this_element.attributes["required"] == "false"){
my_elements.splice(this_element, 1);
}
}
Try querySelectorAll with an attribute selector:
document.getElementById(form).querySelectorAll("[required]")
var requiredElements = document.getElementById("form").querySelectorAll("[required]"),
c = document.getElementById("check"),
o = document.getElementById("output");
c.addEventListener("click", function() {
var s = "";
for (var i = 0; i < requiredElements.length; i++) {
var e = requiredElements[i];
s += e.id + ": " + (e.value.length ? "Filled" : "Not Filled") + "<br>";
}
o.innerHTML = s;
});
[required] {
outline: 1px solid red;
}
<form id="form">
<input required type="text" id="text1" />
<input required type="text" id="text2" />
<input type="text" id="text3" />
<input type="text" id="text4" />
<input required type="text" id="text5" />
</form>
<br>
<button id="check">Check</button>
<br>
<div id="output">
Required inputs
</div>
As I have Basic knowledge of JavaScript I want to do operation like following :
By using Two radio button giving two option for Payment :
By Cash
By Check
If user select the radio button of Cash the Cheque Button should also disable and the Div of Cheque in which the details like cheque no and bank name is should also disable.
And visa Versa
Is there a way to do that without using JQuery? (disable a div and get all content disabled also)
Thanks in Advance For Help.
Try this:
document.getElementById("myDivId").disabled = true;
To disable all elements inside the div, try this:
var allChildNodes = document.getElementById("myDivId").getElementsByTagName('*');
for(var i = 0; i < allChildNodes.length; i++)
{
allChildNodes[i].disabled = true;
}
This code will disable all elements within the given container.
var container = document.getElementById("cashContainer");
var inputs = document.getElementsByTagName("input").concat(document.getElementsByTagName("select"));
for (var i = 0; i < inputs.length; i++) {
inputs[i].disabled = true;
}
Applying the same code you can re-enable the other container.
You may try this
HTML
<input type="radio" name="cashcheck" value="cash" checked />Cash<br />
<div id="cash">
<form method="post">
<input type="text" name="cashTxt1" />
<input type="text" name="cashTxt2" />
</form>
</div>
<input type="radio" name="cashcheck" value="check" />Check<br />
<div id="check">
<form method="post">
<input type="text" name="checkTxt1" disabled />
<input type="text" name="checkTxt2" disabled />
</form>
</div>
JS
window.onload=function(){
var radios = document.getElementsByName('cashcheck');
radios[0].onchange=toggle;
radios[1].onchange=toggle;
};
function toggle()
{
if(this.checked)
{
var div = document.getElementById(this.value),
inputs = div.getElementsByTagName('form')[0].getElementsByTagName('*');
for( var i=0; i<inputs.length; i++)
{
inputs[i].removeAttribute('disabled');
}
var op = this.value == 'cash' ? 'check' : 'cash',
divOp = document.getElementById(op),
divOpInputs = divOp.getElementsByTagName('form')[0].getElementsByTagName('*');
for( var i=0; i<divOpInputs.length; i++)
{
divOpInputs[i].setAttribute('disabled');
}
}
}
DEMO.
<fieldset disabled="true">
<div>
<input type="text" />
</div>
<br>
<div>
<input type="text" />
</div>
<br>
<div>
<input type="text" />
</div>
<br>
</fieldset>