ドロップダウンメニューの選択方法は値の連結を示します

Question

私は与えられたドロップダウンメニューの値に基づいてユーザーが独自の部品番号を作成することができる部品番号クリエータータイプのエンジンを作成しようとしています。 。私はそれがユーザーが入力した値を取って、間隔のない部品番号にコンパイルするようにしたい。私はあなたがチェックボックスをクリックすると、あなたはあなたの関数（this.formを）に送信

//I want to use a function like this - if there is a value 
 
function FillSeries(f) { 
 
    if(f.completepart.checked == true) { 
 
    f.ser_sel.value = f.finishedser_sel.value; //finishedser_sel would be the place holder for the value of ser_sel in the concantenated part 
 
    f.cap_sel.value = f.finishedcap_sel.value; //finishedcap_sel would be the place holder for the value of cap_sel in the concantenated part 
 
    } 
 
}

<form action="#" method="post"> 
 
<fieldset> 
 
<table id="tbl_sel" class="tables" border="0" cellspacing="0" cellpadding="0"> 
 
<thead> 
 
<tr> 
 
<th class="fst">SERIES</th> 
 
<th>CAP</th> 
 
</tr> 
 
</thead> 
 
<tbody> 
 
<tr> 
 
<td><select id="ser_sel" class="txt"> 
 
<option value=""></option> 
 
<option value="620">620</option> 
 
<option value="621">621</option> 
 
</select></td> 
 
<td><input id="cap_sel" class="txt hd" maxlength="3" type="text" /></td> 
 
</tr> 
 

 
</tbody> 
 
</table> 
 
</fieldset> 
 
</form> 
 
<!--not sure where to put this - inside or outside the form --> 
 
<input type="checkbox" name="completepart" onclick="FillSeries(this.form)"> 
 
<em>Check this box if you are done creating a part number.</em> 
 
<br><br> 
 
<!-- I want the part number to pull the fields together into one line - all together with no spacing --> 
 
<b>Finished Part Number</b> 
 
<br><br> 
 
<input class="txt" id="finishedser_sel"> 
 
<input class="txt" id="finishedcap_sel">

Answer 1

...これを行うための関数を呼び出し、こののJavaScriptの部分で立ち往生しているように見えます。

（this）はあなたの入力ですので、this.formは存在しません。

"message": "TypeError: f is null",

Answer 2

使用イベントリスナーの入力を監視し、変更のためのボックスを選択し、そのような他の入力要素に値を割り当てるには：あなたはそれらを移動する必要が

var part1 = ""; 
 
var part2 = ""; 
 
    
 
var selectBox = document.getElementById('ser_sel'); 
 
selectBox.addEventListener('change', function (event) { 
 
    part1 = event.target.value; 
 
    document.getElementById('finishedser_sel').value = event.target.value; 
 
    
 
}) 
 
var inputBox = document.getElementById('cap_sel'); 
 
inputBox.addEventListener('keyup', function (event) { 
 
    part2 = event.target.value; 
 
    document.getElementById('finishedcap_sel').value = event.target.value; 
 
    
 
}) 
 
function FillSeries(f) { 
 
    document.getElementById('allTogetherNow').value = (part1 + '-' + part2); 
 
    
 
}

<form action="#" method="post"> 
 
<fieldset> 
 
<table id="tbl_sel" class="tables" border="0" cellspacing="0" cellpadding="0"> 
 
<thead> 
 
<tr> 
 
<th class="fst">SERIES</th> 
 
<th>CAP</th> 
 
</tr> 
 
</thead> 
 
<tbody> 
 
<tr> 
 
<td><select id="ser_sel" class="txt"> 
 
<option value=""></option> 
 
<option value="620">620</option> 
 
<option value="621">621</option> 
 
</select></td> 
 
<td><input id="cap_sel" class="txt hd" maxlength="3" type="text" /></td> 
 
</tr> 
 

 
</tbody> 
 
</table> 
 
</fieldset> 
 
</form> 
 
<!--not sure where to put this - inside or outside the form --> 
 
<input type="checkbox" name="completepart" onclick="FillSeries(this.form)"> 
 
<em>Check this box if you are done creating a part number.</em> 
 
<br><br> 
 
<!-- I want the part number to pull the fields together into one line - all together with no spacing --> 
 
<b>Finished Part Number</b> 
 
<br><br> 
 
<input class="txt" id="finishedser_sel"> 
 
<input class="txt" id="finishedcap_sel"> 
 

 
<br /><br /> 
 
Finished Part# <br /> 
 
<input class="txt" id="allTogetherNow">

Answer 3

this.formがフォームをポイントするようにするには、フィールドをフォームに追加します。あなたのコードでは、selectの値をテキストボックスの値に設定していることに注意してください。このスニペットでは、私は順序を逆転させました。

//I want to use a function like this - if there is a value 
 
function FillSeries(f) { 
 
    if (f.completepart.checked == true) { 
 
    f.finishedser_sel.value = f.ser_sel.value; //finishedser_sel would be the place holder for the value of ser_sel in the concantenated part 
 
    f.finishedcap_sel.value = f.cap_sel.value; //finishedcap_sel would be the place holder for the value of cap_sel in the concantenated part 
 
    } 
 
}

<form action="#" method="post"> 
 
    <fieldset> 
 
    <table id="tbl_sel" class="tables" border="0" cellspacing="0" cellpadding="0"> 
 
     <thead> 
 
     <tr> 
 
      <th class="fst">SERIES</th> 
 
      <th>CAP</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td> 
 
      <select id="ser_sel" class="txt"> 
 
       <option value=""></option> 
 
       <option value="620">620</option> 
 
       <option value="621">621</option> 
 
      </select> 
 
      </td> 
 
      <td> 
 
      <input id="cap_sel" class="txt hd" maxlength="3" type="text" /> 
 
      </td> 
 
     </tr> 
 

 
     </tbody> 
 
    </table> 
 
    </fieldset> 
 
    <!--not sure where to put this - inside or outside the form --> 
 
    <input type="checkbox" name="completepart" onclick="FillSeries(this.form)"> 
 
    <em>Check this box if you are done creating a part number.</em> 
 
    <br> 
 
    <br> 
 
    <!-- I want the part number to pull the fields together into one line - all together with no spacing --> 
 
    <b>Finished Part Number</b> 
 
    <span id="wholepart"></span> 
 
    <br> 
 
    <br> 
 
    <input class="txt" id="finishedser_sel"> 
 
    <input class="txt" id="finishedcap_sel"> 
 
</form>