Javascriptは入力値の配列に基づいて選択します

私は前の質問で多くの有用な助けを見つけましたが、必要な最後の部分を得ることができません。私はPHPを使ってフォームフィールドをループし、変数を使ってフィールドに固有の名前を付けます。私のフィールドの1つは「経費タイプ」です。もう一つは「費用額」です。「マイレージ」が選択された費用であれば、自動的にマイレージレートを表示するように費用金額を希望します。私は配列の外側でこれを行うことができますが、配列では配列内の名前を正しく得ることができません。 PHPコードとフォームの残りの部分は完全に動作します。ちょうどjavascriptがトリガ/更新する適切なフィールドを見つけられません。ここでは、コードです：Javascriptは入力値の配列に基づいて選択します

<?php 
$t = -1; 
foreach($details as $detail) 
{ 
    $t++; 
    echo '<th><select name="record['.$t.'][expense]" onChange="mileage();" ><option value="">Expense</option>'; 
    foreach($expensecoderesults as $code) 
     { 
      echo '<option value="'.$code->expense_code_id.'"'; 
      if($code->expense_code_id == $expense_type_id){echo 'selected="selected" ';} 
      echo '>'.$code->expense_code_name.'</option>'; 
     } 
     echo '</select></th></tr>'; 
     echo '<th><input type="number" "step=".01" name="record['.$t.'][amount]" /></th>'; 
} 
?> 
<script language="javascript" type="text/javascript"> 
function mileage() 
{ 
    var myForm = document.forms.edit_emp_exp; 
    var myControls = myForm.elements['record[][expense]']; 
    var myAmount = myForm.elements['record[][amount]']; 
    for (var i = 0; i < myControls.length; i++) 
    { 
     if(myControls.value == 28)//28 is the id of "mileage" expense 
     {myAmount.value=".54";} 
    } 
}

出典

2016-08-24 BillyB

あなたのコードのこの部分はJavaScriptで動作しません。

var myControls = myForm.elements['record[][expense]']; 
var myAmount = myForm.elements['record[][amount]'];

あなたは（ところで、あなたがチェックしている選択された値を見つけるために、ループを必要としません選択されていないオプション値ですが、ループ内のすべてのオプション値は任意のオプションを選択すると入力値を ".54"に設定します）

このJavaScriptコードをお試しください。 "（この）走行距離;"

<script language="javascript" type="text/javascript"> 
function mileage(el) { 
    var selectedIndex = el.selectedIndex; 
    var selectedValue = el.options[selectedIndex].value; 

    if (selectedValue == 28) { //28 is the id of "mileage" expense 
     el.nextElementSibling.value=".54"; 
    } 
} 
</script>

あなたはのonChange =に（）だけ走行距離からHTML SELECTタグでの走行距離（）関数呼び出しを変更する必要があります

PHPで生成されたHTMLで動作するはずです。しかし、私はそのようなタスクにjQueryを使うことをお勧めします。

<!DOCTYPE html> 
<html> 
<head> 
    <title>test</title> 

    <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> 
</head> 
<body> 

    <form id="edit_emp_exp"> 
     <select name='record[0][expense]'> 
      <option value="">Expense</option> 
      <option value="1">1-name</option> 
      <option value="2">2-name</option> 
      <option value="3">3-name</option> 
      <option value="5">5-name</option> 
      <option value="10">10-name</option> 
      <option value="28">28-name</option> 
     </select> 
     <input type="number" step=".01" name="record[0][amount]" /> 

     <select name='record[1][expense]' onChange="mileage(this);"> 
      <option value="">Expense</option> 
      <option value="1">1-name</option> 
      <option value="2">2-name</option> 
      <option value="28">28-another-name</option> 
      <option value="32">32-name</option> 
     </select> 
     <input type="number" step=".01" name="record[0][amount]" /> 

    </form> 


    <script language="javascript" type="text/javascript"> 

    $(document).ready(function() { 

     $('#edit_emp_exp select').on('change', function(event) { 
      if ($(this).val() == 28) { 
       $(this).next().val('.24'); 
      } 
     }); 

    }); 

    </script> 

</body> 
</html>

出典

2016-08-24 19:21:42

元のコードに何が間違っていたか、どのように修正したか説明してください。 – Barmar

残念ながら、これは機能しませんでした。もしこれが私のコード全体であったとしても、私は複数の入力フィールドを持っていて、最初の入力フィールドを更新しました。私はjQueryやjavascript（明らかに）についてよく分かりませんので、私はそれについても見ていきたいと思います。私は今、PHPループにjavascriptを追加して、$ t変数を要素名に渡して調べていますが、最初のフィールドでのみ動作しています。 – BillyB

jsFiddle：https://jsfiddle.net/gcgyu4uk/もご確認ください。それはあなたが期待していることですか？ –

Javascriptは入力値の配列に基づいて選択します

答えて

関連する問題