I've experienced some code of enable/disable multiple html element by javascript:
<script type="text/javascript">
function enableDisable(bEnable, text_no1, text_no2, opt_no1, opt_no2){
document.getElementById(text_no1).disabled = !bEnable
document.getElementById(text_no2).disabled = !bEnable
document.getElementById(opt_no1).disabled = !bEnable
document.getElementById(opt_no2).disabled = !bEnable
}
</script>
<label for="toggler"><input type="checkbox" id="toggler" autocomplete="off"
checked="false"
onclick="enableDisable(this.checked, 'text_no1','text_no2','opt_no1','opt_no2')";>
Toggler</label>
<br>
<input type="text" name="text_no1"><br>
<input type="text" name="text_no1"><br>
<select name="opt_no1">
<option>1</option>
</select>
<select name="opt_no2">
<option>1</option>
</select>
I made a simple script of what you are trying to achieve.
(Tested in Chrome 21, Firefox 14, Internet Explorer 9)
The JavaScript
function Switch() {
var checkbox = document.getElementById("Switch")
var val = checkbox.checked
document.getElementById("textbox").disabled = val
}
The HTML
<input type="checkbox" id="Switch" onChange="Switch()" />Disable/Enable
<br />
<input type="text" id="textbox"/>
Live Example: http://jsfiddle.net/jHVNE/1/
I'll guess that your issue is that "it doesn't work", that is, that the elements aren't disabled. That is partly because you are using getElementById to access elements that don't have an ID attribute (though likely it works in IE since it thinks IDs and names are the same thing).
You can either change the name attributes to ID attributes (since you aren't using a form that shouldn't be an issue), or keep the names and put the controls in a form, then access them as named properties of the form.
Edit
There are a couple of errors and omissions in your code:
The checked attribute does not have a value, it's a boolean attribute whose presence indicates "true" and absence is "false", so …checked="false"… is true and checks the checkbox.
There are two inputs with a name of *text_no1*
It seems checking the checkbox should enable the controls, the label should indicate that.
Using a form makes life easier to access form controls
Some working code:
<script type="text/javascript">
function enableDisable(el) {
var f = el.form;
var bEnable = el.checked;
if (!f) return; // Stop if form not found
for (var i=1, iLen=arguments.length; i<iLen; i++) {
f[arguments[i]].disabled = !bEnable;
}
}
</script>
<form>
<label for="toggler">
<input type="checkbox" id="tggler" name="toggler" autocomplete="off" checked
onclick="enableDisable(this, 'text_no1','text_no2','opt_no1','opt_no2')";>
Controls enabled</label>
<br>
<input name="text_no1"><br>
<input name="text_no2"><br>
<select name="opt_no1">
<option>1
</select><br>
<select name="opt_no2">
<option>2
</select>
</form>
Related
I made 2 input fields and 1 select field and I applied onchange() function to select tag which calls javascript and that script make calculation and show it in other two fields
but it is not working for some syntax or logic reasons. please take a look at my code ,any help would be appreciated.
<html>
<head>
<script type="text/javascript">
function update() {
var x = document.getElementsByName("n_person").value;
document.getElementsByName("m_income").value= x*5;
document.getElementsByName("y_income").value= x*4;
}
</script>
</head>
<body>
<div class="elist"> <span class="b_text"><span>*</span>Level 1:</span>
// here is select tag where I put onchage function <select class="ifield" name="n_person" onChange="update()">
<option value="" selected="selected">Choose no. of person referred</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
// These are teh input where resultant value will appear <input type="text" value="" placeholder="Your weekly Income..." name="m_income" id="weekly_income" class="field" readonly required />
<input type="text" value="" placeholder="Your day Income..." name="y_income" id="day_income" class="field" readonly required/>
</div>
<!--elist-->
</body>
</html>
See this fiddle
Updated JS
function update() {
var x = document.getElementsByName("n_person")[0].value;
document.getElementsByName("m_income")[0].value = x * 5;
document.getElementsByName("y_income")[0].value = x * 4;
}
The problem with your JS was you was not targetting the correct HTML elements using getElementsByName.
Please read more about it here
The method getElementsByName returns, as its name indicates, a list of elements with the specified name and not just one. In your case, the names are unique to the document and the method will return a list with just one value, but you'll still need to index this list. Therefore, you must change this:
var x = document.getElementsByName("n_person").value;
to
var x = document.getElementsByName("n_person")[0].value;
Do this also for the other uses of getElementsByName and your code will work.
My Javascript function checks for radio button selection and displays the appropriate drop down box. but this code is not generic, i tried using "this" but it doesn't help.. can this actually be generic?
CODE:
function change(s)
{
if(document.getElementById("viewstate").checked==true)
{
document.getElementById("state").style.display="inline";
document.getElementById("cat").style.display="none";
}
else
{
document.getElementById("state").style.display="none";
if(document.getElementById("viewcat").checked==true)
{
document.getElementById("cat").style.display="inline";
}
else
document.getElementById("cat").style.display="none";
}
}
Front end radio button
<input type="radio" name="viewrecord" value="viewstate" onchange="change('state')" required="" id="viewstate"> View by State
<select name="stat" id="state" style="display:none;">
<option selected disabled>Select State</option>
<input type="radio" name="viewrecord" value="viewcat" required="" onchange="change('cat')" id="viewcat">View By Agency
<select id="cat" name="che" style="display:none" required="">
You can try with this snippet
JS
document.addEventListener('click',function(event){
var tar = event.target.id;
if(tar ==="viewstate"){
document.getElementById("state").style.display="inline";
document.getElementById("cat").style.display="none";
}
else if(tar==="viewcat"){
document.getElementById("state").style.display="none";
document.getElementById("cat").style.display="inline";
}
},false)
WORKING COPY
What else I tried?
My primary idea was to add a class to next select tag. For example if you select radio#viewstate it will add a class to closest select element. Then just loop through all the select tag and whoever dont have this class , hide them.
But since you are using display:none nextSibling will not work.For why nextSibling wont work you can take a look at difference between it visibility:hidden
Also note in the demo that I have used label tag with input
If by generic you mean to make the function to be able to work for any similar selection process without depending on the hard-coded values of the selection inputs, this is one way I thought of doing it :
function change(selectorId, selectorClass) {
// Get all the selector elements you use.
var rS = document.getElementsByClassName( selectorClass );
// Out of the elements you fetched above, make the one with
// id = selectorId visible, rest hidden.
for(var i = 0; i < rS.length; ++i)
rS[i].style.display = (rS[i].id == selectorId) ? "inline" : "none";
}
In the HTML part add a class to every select input you want to use with the radio values:
<input type="radio" name="viewrecord" value="viewstate" onchange="change('state', 'record-selector')" required="" id="viewstate"> View by State
<select class='record-selector' name="stat" id="state" style="display:none;">
<option selected disabled>Select State</option>
<input type="radio" name="viewrecord" value="viewcat" required="" onchange="change('cat', 'record-selector')" id="viewcat">View By Agency
<select class='record-selector' id="cat" name="che" style="display:none" required="">
With this you can use the same function for similar selection process on different forms.
It seems that when an input or select is disabled in angularjs, the model value remains the same. My problem is that this is not the same as native form behaviour in HTML, and that I have to invoke some extra behaviour via an ng-change scope method in order to get the proper behaviour, which is for the value to be set to null if the input or select input is disabled.
Here is my example:
<div ng-app="myApp">
<select ng-disabled="disableIt" ng-model="data">
<option>1</option>
<option>2</option>
</select>
<input type="text" ng-model="textData" ng-disabled="disableIt" />
<br />
<input type="checkbox" ng-model="disableIt"/>
<br />
Select Data: {{selectData}}
<br/>
Text Data: {{textData}}
</div>
<script>
var myApp = angular.module('myApp',[]);
myApp.run(function($rootScope){
$rootScope.selectData = 1;
$rootScope.textData = "test";
});
</script>
You can test it out on jsfiddle here: http://jsfiddle.net/9wbtnhno/1/
The desired result is for the textData and selectData models to be null when disabled.
I have this form with Yes or No question in a radio button style to indicate whether such form has been filled out and submitted before. I want to disable this form using Javascript if the answer is "yes", per user's answer.
The "yes" would indicate that the form has already been submitted before and therefore re-filling out of the form is not allowed. This is to attempt to stop double or multiple submission.
Any advise will be greatly appreciated.
Dawn26
I might use an onchange function attached to the "Yes" radio button to either hide the form or remove it from the page altogether. Your markup might look similar to this:
<form id="formId">
<input type="radio" value="Yes" onchange="YourClass.disableForm()"/>
...
</form>
And the javascript:
var YourClass = function() {
return {
disableForm : function() {
document.getElementById("formId").setAttribute("style", "display: none;");
}
};
}();
You can create a function that disables all form controls other than the checkbox based on whether it's selected or not. This doesn't stop duplicate submission, so you will still need to handle that at the server. You can also hide the controls if you like, but just disabling them is probably sufficient.
You may also want to put up a message to explain why the form controls are disabled.
function checkDisabled(target) {
var form = target.form;
var elements = form.elements;
var disable = target.checked;
// Check every control in the form
for (var i=0, iLen=elements.length; i<iLen; i++) {
// Don't disable the checkbox
if (elements[i] != target) {
// Disable (or not) based on whether checkbox is checked
elements[i].disabled = disable;
}
}
}
Some test markup:
<label for="dateTime">Date and time<input id="dateTime" name="dateTime">
<br>
<span class="screenTip">YYYY-MM-DD hh:mm:ss</span>
</label>
<form>
Have you submitted this form before?
<input type="checkbox" name="hasBeenSubmitted" value="1" onclick="checkDisabled(this)">
<br>
Foo: <input type="text" name="foo">
<br>
Bar: <input type="text" name="bar">
<br>
<input type="submit">
</form>
I have the following code:
<fieldset id="dificuldade">
<legend>Dificuldade:</legend>
<input type="radio" name="dificuldade" value="facil"> Fácil </input>
<input type="radio" name="dificuldade" value="medio"> Médio </input>
<input type="radio" name="dificuldade" value="dificil"> Difícil </input>
</fieldset>
<fieldset id="tipo">
<legend>Tipo de jogo:</legend>
<input type="radio" name="Tipodejogo" value="somar"> Somar </input>
<input type="radio" name="Tipodejogo" value="subtrair"> Subtrair </input>
<input type="radio" name="Tipodejogo" value="dividir"> Dividir </input>
<input type="radio" name="Tipodejogo" value="multiplicar"> Multiplicar </input>
</fieldset>
<input type="button" value="Começa" id="button" ></input>
</form>
and here is the jsfiddle with both the html and the js http://jsfiddle.net/3bc9m/15/ . I need to store the values of the 2 fieldset so I, depending on the values picked can generate a game, but my javascript isn't returning any of them. What is wrong? I've been told that JQuery is much easier but i can't use it.
Your code on jsFiddle seems to be working fine for the most part. The only thing was that the elements output and output2 don't exist on the page.
So this code that was supposed to display the selected values wasn't working:
document.getElementById('output').innerHTML = curr.value;
document.getElementById('output2').innerHTML = tdj.value;
The part that actually retrieves the selected values is working fine.
Just add those two elements to the page, like this:
<p>Selected Values:</p>
<div id="output"></div>
<div id="output2"></div>
An updated jsFiddle can be found here.
EDIT
If a radio button from only one of the sets is selected, the code fails. You could use this code to find the selected values instead:
document.getElementById('button').onclick = function() {
var dif = document.getElementsByName('dificuldade');
var tip = document.getElementsByName('Tipodejogo');
var difValue;
for (var i = 0; i < dif.length; i++) {
if (dif[i].type === "radio" && dif[i].checked) {
difValue = dif[i].value;
}
}
var tipValue;
for (var i = 0; i < tip.length; i++) {
if (tip[i].type === "radio" && tip[i].checked) {
tipValue = tip[i].value;
}
}
document.getElementById('output').innerHTML = difValue;
document.getElementById('output2').innerHTML = tipValue;
};
An updated jsFiddle is here.
Consider this post that adresses the issue. It shows a few javascript methods as well as how you would use it in jQuery.
How can I check whether a radio button is selected with JavaScript?
Is there a specific reason you want to break it down by fieldset instead of directly accessing the radio buttons by name?