Once Drop Down is Selected, Disable specific text fields using Javascript and AJAX

Question

I am trying to disable certain text fields once a specific drop down item as been selected utilizing Javascript and AJAX. My HTML code is as follows:

<html>
    <li>
        <span class="label">Rate Type: </span>
        <label class="alignleft">
        <select class="customSelect"name="Rate" onChange="findSelected()" id="Rate2">                           
            <option>Fixed</option>
            <option>Fixed</option>
            <option value="variable">Variable</option>
        </select>
    </label>    
    </li>
    <li>
        <span class="label">Mortgage Interest Rate :</span>
        <label class="alignleft"><span class="percent">%</span><input type="text" class="textfield" value=5 name="Iint"/></label>
    </li>
    <li>
        <span class="label multiline">Amount Borrower want to repay: </span>
        <label class="alignleft"><input type="text" class="textfield" value=10000 name="Ipay"/></label>
    </li>
    <li>
        <span class="label multiline">Posted Interest Rate for Similar Mortgages</span>
        <label class="alignleft"><span class="percent">%</span><input type="text" class="textfield" value=3 name="Iintsim"/></label>
    </li>
    <li>
        <span class="label">Mortgage Interest Rate :</span>
        <label class="alignleft twofield"><strong class="percent">%</strong><input type="text" class="textfield" value=1.30 Name="Mint" /></label>
    </li>

</html>

My Javascript code is as follows:

function findSelected(){ 
    var xhttpr = new XMLHttpRequest();
    // xhttpr.open("GET","index.html",true);

    // xmlhttp.send();
    var rate= document.getElementById('Rate2'); 
    var variable = document.getElementById('variable'); 
    if(rate.value == "variable"){
        alert("hi");
        Iint.disabled=false;
        Ipay.disabled=false;
        Iintsim.disabled=false;

    } else {
        Iint.disabled=true;
        Ipay.disabled=true;
        Iintsim.disabled=true;
    }
}

I'm sure I am doing something, if not many, things wrong. Please let me know. Thanks!

Well, to start, you're missing the wrapping <ul>, and the <body> and then probably you'd want a <head> too. I mean that HTML is just not valid as it is right now. — elclanrs
– elclanrs, Commented Sep 15, 2012 at 23:17
why is there a jquery tag but only raw javascript? this would be alot less code with jquery. the html is bizzare.. indenting is horrible.. but you seem like a nice guy.. :) — Gung Foo
– Gung Foo, Commented Sep 15, 2012 at 23:22
Why do you have jquery in your question tags? Are you using jquery with this? It will make it a lot simpler actually! — Hazem Salama
– Hazem Salama, Commented Sep 15, 2012 at 23:25
I apologize, I must have subconsciously added that JQuery tag. Additionally, I cut a lot of HTML out, my apologies for the confusion. Also, I apologize for the horrendous indenting, StackOverflow was reading it as real HTML. My apologies. — James Graham
– James Graham, Commented Sep 15, 2012 at 23:39
Haha, apologies for the concatenated post. It looked a lot better when I was editing it :P — James Graham
– James Graham, Commented Sep 16, 2012 at 2:13

elclanrs · Accepted Answer · 2012-09-16 02:40:54Z

3

Try with something like this:

var $inputs = $('input'); // collection of inputs to disable
$('select').change(function(){
  $inputs.prop('disabled', $(this).val() === 'Variable');
});

Demo: http://jsbin.com/udimos/1/edit

edited Sep 16, 2012 at 2:40

answered Sep 16, 2012 at 2:19

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

James Graham Over a year ago

What should I substitute input with? The name of the input? The class?

Gung Foo Over a year ago

that thing you did with .prop() here is a pretty pretty line of code. +1

James Graham Over a year ago

Additionally, there are multiple inputs. Therefore, would I have to treat $inputs as an array or something?

elclanrs Over a year ago

@James Graham, I would just add a class to all the inputs that are going to be disabled and target those like var $inputs = $('input.myclass')

James Graham Over a year ago

I now have: var $inputs = $('input.textfield'); $('select').change(function(){ $inputs.prop('disabled', $(this).val() == 'Variable');}); It still isn't working unfortunately. I'm sure it's starting my right in the face. I apologize.

|

SimonF · Accepted Answer · 2012-09-15 23:25:01Z

2

Your problem is that Iint, Ipay and IIntsim don't reference the DOM elements you want to change. Try changing the code to:

function findSelected(){ 
var rate= document.getElementById('Rate2'); 
var variable = document.getElementById('variable'); 
if(rate.value == "variable"){
      alert("hi");
     document.getElementById('Iint').disabled=false;
     document.getElementById('Ipay').disabled=false;
     document.getElementById('Iintsim')disabled=false;

} else {

     document.getElementById('Iint').disabled=true;
     document.getElementById('Ipay').disabled=true;
     document.getElementById('Iintsim').disabled=true;
}

}

answered Sep 15, 2012 at 23:25

SimonF

2,7752 gold badges17 silver badges14 bronze badges

2 Comments

James Graham Over a year ago

I replaced the Javascript code word-for-word verbatim. Unfortunately it is still dysfunctional. I'm sure you just solved one of the many errors :P. This is my first day with HTML/Javascript. Thanks for bearing with me!

SimonF Over a year ago

As others have mentioned, your HTML needs some work as it isn't compliant with HTML standards and some browsers won't render it correctly. If you are using Internet Explorer, you may see a warning message about it blocking the webpage from running scripts or Active X controls - you need to choose "Yes" to let the code run. See answer below with the full code (you just need to put the javascript function between <script></script> tags within the <html></html> tags).

Ian Andrew Irwin · Accepted Answer · 2012-09-17 02:45:22Z

You can't put an onclick event on an option of a select - you need to hook into the onchange event of the select instead.

You will also need to give each option a value, e.g.

<option value="variable">Variable</option>

Basically, you fire "onchange" and then check which item is selected in the dropdown and decide what to do within your function (note that you just pass this, not this.form1.Rate):

<select class="customSelect" name="Rate" onchange="javascript:OnChange(this);">


function OnChange(dropdown)
{
var myindex  = dropdown.selectedIndex
var SelValue = dropdown.options[myindex].value
//now you know which value is selected, you can test it and call your disableField
if(SelValue=='variable'){disableField();}  
}

have a look at this: http://www.codeproject.com/Articles/656/Using-JavaScript-to-handle-drop-down-list-selectio

SimonF · Accepted Answer · 2012-09-16 13:08:45Z

The full code should look like this:

<html>
  <body>
    <ul>
      <li>
        <span class="label">Rate Type: </span>
        <label class="alignleft">
          <select class="customSelect"name="Rate" onChange="findSelected()" id="Rate2">                           
            <option>Fixed</option>
            <option>Fixed</option>
            <option value="variable">Variable</option>
          </select>
        </label>    
      </li>
      <li>
        <span class="label">Mortgage Interest Rate :</span>
        <label class="alignleft"><span class="percent">%</span><input type="text" class="textfield" value=5 id="Iint"/></label>
      </li>
      <li>
        <span class="label multiline">Amount Borrower want to repay: </span>
        <label class="alignleft"><input type="text" class="textfield" value=10000 id="Ipay"/></label>
      </li>
      <li>
        <span class="label multiline">Posted Interest Rate for Similar Mortgages</span>
        <label class="alignleft"><span class="percent">%</span><input type="text" class="textfield" value=3 id="Iintsim"/></label>
      </li>
      <li>
        <span class="label">Mortgage Interest Rate :</span>
        <label class="alignleft twofield"><strong class="percent">%</strong><input type="text" class="textfield" value=1.30 Name="Mint" /></label>
      </li>
    </ul>
  </body>
</html>

and the function should look like this:

function findSelected(){ 
  var rate= document.getElementById('Rate2'); 
  var variable = document.getElementById('variable'); 
  if(rate.value == "variable"){
    alert("hi");
    document.getElementById('Iint').disabled=false;
    document.getElementById('Ipay').disabled=false;
    document.getElementById('Iintsim').disabled=false;    
  } else {
    document.getElementById('Iint').disabled=true;
    document.getElementById('Ipay').disabled=true;
    document.getElementById('Iintsim').disabled=true;
  }
}

As others have suggested though, using JQuery would make the code simpler and easier to maintain and give you options such as live binding, which could be useful as your application develops.

Collectives™ on Stack Overflow

Once Drop Down is Selected, Disable specific text fields using Javascript and AJAX

4 Answers 4

7 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related