单个输入字段使用四个位置

Single input fields using to four place

本文关键字:四个 位置 输入 字段 单个      更新时间:2023-09-26

在我以前的代码有四个贷款类型。四个贷款类型值加载单个输入字段。这是我原来的UI。

<td width="20%">Type of Loan: </td>
    <td width="30%" >
      <input  type="radio" value="jumbo" name="loantype"  onClick="javascript:loanTypeChanged()"/>  Conforming/Jumbo<br />
      <input type="radio" value="fha" name="loantype" checked onClick="javascript:loanTypeChanged()"/>    FHA<br />
      <input type="radio" value="va" name="loantype" onClick="javascript:loanTypeChanged()" /> VA<br />
      <input type="radio" value="usda" name="loantype"  onClick="javascript:loanTypeChanged()" /> USDA<br />
    </td>

说明代码为四种贷款类型的代码。所有贷款类型加载值单个输入字段

前期MIP

现在我新的Ui设计四个贷款类型有每个输入字段如何使用这个输入字段四个贷款每个类型?

这是我的脚本:

function isNumeric(strString)
   //  check for valid numeric strings  
   {
   var strValidChars = "0123456789.-";
   var strChar;
   var blnResult = true;
   if (strString.length == 0) return false;
   //  test strString consists of valid characters listed above
   for (i = 0; i < strString.length && blnResult == true; i++)
      {
      strChar = strString.charAt(i);
      if (strValidChars.indexOf(strChar) == -1)
         {
          blnResult = false;
         }
      }
   return blnResult;
   }
function ficoChanged()
{
  //setDownPayment();
  getMIP("hh");
}
function loanTypeChanged()
{
  setDownPayment();
  getMIP("loantype"); //it must be set to loantype 
}
//always called by either change in loantype or change in fico 
function setDownPayment()
{
    if (userChangedDownPaymentPc_==true  || userChangedDownPaymentAmt_==true)
    {
        return;
    }
    //1. get selected loan type
    for (i=0;i<4;i++ )
    {
      if (document.forms['frmCalculator'].elements['loantype'][i].checked==true)
        {
          var loantype_=document.forms['frmCalculator'].elements.loantype[i].value;
          break;
        }
    }
    if (loantype_=="usda" || loantype_=="va")
    {
        document.forms['frmCalculator'].elements.downpaymentpc.value=0;
    }       
    else if (loantype_=="fha")
    {
        document.forms['frmCalculator'].elements.downpaymentpc.value=min_fha_down_payment;
    }
    else if (loantype_=="jumbo")
    {
        var ficorange_=document.forms['frmCalculator'].elements['ficorange'].value;
        var arr=ficorange_.split("-");
        if(arr[1] >= 720)
        document.forms['frmCalculator'].elements.downpaymentpc.value=min_jumbo_down_payment_1;
        else
        document.forms['frmCalculator'].elements.downpaymentpc.value=min_jumbo_down_payment_2;
    }
}

  function purchasePriceAmountChanged(fromuser_)
  {
      getMIP("hh");
      document.forms['frmCalculator'].elements.monthlypayment.value="";
  }
  function monthlyPaymentChanged(fromuser_)
  {
      document.forms['frmCalculator'].elements.purchaseprice.value="";
      document.forms['frmCalculator'].elements.upfrontmippc.value="";
      document.forms['frmCalculator'].elements.upfrontmipamt.value="";
      document.forms['frmCalculator'].elements.monthlymippc.value="";
      document.forms['frmCalculator'].elements.monthlymipamt.value="";
      document.forms['frmCalculator'].elements.ssmonthlymippc.value="";
      document.forms['frmCalculator'].elements.ssmonthlymipamt.value="";
  }
  function downPaymentAmountChanged(fromuser_)//true (if user changed  it) or false
  {
    if (document.forms['frmCalculator'].elements.downpaymentamt.value!="")
    {
     document.forms['frmCalculator'].elements.downpaymentpc.value="";         
     getMIP("hh");
    }
  }
  function downPaymentPcChanged(fromuser_)//true (if user changed  it) or false
  {
    if (document.forms['frmCalculator'].elements.downpaymentpc.value!="")
    {
     document.forms['frmCalculator'].elements.downpaymentamt.value="";         
     getMIP("hh");
    }
  }
 //   todo : CHANGE IT, ITS NOT WORKING ANYMORE
  function getLoanAmount()
  {
    var purchaseprice_=0;
    var downpayment_=0;
    var loanamount_=-1;
    var hasloan=false;
    if(document.forms['frmCalculator'].elements.downpaymentamt.value!="")
      {
        downpayment_=document.forms['frmCalculator'].elements.downpaymentamt.value;
      }
    else
      {
          hasloan=true;
      }
    if (document.forms['frmCalculator'].elements.purchaseprice.value!="")
      {
         purchaseprice_=document.forms['frmCalculator'].elements.purchaseprice.value;
      }
    else
      {
        hasloan=true;
      }
   if (hasloan==false)
      {
        loanamount_= purchaseprice_ - downpayment_ ;
      }
      return loanamount_;
  }

  function getPurchasePrice()
  {
     if (document.forms['frmCalculator'].elements.purchaseprice.value!="")
      {
         purchaseprice_=document.forms['frmCalculator'].elements.purchaseprice.value;
      }
      else
      {
         purchaseprice_=-1;
      }
    return purchaseprice_;
  }
  function upfrontMIPPcChanged(fromuser_)//true (if user changed  it) else false
  {
    userChangedUpfrontMIP=fromuser_;
    if (document.forms['frmCalculator'].elements.upfrontmippc.value !="")
      {
       document.forms['frmCalculator'].elements.upfrontmipamt.value="";
      }
  }
  function upfrontMIPAmountChanged(fromuser_)//true (if user changed  it) or false
  {
     userChangedUpfrontMIP=fromuser_;
     if (document.forms['frmCalculator'].elements.upfrontmipamt.value !="")
      {
       document.forms['frmCalculator'].elements.upfrontmippc.value="";
      }
  }
  function monthlyMIPPcChanged(fromuser_)//true (if user changed  it) else false
  {
     userChangedMonthlyMIP=fromuser_;
     if (document.forms['frmCalculator'].elements.monthlymippc.value !="")
      {
       document.forms['frmCalculator'].elements.monthlymipamt.value="";
      }
  }
  function monthlyMIPAmountChanged(fromuser_)//true (if user changed  it) or false
  {
     userChangedMonthlyMIP=fromuser_;
     if (document.forms['frmCalculator'].elements.monthlymipamt.value !="")
      {
       document.forms['frmCalculator'].elements.monthlymippc.value="";
      }
  }
  function ssmonthlyMIPPcChanged(fromuser_)//true (if user changed  it) else false
  {
     userChangedSSMonthlyMIP=fromuser_;
     if (document.forms['frmCalculator'].elements.ssmonthlymippc.value !="")
      {
       document.forms['frmCalculator'].elements.ssmonthlymipamt.value="";
      }
  }
  function ssmonthlyMIPAmountChanged(fromuser_)//true (if user changed  it) or false
  {
     userChangedSSMonthlyMIP=fromuser_;
     if (document.forms['frmCalculator'].elements.ssmonthlymipamt.value !="")
      {
       document.forms['frmCalculator'].elements.ssmonthlymippc.value="";
      }
  }
 function propertyTaxPcChanged(fromuser_)//true (if user changed  it) or false
  {
    if (document.forms['frmCalculator'].elements.propertytaxpc.value!="")
    {
     document.forms['frmCalculator'].elements.propertytaxamt.value="";
    }
  }

 function propertyTaxAmountChanged(fromuser_)//true (if user changed  it) or false
  { 
    if (document.forms['frmCalculator'].elements.propertytaxamt.value!="")
    {
     document.forms['frmCalculator'].elements.propertytaxpc.value="";
    }
  }
 function hazardInsurancePcChanged(fromuser_)//true (if user changed  it) or false
  {
    if (document.forms['frmCalculator'].elements.hazardinsurancepc.value!="")
    {
     document.forms['frmCalculator'].elements.hazardinsuranceamt.value="";
    }
  }
 function hazardInsuranceAmountChanged(fromuser_)//true (if user changed  it) or false
  { 
    if (document.forms['frmCalculator'].elements.hazardinsuranceamt.value!="")
    {
     document.forms['frmCalculator'].elements.hazardinsurancepc.value="";
    }
  }
 function melloRoosAmountChanged(fromuser_)//true (if user changed  it) or false
  { 
    if (document.forms['frmCalculator'].elements.melloroosfeeamt.value!="")
    {
     document.forms['frmCalculator'].elements.melloroosfeepc.value="";
    }
  }  
 function melloRoosPcChanged(fromuser_)//true (if user changed  it) or false
  { 
    if (document.forms['frmCalculator'].elements.melloroosfeepc.value!="")
    {
     document.forms['frmCalculator'].elements.melloroosfeeamt.value="";
    }
  }     
 function other1PcChanged(fromuser_)//true (if user changed  it) or false
  { 
    if (document.forms['frmCalculator'].elements.other1pc.value!="")
    {
     document.forms['frmCalculator'].elements.other1amt.value="";
    }
  } 
 function other1AmountChanged(fromuser_)//true (if user changed  it) or false
  { 
    if (document.forms['frmCalculator'].elements.other1amt.value!="")
    {
     document.forms['frmCalculator'].elements.other1pc.value="";
    }
  }       
 function other2PcChanged(fromuser_)//true (if user changed  it) or false
  { 
    if (document.forms['frmCalculator'].elements.other2pc.value!="")
    {
     document.forms['frmCalculator'].elements.other2amt.value="";
    }
  } 
 function other2AmountChanged(fromuser_)//true (if user changed  it) or false
  { 
    if (document.forms['frmCalculator'].elements.other2amt.value!="")
    {
     document.forms['frmCalculator'].elements.other2pc.value="";
    }
  }
 function other3PcChanged(fromuser_)//true (if user changed  it) or false
  { 
    if (document.forms['frmCalculator'].elements.other3pc.value!="")
    {
     document.forms['frmCalculator'].elements.other3amt.value="";
    }
  } 
 function other3AmountChanged(fromuser_)//true (if user changed  it) or false
  { 
    if (document.forms['frmCalculator'].elements.other3amt.value!="")
    {
     document.forms['frmCalculator'].elements.other3pc.value="";
    }
  }
  function secondsChanged()
  {
    getMIP("hh");
  }

please Help me ?我累了复制输入粘贴四个位置它显示相同的值四个位置?

你可以利用jQuery来缩减你的代码,使它更简洁。

$('input[name=loantype]').on('change', function() {
    var loanAmount = +$(this).closest('tr').prev().find('input[name=' + this.value + ']').val();
    console.log( this.value, loanAmount );
    //other code
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td width="20%">Loan Values: </td>
    <td>Jumbo: <input name="jumbo" type="number"/></td>
    <td>FHA: <input name="fha" type="number"/></td>  
    <td>VA: <input name="va" type="number"/></td>
    <td>USDA: <input name="usda" type="number"/></td>
  </tr>
  <tr>
  <td width="20%">Type of Loan: </td>
      <td><input  type="radio" value="jumbo" name="loantype"/>  Conforming/Jumbo</td>
      <td><input type="radio" value="fha" name="loantype"/>    FHA</td>
      <td><input type="radio" value="va" name="loantype"/> VA</td>
      <td><input type="radio" value="usda" name="loantype"/> USDA</td>
    </td>
  </tr>
</table>