Fatal编程技术网
  • javascript/
  • 选择下拉列表后，使用Javascript和AJAX禁用特定的文本字段

选择下拉列表后，使用Javascript和AJAX禁用特定的文本字段

javascript html ajax

选择下拉列表后，使用Javascript和AJAX禁用特定的文本字段,javascript,html,ajax,Javascript,Html,Ajax,我试图在使用Javascript和AJAX选择特定下拉项后禁用某些文本字段。 我的HTML代码如下： <html> <li> <span class="label">Rate Type: </span> <label class="alignleft"> <select class="customSelect"name="Rate" onChange="findSelecte

我试图在使用Javascript和AJAX选择特定下拉项后禁用某些文本字段。 我的HTML代码如下：

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

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;
    }
}
我肯定我做错了什么，如果不是很多的话。 请让我知道。
谢谢

您的问题是Iint、Ipay和IIntsim没有引用要更改的DOM元素。尝试将代码更改为：

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

您的问题是Iint、Ipay和IIntsim没有引用要更改的DOM元素。尝试将代码更改为：

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

尝试以下方法：

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

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

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;
  }
}
演示：

尝试以下方法：

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

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

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;
  }
}
演示：

完整代码应如下所示：

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

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

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;
  }
}
但是，正如其他人所建议的，使用JQuery将使代码更简单、更易于维护，并为您提供诸如实时绑定之类的选项，这些选项在应用程序开发过程中可能会很有用。

完整的代码应该如下所示：

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

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

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;
  }
}
但是，正如其他人所建议的，使用JQuery将使代码更简单、更易于维护，并为您提供诸如实时绑定之类的选项，这些选项在应用程序开发过程中可能会很有用。

您不能将onclick事件放在select的选项上-您需要挂接到select的onchange事件中

您还需要为每个选项指定一个值，例如

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

变量
基本上，您启动“onchange”，然后检查下拉列表中选择的项目，并决定在您的函数中执行什么操作（请注意，您只是传递了这个，而不是这个.form1.Rate）：


功能更改（下拉列表）
{
var myindex=dropdown.selectedIndex
var SelValue=下拉列表。选项[myindex]。值
//现在您知道选择了哪个值，可以测试它并调用disableField
如果（SelValue=='variable'）{disableField（）；}
}
看看这个：

您不能将onclick事件放在select的选项上-您需要挂接到select的onchange事件

您还需要为每个选项指定一个值，例如

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

变量
基本上，您启动“onchange”，然后检查下拉列表中选择的项目，并决定在您的函数中执行什么操作（请注意，您只是传递了这个，而不是这个.form1.Rate）：


功能更改（下拉列表）
{
var myindex=dropdown.selectedIndex
var SelValue=下拉列表。选项[myindex]。值
//现在您知道选择了哪个值，可以测试它并调用disableField
如果（SelValue=='variable'）{disableField（）；}
}
看看这个：

好吧，首先，您缺少包装
，以及
，然后您可能也需要一个
。我的意思是HTML现在是无效的。为什么有一个jquery标记而只有原始javascript？使用jquery时，这将少很多代码。html很奇怪。。缩进很可怕。。但你看起来是个好人……）为什么问题标签中有jquery？您正在使用jquery处理这个问题吗？事实上，这会让事情变得简单得多！很抱歉，我一定是下意识地添加了JQuery标记。另外，我删掉了很多HTML，我为这一混乱表示歉意。另外，我为可怕的缩进表示歉意，StackOverflow将其作为真正的HTML阅读。我的道歉。哈哈，为连接的帖子道歉。当我编辑它时，它看起来好多了：嗯，首先，你缺少了包装
，还有
，然后你可能也想要一个
。我的意思是HTML现在是无效的。为什么有一个jquery标记而只有原始javascript？使用jquery时，这将少很多代码。html很奇怪。。缩进很可怕。。但你看起来是个好人……）为什么问题标签中有jquery？您正在使用jquery处理这个问题吗？事实上，这会让事情变得简单得多！很抱歉，我一定是下意识地添加了JQuery标记。另外，我删掉了很多HTML，我为这一混乱表示歉意。另外，我为可怕的缩进表示歉意，StackOverflow将其作为真正的HTML阅读。我的道歉。哈哈，为连接的帖子道歉。当我编辑它时，它看起来好多了：PI逐字逐句地替换了Javascript代码。不幸的是，它仍然功能失调。我相信您刚刚解决了许多错误中的一个：P。这是我使用HTML/Javascript的第一天。谢谢你容忍我！正如其他人提到的，您的HTML需要一些工作，因为它不符合HTML标准，并且一些浏览器无法正确呈现它。如果您使用的是Internet Explorer，您可能会看到一条警告消息，提示您阻止网页运行脚本或Active X控件-您需要选择“是”让代码运行。完整代码见下面的答案（您只需要将javascript函数放在标记中的标记之间）。不幸的是，它仍然功能失调。我相信您刚刚解决了许多错误中的一个：P。这是我使用HTML/Javascript的第一天。谢谢你容忍我！正如其他人提到的，您的HTML需要一些工作，因为它不符合HTML标准，并且一些浏览器无法正确呈现它。如果您使用的是Internet Explorer，您可能会看到一条警告消息，提示您阻止网页运行脚本或Active X控件-您需要选择“是”让代码运行。请参阅下面的答案和完整代码（您只需要将javascript函数放在标记中的标记之间）？输入的名称？类？你用.prop（）做的事情这里有一行非常漂亮的代码+1此外，还有多个输入。因此，我是否必须将$inputs视为数组或其他东西？@James Graham，我只需在所有将被禁用的输入中添加一个类，并针对那些像
var$inputs=$（'input.myclass'）
I现在有：var$inputs=$（'input.textfie'）这样的输入