CODEWITHSUNDEEP
javascripthtmlajax
James Graham
James Graham

Reputation: 480

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

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!

Upvotes: 0

Views: 5206

Answers (4)

Ian Andrew Irwin
Ian Andrew Irwin

Reputation: 175

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

Upvotes: 1

SimonF
SimonF

Reputation: 2715

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.

Upvotes: 0

elclanrs
elclanrs

Reputation: 94101

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

Upvotes: 3

SimonF
SimonF

Reputation: 2715

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;
}

}

Upvotes: 2

Related Questions