Mise à jour des entrées cachées basées sur le menu déroulant

Question

Je travaille principalement en PHP, et je viens de commencer à jouer avec javascript. J'ai un formulaire qui quand une liste déroulante est sélectionnée pour une province, il met à jour 2 champs d'entrée cachés. Un avec une valeur en dollars, et un avec la valeur envoyée à partir du menu déroulant.

J'ai ceci fonctionnant, mais je suis sûr qu'il y a des manières plus élégantes de le faire. Toute directive visant à éliminer une certaine redondance serait géniale.

<script type="text/javascript"> 
 
function changeHiddenInput(objDropDown) { 
 
    if (document.getElementById('myselect').value === "X") { 
 
     var objHidden = document.getElementById("amount"); 
 
     objHidden.value = 2600; 
 
     $('#customButton').attr('disabled', 'disabled'); 
 
     $('#customButton2').attr('disabled', 'disabled'); 
 
    } 
 
    if (document.getElementById('myselect').value === "AB") { 
 
     var objHidden = document.getElementById("amount"); 
 
     objHidden.value = <?php echo getFees('AB', 'sprice', $price); ?>; 
 

 
     var objHidden2 = document.getElementById("province"); 
 
     objHidden2.value = "AB"; 
 

 
     $('#customButton').removeAttr('disabled'); 
 
     $('#customButton2').removeAttr('disabled'); 
 
    } 
 
    if (document.getElementById('myselect').value === "BC") { 
 
     var objHidden = document.getElementById("amount"); 
 
     objHidden.value = <?php echo getFees('BC', 'sprice', $price); ?>; 
 

 
     var objHidden2 = document.getElementById("province"); 
 
     objHidden2.value = "BC"; 
 

 
     $('#customButton').removeAttr('disabled'); 
 
     $('#customButton2').removeAttr('disabled'); 
 
    } 
 
    if (document.getElementById('myselect').value === "MB") { 
 
     var objHidden = document.getElementById("amount"); 
 
     objHidden.value = <?php echo getFees('MB', 'sprice', $price); ?>; 
 

 
     var objHidden2 = document.getElementById("province"); 
 
     objHidden2.value = "MB"; 
 

 
     $('#customButton').removeAttr('disabled'); 
 
     $('#customButton2').removeAttr('disabled'); 
 
    } 
 
    if (document.getElementById('myselect').value === "NB") { 
 
     var objHidden = document.getElementById("amount"); 
 
     objHidden.value = <?php echo getFees('NB', 'sprice', $price); ?>; 
 

 
     var objHidden2 = document.getElementById("province"); 
 
     objHidden2.value = "NB"; 
 

 
     $('#customButton').removeAttr('disabled'); 
 
     $('#customButton2').removeAttr('disabled'); 
 
    } 
 
    if (document.getElementById('myselect').value === "NL") { 
 
     var objHidden = document.getElementById("amount"); 
 
     objHidden.value = <?php echo getFees('NL', 'sprice', $price); ?>; 
 

 
     var objHidden2 = document.getElementById("province"); 
 
     objHidden2.value = "NL"; 
 

 
     $('#customButton').removeAttr('disabled'); 
 
     $('#customButton2').removeAttr('disabled'); 
 
    } 
 
    if (document.getElementById('myselect').value === "NS") { 
 
     var objHidden = document.getElementById("amount"); 
 
     objHidden.value = <?php echo getFees('NS', 'sprice', $price); ?>; 
 

 
     var objHidden2 = document.getElementById("province"); 
 
     objHidden2.value = "NS"; 
 

 
     $('#customButton').removeAttr('disabled'); 
 
     $('#customButton2').removeAttr('disabled'); 
 
    } 
 
    if (document.getElementById('myselect').value === "ON") { 
 
     var objHidden = document.getElementById("amount"); 
 
     objHidden.value = <?php echo getFees('ON', 'sprice', $price); ?>; 
 

 
     var objHidden2 = document.getElementById("province"); 
 
     objHidden2.value = "ON"; 
 

 
     $('#customButton').removeAttr('disabled'); 
 
     $('#customButton2').removeAttr('disabled'); 
 
    } 
 
    if (document.getElementById('myselect').value === "PE") { 
 
     var objHidden = document.getElementById("amount"); 
 
     objHidden.value = <?php echo getFees('PE', 'sprice', $price); ?>; 
 

 
     var objHidden2 = document.getElementById("province"); 
 
     objHidden2.value = "PE"; 
 

 
     $('#customButton').removeAttr('disabled'); 
 
     $('#customButton2').removeAttr('disabled'); 
 
    } 
 
    if (document.getElementById('myselect').value === "QC") { 
 
     var objHidden = document.getElementById("amount"); 
 
     objHidden.value = <?php echo getFees('QC', 'sprice', $price); ?>; 
 

 
     var objHidden2 = document.getElementById("province"); 
 
     objHidden2.value = "QC"; 
 

 
     $('#customButton').removeAttr('disabled'); 
 
     $('#customButton2').removeAttr('disabled'); 
 
    } 
 
    if (document.getElementById('myselect').value === "SK") { 
 
     var objHidden = document.getElementById("amount"); 
 
     objHidden.value = <?php echo getFees('SK', 'sprice', $price); ?>; 
 

 
     var objHidden2 = document.getElementById("province"); 
 
     objHidden2.value = "SK"; 
 

 
     $('#customButton').removeAttr('disabled'); 
 
     $('#customButton2').removeAttr('disabled'); 
 
    } 
 
    if (document.getElementById('myselect').value === "NT") { 
 
     var objHidden = document.getElementById("amount"); 
 
     objHidden.value = <?php echo getFees('NT', 'sprice', $price); ?>; 
 

 
     var objHidden2 = document.getElementById("province"); 
 
     objHidden2.value = "NT"; 
 

 
     $('#customButton').removeAttr('disabled'); 
 
     $('#customButton2').removeAttr('disabled'); 
 
    } 
 
    if (document.getElementById('myselect').value === "NU") { 
 
     var objHidden = document.getElementById("amount"); 
 
     objHidden.value = <?php echo getFees('NU', 'sprice', $price); ?>; 
 

 
     var objHidden2 = document.getElementById("province"); 
 
     objHidden2.value = "NU"; 
 

 
     $('#customButton').removeAttr('disabled'); 
 
     $('#customButton2').removeAttr('disabled'); 
 
    } 
 
    if (document.getElementById('myselect').value === "YT") { 
 
     var objHidden = document.getElementById("amount"); 
 
     objHidden.value = <?php echo getFees('YT', 'sprice', $price); ?>; 
 

 
     var objHidden2 = document.getElementById("province"); 
 
     objHidden2.value = "YT"; 
 

 
     $('#customButton').removeAttr('disabled'); 
 
     $('#customButton2').removeAttr('disabled'); 
 
    } 
 
} 
 
</script>

<select required name="prov" id="myselect" class="dropit" onchange="changeHiddenInput(this)"> 
 
    <option value="X">Select ship to province</option> 
 
    <option value="AB">Alberta</option> 
 
    <option value="BC">British Columbia</option> 
 
    <option value="MB">Manitoba</option> 
 
    <option value="NB">New Brunswick</option> 
 
    <option value="NL">Newfoundland/Labrador</option> 
 
    <option value="NS">Nova Scotia</option> 
 
    <option value="ON">Ontario</option> 
 
    <option value="PE">Prince Edward Island</option> 
 
    <option value="QC">Quebec</option> 
 
    <option value="SK">Saskatchewan</option> 
 
    <option value="NT">Northwest Territories</option> 
 
    <option value="NU">Nunavut</option> 
 
    <option value="YT">Yukon</option> 
 
</select> 
 
<input type="hidden" name="amount" id="amount" value=""> 
 
<input type="hidden" name="province" id="province" value="">

Answer 1

La première chose que vous devez faire est d'ajouter un prix d'attribut à chaque balise d'option, puis modifiez le script à cette (Exécuter cet extrait pour voir le résultat souhaité)

function changeHiddenInput(objDropDown) 
 
\t \t \t { 
 
\t \t \t \t var selectedOption = objDropDown.children[objDropDown.selectedIndex]; 
 
\t \t \t \t var price = selectedOption.getAttribute('price'); 
 
\t \t \t \t var province = objDropDown.value; 
 
\t \t \t \t document.getElementById('province').value = province; 
 
\t \t \t \t document.getElementById('amount').value = price; 
 
\t \t \t \t console.log('Province changed to: '+province); 
 
\t \t \t \t console.log('Price changed to: '+price); 
 
     
 
     $('#customButton').attr('disabled', 'disabled'); 
 
     $('#customButton2').attr('disabled', 'disabled'); 
 
\t \t \t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select required name="prov" id="myselect" class="dropit" onchange="changeHiddenInput(this)"> 
 
    <option price="2600" value="X">Select ship to province</option> 
 
    <option price="455" value="AB">Alberta</option> 
 
    <option price="4212" value="BC">British Columbia</option> 
 
    <option price="5445" value="MB">Manitoba</option> 
 
    <option price="445" value="NB">New Brunswick</option> 
 
    <option price="3434" value="NL">Newfoundland/Labrador</option> 
 
    <option price="3433" value="NS">Nova Scotia</option> 
 
    <option price="3434" value="ON">Ontario</option> 
 
    <option price="434" value="PE">Prince Edward Island</option> 
 
    <option price="333" value="QC">Quebec</option> 
 
    <option price="3434" value="SK">Saskatchewan</option> 
 
    <option price="2323" value="NT">Northwest Territories</option> 
 
    <option price="23" value="NU">Nunavut</option> 
 
    <option price="2323" value="YT">Yukon</option> 
 
</select> 
 
<input type="hidden" name="amount" id="amount" value=""> 
 
<input type="hidden" name="province" id="province" value="">

Answer 2

S'il vous plaît utiliser le code ci dessous. J'espère que ça va aider.

• Utilisez jQuery pour attacher l'événement "change" de la liste déroulante, supprimez l'événement onchange="changeHiddenInput(this)" de la balise select en html. Juste pour le rendre propre.
• Effacez le champ masqué "province" et "montant". Si "X" est sélectionné, définissez la valeur = 2600 et désactivez les boutons sinon, définissez la province sélectionnée et définissez le montant de la méthode getFees .

$(document).ready(function() 
 
{ 
 
\t $('#myselect').change(function(){ 
 
       $('#province').val(''); 
 
\t \t $('#amount').val(''); 
 
\t \t var selectedOption = $(this).val(); 
 
\t \t if(selectedOption === "X") 
 
\t \t { 
 
\t \t \t $('#amount').val("2600"); 
 
\t \t \t $('#customButton').attr('disabled', 'disabled'); 
 
\t \t \t $('#customButton2').attr('disabled', 'disabled'); 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t var amount = <?php echo getFees(selectedOption, 'sprice', $price); ?>; 
 
\t \t \t $('#province').val(selectedOption); 
 
\t \t \t $('#amount').val(amount); 
 
\t \t \t $('#customButton').removeAttr('disabled'); 
 
\t \t \t $('#customButton2').removeAttr('disabled'); 
 
\t \t } 
 
\t }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select required name="prov" id="myselect" class="dropit" > 
 
\t \t <option value="X">Select ship to province</option> 
 
\t \t <option value="AB">Alberta</option> 
 
\t \t <option value="BC">British Columbia</option> 
 
\t \t <option value="MB">Manitoba</option> 
 
\t \t <option value="NB">New Brunswick</option> 
 
\t \t <option value="NL">Newfoundland/Labrador</option> 
 
\t \t <option value="NS">Nova Scotia</option> 
 
\t \t <option value="ON">Ontario</option> 
 
\t \t <option value="PE">Prince Edward Island</option> 
 
\t \t <option value="QC">Quebec</option> 
 
\t \t <option value="SK">Saskatchewan</option> 
 
\t \t <option value="NT">Northwest Territories</option> 
 
\t \t <option value="NU">Nunavut</option> 
 
\t \t <option value="YT">Yukon</option> 
 
\t </select> 
 
           
 
\t <input type="hidden" name="amount" id="amount" value=""> 
 
\t <input type="hidden" name="province" id="province" value="">

Answer 3

function myFunction() { 
 
var e = document.getElementById("myselect"); 
 
var strUser = e.options[e.selectedIndex].value; 
 
var province = document.getElementById("province"); 
 
var amt = document.getElementById("amount"); 
 
    province.value = strUser; 
 
    amt.value = getFees(province, 'sprice', $price); 
 
}

<select required name="prov" id="myselect" class="dropit" onchange="myFunction()"> 
 
\t \t <option value="X">Select ship to province</option> 
 
\t \t <option value="AB">Alberta</option> 
 
\t \t <option value="BC">British Columbia</option> 
 
\t \t <option value="MB">Manitoba</option> 
 
\t \t <option value="NB">New Brunswick</option> 
 
\t \t <option value="NL">Newfoundland/Labrador</option> 
 
\t \t <option value="NS">Nova Scotia</option> 
 
\t \t <option value="ON">Ontario</option> 
 
\t \t <option value="PE">Prince Edward Island</option> 
 
\t \t <option value="QC">Quebec</option> 
 
\t \t <option value="SK">Saskatchewan</option> 
 
\t \t <option value="NT">Northwest Territories</option> 
 
\t \t <option value="NU">Nunavut</option> 
 
\t \t <option value="YT">Yukon</option> 
 
\t </select> 
 
           
 
\t <input type="hidden" name="amount" id="amount" value=""> 
 
\t <input type="hidden" name="province" id="province" value="">