Dis/enabling textboxes

JavaScript
1

How can I make it so that if the “Rental” type or “Sale” type is selected (from the select box), only the corresponding inputs text box will become non-disabled

773×113 13.1 KB

Heres my javascript

function findType() {
var dropdown = document.getElementById("type");
var rental = document.getElementById("rent");
var sale = document.getElementById("sale");

if(dropdown.value = 0) {
	rental.disabled = true;
} else {
	sale.disabled = false;
}
}

then
onChange=“findType()”

I have this on the select box.

2

Should be:

if (dropdown.value === 0) {
   rental.disabled = true;
   sale.disabled = false;
} else {
    rental_disabled = false;
    sale.disabled = true;
}
3

I must’ve messed something up, heres the select box

    <select name="type" id="type" class="form-control" onChange="findType()">
    <option value="1">Rental</option>
    <option value="2">Sale</option>
    </select>

And heres my script

<script type="text/javascript">

function findType() {
var dropdown = document.getElementById("type");
var rental = document.getElementById("rent");
var sale = document.getElementById("sale");

if (dropdown.value === 2) {
   rental.disabled = true;
   sale.disabled = false;
} else {
	rental_disabled = false;
	sale.disabled = true;
}
}
</script>

Here are the two disabled text boxes

	<input type="number" name="sale" class="form-control" id="sale" disabled>
<input type="number" name="rent" class="form-control" id="rent" disabled>
4

I assume @felgall meant rental.disabled rather than rental_disabled.

5

yes I did.

6

thanks

7

I think im messsing up cause it doesn’t work, heres my select box

<select name="type" id="type" class="form-control" onChange="findType()">
    <option value="1">Rental</option>
    <option value="2">Sale</option>
</select>

Is it ok that I used the onchange event to call the fuunction and its value is either 1 or 2?

Heres the function

function findType() {
var dropdown = document.getElementById("type");
var rental = document.getElementById("rent");
var sale = document.getElementById("sale");

 if (dropdown.value === 2) {
       rental.disabled = true;
       sale.disabled = false;
 } else {
	rental.disabled = false;
	sale.disabled = true;
}
}

And heres the 2 text boxes (currently disabled) whose ids correspond to the variables

<input type="number" name="sale" class="form-control" id="sale" disabled>
<input type="number" name="rent" class="form-control" id="rent" disabled>
8

dropdown.value === 2

is always false because forms pass strings and not numbers. The select always returns ‘1’ or ‘2’ and never 1 or 2

2 !== '2'

Also your code will be easier to maintain if you stop jumbling the JavaScript with the HTML. Get rid of the onChange in the HTML and add the following line of JavaScript instead.

var dropdown = document.getElementById('type').onchance = findtype;
9

Im tryintg, but it still doesnt seem to be working (each text box does not seem to get undisabled.
I only have the select box and got rid of the onchange event thing.

Heres the script

var dropdown = document.getElementById('type').onchange = findType();
var rental = document.getElementById('rent');
var sale = document.getElementById('sale');

function findType() {
    if (dropdown.option.value === '2') {
       rental.disabled = true;
       sale.disabled = false;
    } else {
	rental.disabled = false;
	sale.disabled = true;
    }
}

So The first variable ids the select box and calls the function whenever a selection is made (did you have some typos in yours?
The last 2 vars id each of the text boxes
Then the function disable/enables the selected text box.

10

Should be two commands and don’t run the function before attaching it:

var dropdown = document.getElementById('type');
dropdown.onchange = findType;
11

the toggling stil isnt working, heres the script

var dropdown = document.getElementById('type');
dropdown.onchange = findType;

var rental = document.getElementById('rent');
var sale = document.getElementById('sale');

function findType() {

if (dropdown.option.value === '2') {
       rental.disabled = true;
       sale.disabled = false;
 } else {
	rental.disabled = false;
	sale.disabled = true;
  }
}

this is the only thing i need?

The select box only requires an id (no onchange thing) as the script takes care of that?

12 
<form>
<select name="type" id="type" class="form-control">
  <option value=""> </option> 
    <option value="1">Rental</option>
    <option value="2">Sale</option>
    </select>
<input type="number" name="sale" class="form-control" id="sale" disabled>
<input type="number" name="rent" class="form-control" id="rent" disabled>
  </form>
  <script>
    var dropdown = document.getElementById('type');
dropdown.onchange = findType;

var rental = document.getElementById('rent');
var sale = document.getElementById('sale');

function findType() {

if (dropdown.value === '2') {
       rental.disabled = true;
       sale.disabled = false;
 } else {
	rental.disabled = false;
	sale.disabled = true;
  }
}
  </script>

Note that this code has been tested and works.

13

"In all browsers an attribute node whose value evaluates to a boolean (such as disabled) can only be set to true — setting it to false has no effect. This is correct behavior, and is because such attributes should only have one possible value (eg. disabled=“disabled”), or are not defined (so negating them should be done with removeAttributeNode). In Opera 9.5, Firefox and Safari the attribute value will subsequently return as false but the element will still be disabled, in Opera 9.0 the value will continue to return as disabled, and in Internet Explorer the value will continue to return as boolean true; these are accurate reflections of the state of the element, even if they are a little confusing! However since IE considers these attributes to have an actual boolean value, the value can be toggled (and the element disabled and enabled accordingly) by setting it as a boolean rather than a string:

attr.nodeValue = false;
element.setAttributeNode(attr);" ```

It sounds to me like the difference between an HTML attribute (what you've got written into your HTML code) and a property. A lot of them overlap in Javascript, but with form controls it really matters.
Your attribute isn't changing, like when people try to change someCheckBox.attr('checked') in jQuery, not realising that checked attributes map to a defaultChecked attribute, which doesn't change after load. The checked *property*, however, changes when users click it.
14

thanks