Aktivieren Sie das Optionsfeld, wenn

Question

Ich möchte ein Optionsfeld abhängig von einem Eingabefeld auswählen. Dies scheint sehr einfach, aber es funktioniert nicht. Grundsätzlich füllt ein Benutzer ein Formular aus und wählt abhängig vom Eingabefeld für den Status den Radioknopf für die staatliche Steuer aus.

Der folgende Code feuert nicht aus irgendeinem Grund, irgendeine Idee?

Das Eingabefeld

<div class="form-group"> 
<label for="state" class="col-sm-3 control-label">State</label> 
    <div class="col-sm-9"> 
    <input type="text" class="form-control" id="state" name="state" placeholder="State" onblur="picktax();" required /> 
    </div> 
</div> 

Der Radiobutton

<div class="form-group"> 
<label for="emailaddress" class="col-sm-3 control-label">Tax</label> 
<div class="col-sm-9"> 
    <br> 
    <div class="col-sm-9"> 
     <label class="checkbox-inline"> 
      <input type="radio" class="px" name="tax2" id="radio1" class="radio" value="0"//> 
      <span class="lbl">Tax Exempt</span> 
     </label> 
     <br> 
    </div> 
    <div class="col-sm-9"> 
     <label class="checkbox-inline"> 
      <input type="radio" class="px" name="tax2" id="radio2" class="radio" value="0.0875" /> 
      <span class="lbl">NYC 8.875%</span> 
     </label> 
     <br> 
    </div> 
    <div class="col-sm-9"> 
     <label class="checkbox-inline"> 
      <input type="radio" class="px" name="tax2" id="radio3" class="radio" value="0.08625" /> 
      <span class="lbl">LI 8.625%</span> 
     </label> 
     <br> 
    </div> 
    <div class="col-sm-9"> 
     <label class="checkbox-inline"> 
      <input type="radio" class="px" name="tax2" id="radio4" class="radio" value="0.07" /> 
      <span class="lbl">NJ 7%</span> 
     </label> 
     <br> 
    </div> 
    <div class="col-sm-9"> 
     <label class="checkbox-inline"> 
      <input type="radio" class="px" name="tax2" id="radio5" class="radio" value="0.06" /> 
      <span class="lbl">Philly 6%</span> 
     </label> 
     <br> 
    </div> 
    <div class="col-sm-9"> 
     <label class="checkbox-inline"> 
      <input type="radio" class="px" name="tax2" id="radio6" class="radio" value="0.0635" /> 
      <span class="lbl">CT 6.35%</span> 
     </label> 
     <br> 
    </div> 
</div> 

Das Skript

<script> 
function picktax() { 

var statevalue = document.getElementById('state').value; 
var nyvalue = "NY"; 
var livalue = "LI"; 
var njvalue = "NJ"; 

if (statevalue == nyvalue) { 

$("#radio2").prop("checked", true) 

} elseif (statevalue == livalue) { 

$("#radio3").prop("checked", true) 

} elseif (statevalue == njvalue) { 

$("#radio4").prop("checked", true) 


} else { 

alert("test"); 
} 

} 
</script> 

aktualisiert, nicht noch

Brennen

Answer 1

Ihr Beispiel zeigt, dass Sie JavaScript neu sind so während ich es nicht ganz wie dieser Code würde ich hier Ihr Code korrigierte genug zu arbeiten.

Wie in den Kommentaren erwähnt gibt es kein elseif Schlüsselwort in JS und Sie müssen doppelt oder dreifach gleich Operator für die Auswertung verwenden.

Nichtsdestoweniger, Sie waren in der Nähe von etwas Machbarem.

function picktax() { 
 

 
var statevalue = document.getElementById('state').value; 
 
var nyvalue = "NY"; 
 
var livalue = "LI"; 
 
var njvalue = "NJ"; 
 

 
if (statevalue == nyvalue) { 
 

 
$("#radio2").prop("checked", true) 
 

 
} else if (statevalue == livalue) { 
 

 
$("#radio3").prop("checked", true) 
 

 
} else if (statevalue == njvalue) { 
 

 
$("#radio4").prop("checked", true) 
 

 
} else { 
 

 
alert("test"); 
 
} 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
<label for="state" class="col-sm-3 control-label">State</label> 
 
    <div class="col-sm-9"> 
 
    <input type="text" class="form-control" id="state" name="state" placeholder="State" oninput="picktax();" required /> 
 
    </div> 
 
</div> 
 

 
<div class="form-group"> 
 
<label for="emailaddress" class="col-sm-3 control-label">Tax</label> 
 
<div class="col-sm-9"> 
 
    <br> 
 
    <div class="col-sm-9"> 
 
     <label class="checkbox-inline"> 
 
      <input type="radio" class="px" name="tax2" id="radio1" class="radio" value="0"//> 
 
      <span class="lbl">Tax Exempt</span> 
 
     </label> 
 
     <br> 
 
    </div> 
 
    <div class="col-sm-9"> 
 
     <label class="checkbox-inline"> 
 
      <input type="radio" class="px" name="tax2" id="radio2" class="radio" value="0.0875" /> 
 
      <span class="lbl">NYC 8.875%</span> 
 
     </label> 
 
     <br> 
 
    </div> 
 
    <div class="col-sm-9"> 
 
     <label class="checkbox-inline"> 
 
      <input type="radio" class="px" name="tax2" id="radio3" class="radio" value="0.08625" /> 
 
      <span class="lbl">LI 8.625%</span> 
 
     </label> 
 
     <br> 
 
    </div> 
 
    <div class="col-sm-9"> 
 
     <label class="checkbox-inline"> 
 
      <input type="radio" class="px" name="tax2" id="radio4" class="radio" value="0.07" /> 
 
      <span class="lbl">NJ 7%</span> 
 
     </label> 
 
     <br> 
 
    </div> 
 
    <div class="col-sm-9"> 
 
     <label class="checkbox-inline"> 
 
      <input type="radio" class="px" name="tax2" id="radio5" class="radio" value="0.06" /> 
 
      <span class="lbl">Philly 6%</span> 
 
     </label> 
 
     <br> 
 
    </div> 
 
    <div class="col-sm-9"> 
 
     <label class="checkbox-inline"> 
 
      <input type="radio" class="px" name="tax2" id="radio6" class="radio" value="0.0635" /> 
 
      <span class="lbl">CT 6.35%</span> 
 
     </label> 
 
     <br> 
 
    </div> 
 
</div>

Answer 2

Wie in den Kommentaren darauf, Ihren Code hat so Ich Syntaxfehler. Außerdem gibt es ein paar Möglichkeiten, wie Sie es verbessern könnten, zum Beispiel verwende ich eine switch anstelle von if. Nichts falsch mit if, ich gebe nur ein Beispiel. Fester Code wäre:

function picktax() { 

    var statevalue = $('#state').val(); 
    var radio = $(); 

    switch (statevalue) { 
     case "NY": 
      radio = $("#radio2"); 
      break; 
     case "LI": 
      radio = $("#radio3"); 
      break; 
     case "NJ": 
      radio = $("#radio4"); 
      break; 
     default: 
      alert("test"); 
      break; 
    } 

    radio.prop("checked", true); 
}