I am creating a set of radio buttons, that when checked, update a text box with all of the options checked. However, if you only select one of four options the remaining part of the text box will populate with 'undefined' for each remaining button that isn't clicked, which in this case would be three.
To try and avoid getting 'undefined' and show all the options in the text field at once I created a script that would automatically check the radio buttons after a certain time has passed. But, it doesn't update the text field as if I had clicked on the button. Any ideas?
Here's the code that checks them, and the code that puts them in the text field..
var allElems = document.getElementsByTagName('input');
setTimeout(function() {
for (i = 0; i < allElems.length; i++) {
if (allElems[i].type == 'radio') {
allElems[i].checked = true;
}
}
}, 5000);
$('input[name="o1"]').on('change', function() {
$('input[id="text-yui_3_17_2_1_1502294158679_90364-field"]').val($('input[name="o1"]:checked').val()+$('input[name="o2"]:checked').val()+$('input[name="o3"]:checked').val()+$('input[name="o4"]:checked').val());
});
Related
I have the following JavaScript code:
var radios = form.elements["option_filter"];
for (var i = 0, max = radios.length; i < max; i++) {
if (typeof (radios[i].value) !== 'undefined') {
radios[i].onclick = function () {
var l = this.nextElementSibling.innerText;
<code to create a path containing selection>
window.location.replace(dest);
}
}
}
which works fine, except that when a radio is clicked, the selection is considered checked in code, but that is not reflected in the UI ... the radio button remains blank as the redirect is processed.
I tried having it sleep a bit between the onclick firing and the redirect, to no avail.
How do I get the UI to reflect the selection change so that the user sees it selected while waiting for the new page to load?
To get the UI to reflect... you'll need to set the value of the target radio button to a value...
radio[i].value = "whatever"
Also remember that the value set must match the name of one of the radio buttons in your options...
I have a navigation bar with 5 elements, drop down menu field, textarea and another text field. what i need:
to disable all navigation bar elements except Home when document be ready. then when i blur the text field remove attr disabled from them and activate again.
to separate all the values in the dropdown menu field started with 001 in additional drop down menu under the master in the navigation bar without the third part in the line (url) , append values started with 002 in additional drop down menu under CSS without (url) and 003 under javascript also without (url) .
when user click in logout option under home window close.
this is Demo:https://jsfiddle.net/ov43ebko/1/
$(document).ready(function(){
$('.css,.jscript,.jquery').attr('disabled','disabled');
$('.logOut').click(function(){
window.close();
});
// to split lines based on semicolon.
function check(){
var lines = $('.hiddenText textarea').val().split(/\n/);
var texts = [];
for (var i=0; i < lines.length; i++) {
texts.push($.trim(lines[i]));
}
for (var i=0; i < texts.length; i++) {
var removed1 = texts[i].split(';');
$(".masters").append($("<ul><li>").text(removed1[0]));
$(".css").append($("<ul><li>").text(removed1[1]));
$(".jscript").append($("<ul><li>").text(removed1[2]));
}
}
// to split dropdown menu choices to lines.
function c1() {
var resultLines = $('.filledField').find('option').size();
var textArea ="";
for (var i = 1; i <= resultLines; i++) {
var xItem = $('.filledField').find('option:nth-child(' + (i) + ')').text();
textArea += xItem ;
//code to split xItem into individual variables
}
$('.hiddenText textarea').val('');
$('.hiddenText textarea').val(textArea);
check();
}
$(".field").blur(function(){
$('.css,.jscript,.jquery').prop("disabled", false);
c1();
});
});
I hope that this is what you wanted to achieve.
1. to disable all navigation bar elements except Home when document be ready. then when i blur the text field remove attr disabled from them and activate again.
For this, have given pointer-events:none to disable li tags as they can't be disabled using attribute disabled.
$('.css,.jscript,.jquery').css('pointer-events', 'none');
And then enabled it by setting css back to all.
$(".field").blur(function() {
$('.css,.jscript,.jquery').css('pointer-events', 'all');
c1();
});
2. to separate all the values in the dropdown menu field started with 001 in additional drop down menu under the master in the navigation bar without the third part in the line (url) , append values started with 002 in additional drop down menu under CSS without (url) and 003 under javascript also without (url) .
I may have misunderstood this point but here is what I think you wanted. Have checked first parameter value and accordingly appended the second parameter value in ul under drop down menu.
if (parseInt(removed1[0]) == 1) {
$(".masters ul").append($("<li></li>").text(removed1[1]));
} else if (parseInt(removed1[0]) == 2) {
$(".css ul").append($("<li></li>").text(removed1[1]));
} else if (parseInt(removed1[0]) == 3) {
$(".jscript ul").append($("<li></li>").text(removed1[1]));
}
Please refer this fiddle.
When I change the option of a dropdown menu, I want all the checkboxes to be unchecked. Here's the code that I put inside a function that's called when the dropdown menu changes:
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == "checkbox") {
inputs[i].checked = false;
}
}
This does indeed uncheck the checkbox. However, to recheck the checkbox, it takes two clicks. It appears that dat.gui still thinks the checkbox is checked, so it takes one click to uncheck it, and one more to check it.
How do I make dat.gui update the checkboxes?
Edit: Here's the current state of the problem.
gui = new dat.GUI;
controllers = [];
var menu = {
'This is an example': false,
}
controllers[0] = gui.add(menu, 'This is an example').onFinishChange(
function(value) {console.log('example');} ).listen();
menu['This is an example'] = false;
With this code, the checkbox is unchecked, due to the .listen() call and setting the variable to false. However, it still takes two clicks for the check to show--one to "uncheck" the checkbox, and one to check it.
I've recently come across the same issue with having to click the checkbox twice to get the proper behavior, so here's what worked for me and will hopefully spare other readers a few minutes of head-scratching:
// the usual
var menu = { "foo":false };
// store this reference somewhere reasonable or just look it up in
// __controllers or __folders like other examples show
var o = menu.add(menu, "foo").onChange(function() { });
// some later time you manually update
o.updateDisplay();
o.__prev = o.__checkbox.checked;
First set up data binding by telling dat.gui to listen to the value you need to bind to by including .listen() after your .add()
gui = new dat.GUI;
controllers = [];
var menu = {
'This is an example': false,
}
controllers[0] = gui
.add(menu, 'This is an example')
.listen()
.onFinishChange(
function(value) {
console.log('example');
}
);
Then set your variable that dat.gui is controlling via the checkbox to false.
menu['This is an example'] = false;
Some more info about the details of dat.gui: http://dat-gui.googlecode.com/git-history/561b4a1411ed13b37be8ff974174d46b1c09e843/index.html
Can any guru show me how to get values from HTML Form element - RADIO BUTTON and CHECK BOX?
For example in case of text box we can get the value directly by getElementById(id).value;
But how to get the value for a combo box (drop down menu), radio button and checkbox ?
Thanks.
Drop down (<select>):
var el = document.getElementById('yourSelectId');
var value = el.options[el.selectedIndex].value;
If you're treating your select list as a multi-select (combobox) list, you have to loop through the options and check if they are selected:
var el = document.getElementByid('yourSelectId');
var selectedValues = [];
for (var i = 0; i < el.options.length; i++) {
if (el.options[i].selected) {
selectedValues.push(el.options[i].value);
}
}
// all selected values are now in the selectedValues array.
Radio buttons and checkboxes should also have value properties, but more appropriately I think I would only test whether they are checked:
var isChecked = document.getElementById('yourRadioOrCheckboxId').checked;
For checkbox, the element has a .checked property:
document.getElementById('foo').checked; // true or false
I have a drop down if i click it will retrieve values from db.If thre are 4 values that has to pass into text box and make it visible.If 5 values then 5 values has to get visible.There will be a count if 4 boxes count has to get into 5th box.if 5 values then count has to get int0 6th box.
How do i do it?
If the text boxes are in the markup and you've just hidden them (e.g., style="display: none"), you can show them again by setting their style.display property to "":
textBoxElement.style.display = "";
For example, here's a button click handler that looks for a text field to show and shows it; if there aren't any more to show, it hides the button:
var myForm = document.getElementById('myForm');
document.getElementById('btnShowField').onclick = function() {
var index, field, foundOne, foundMore;
foundOne = foundMore = false;
for (index = 0; index < myForm.elements.length; ++index) {
field = myForm.elements[index];
if (field.type === "text" && field.style.display === "none") {
if (!foundOne) {
// Found one, show it
field.style.display = "";
foundOne = true;
}
else {
// Found more, so we don't need to hide the button
foundMore = true;
break;
}
}
}
if (!foundMore) {
// No more hidden fields, hide the button
this.style.display = "none";
}
};
Live example
If you want to add more text boxes to a form at runtime when they aren't in the markup, you can easily do that:
var textBox = document.createElement('input');
textBox.type = "text";
textBox.name = "somename";
formElement.appendChild(textBox);
Live example
Usually the structure will be a bit more complex than that, but that's the general idea.
Off-topic: A lot of these things can be made dramatically easier by leveraging a JavaScript library like jQuery, Prototype, YUI, Closure, or any of several others. They'll smooth over browser differences and provide a lot of value-add functionality, so you can focus on what you're actually trying to do rather than browser quirks and such.