javascript - 1 つのテキストボックスから値を取得し、次のテキストボックスに割り当てる方法

Question

テキストボックスの値を取得しようとしており、次のテキストフィールドを割り当てようとしています。ここに画像の説明を入力

画像のように、2番目のテキストフィールド（260など）に値を追加しようとすると、次の（例では最初のテキストフィールドのkashif）フィールドに前のフィールド値が入力されます。これは2番目のフィールドエントリの後に機能します。 .最初は何もありません。名前と ID は最初のように動的に生成され、size_min[1_1_0] (240 の場合) と size_max[1_1_0] (260 の場合) になります。フィールドの動的 ID が原因で混乱します。これは私のhtmlコードです:

    <div class="entry-edit">
    <div class="entry-edit-head">

    <h4 class="icon-head"><?php echo Mage::helper('mymodule')->__($value['label']." (".$std['name'].")") ?></h4>

    </div>
    <div>

    <div id="addanswer_form" class="fieldset">
            <?php  

  $results = $read->fetchAll("select * from  mytable where standards_id =".$std['standards_id']);
  foreach($results as $mykey=>$myvar)
  {
?>
    <div class="hor-scroll" style=" margin-bottom: 2px; ">
    <div style=" width:70px; float:left;">
        <label for="name" ><?php echo ucwords($myvar['value']);?> </label>
        </div>
        <div style=" float:left;">
<input type="text" class="required-entry input-text required-entry" style=" float:left; width:60px;"  value="" name="size_min[<?php echo $value['dimension_id']."_".$std['standards_id']."_".$myvar['value_id']?>]" id="size_min[<?php echo $value['dimension_id']."_".$std['standards_id']."_".$myvar['value_id']?>]">
 </div> <span style="float:left;"> &nbsp;&nbsp;- &nbsp;&nbsp;</span> 
 <div style=" float:left;">
<input type="text" class="required-entry input-text required-entry" style=" float:left; width:60px;"  value="" name="size_max[<?php echo $value['dimension_id']."_".$std['standards_id']."_".$myvar['value_id']?>]" id="size_max[<?php echo $value['dimension_id']."_".$std['standards_id']."_".$myvar['value_id']?>]" >
 </div>
 </div>
<?php   } // end of foreach loop for standard values  
        ?>
</div>

これは、html 形式で出力されます。

<div class="fieldset" id="addanswer_form">
    <div style=" margin-bottom: 2px; " class="hor-scroll">
        <div style=" width:70px; float:left;">
            <label for="name">Neemh</label>
        </div>
        <div style=" float:left;">
            <input type="text" id="size_min[1_1_7]" name="size_min[1_1_7]" value="" style=" float:left; width:60px;" class="required-entry input-text required-entry">
        </div> <span style="float:left;"> &nbsp;&nbsp;- &nbsp;&nbsp;</span> 
        <div style=" float:left;">
            <input type="text" id="size_max[1_1_7]" name="size_max[1_1_7]" value="" style=" float:left; width:60px;" class="required-entry input-text required-entry">
        </div>
    </div>
    <div style=" margin-bottom: 2px; " class="hor-scroll">
        <div style=" width:70px; float:left;">
            <label for="name">Kashif</label>
        </div>
        <div style=" float:left;">
            <input type="text" id="size_min[1_1_8]" name="size_min[1_1_8]" value="" style=" float:left; width:60px;" class="required-entry input-text required-entry">
        </div> <span style="float:left;"> &nbsp;&nbsp;- &nbsp;&nbsp;</span> 
        <div style=" float:left;">
            <input type="text" id="size_max[1_1_8]" name="size_max[1_1_8]" value="" style=" float:left; width:60px;" class="required-entry input-text required-entry">
        </div>
    </div>
    <div style=" margin-bottom: 2px; " class="hor-scroll">
        <div style=" width:70px; float:left;">
            <label for="name">Shamma</label>
        </div>
        <div style=" float:left;">
            <input type="text" id="size_min[1_1_10]" name="size_min[1_1_10]" value="" style=" float:left; width:60px;" class="required-entry input-text required-entry">
        </div> <span style="float:left;"> &nbsp;&nbsp;- &nbsp;&nbsp;</span> 
        <div style=" float:left;">
            <input type="text" id="size_max[1_1_10]" name="size_max[1_1_10]" value="" style=" float:left; width:60px;" class="required-entry input-text required-entry">
        </div>
    </div>
</div>
</div>

score 0 · Accepted Answer

次の DOM トラバーサルコードを使用できます。

$('.hor-scroll div:nth-of-type(3) input:text').on('input', function(e) {
    $(this).closest('.hor-scroll').next().find('input:text:eq(0)').val(this.value);
});

これにより、各要素<input type="text"/>の 3 番目の要素(各行の 2 番目のテキストボックス)から要素が選択されます。次に、そのテキストボックスを基準にして、次の行の最初のテキストボックスを見つけ、その値を設定します。<div><div class="hor-scroll">

例 jsFiddle

score -1 · Accepted Answer

テキストボックスごとに ID を作成してから、コード onkeyup を作成して次のフィールドを更新することをお勧めします。

myvar は while ループの一部であると仮定します。ループのサイクルごとに増加する int を作成し、その番号に基づいて ID を作成します。

例：

<div class="entry-edit">
<div class="entry-edit-head">

<h4 class="icon-head"><?php echo Mage::helper('mymodule')->__($value['label']." (".$std['name'].")") ?></h4>

</div>
<div>

<div id="addanswer_form" class="fieldset">
<?php  

$results = $read->fetchAll("select * from  mytable where standards_id =".$std['standards_id']);
$looped = 0;
foreach($results as $mykey=>$myvar)
{
    ?>
    <div class="hor-scroll" style=" margin-bottom: 2px; ">
    <div style=" width:70px; float:left;">
    <label for="name" ><?php echo ucwords($myvar['value']);?> </label>
    </div>
    <div style=" float:left;">
    <input type="text" class="required-entry input-text required-entry" style=" float:left; width:60px;" onkeyup="update_id(<? echo $looped; ?>);" value="" name="size_min[<?php echo $value['dimension_id']."_".$std['standards_id']."_".$myvar['value_id']?>]" id="first_<? echo $looped; ?>">
    </div> <span style="float:left;"> &nbsp;&nbsp;- &nbsp;&nbsp;</span> 
    <div style=" float:left;">
    <input type="text" class="required-entry input-text required-entry" style=" float:left; width:60px;"  value="" name="size_max[<?php echo $value['dimension_id']."_".$std['standards_id']."_".$myvar['value_id']?>]" id="second_<? echo $looped; ?>" >
    </div>
    </div>
    <?php   
    $looped++;
     } // end of foreach loop for standard values  
     ?>
     </div>

次に、この JavaScript 関数を作成します。

<script>
function update_id(id){
            next = id+1;
            if($("#first_"+next).length){ //if the next first checkbox exists, set the value from the previous second checkbox.

                $("#first_"+next).val($("#second_"+id).val());
            }
        }
</script>

onkeyup メソッドと更新された ID と$looped変数に注目してください。

score -1 · Accepted Answer

あなたは次のようなことをするかもしれません:

$('#text_of_260').on('keyup',function(e){

  // get the new value from the event 
  console.log('e',e); 
  // to get the value you might use : e.srcElement.value or e.srcElement.innerText //
  var new_value = e.value();  

  // get the second text box

  $('#text_show_get_value').val(new_value);

});

score -2 · Accepted Answer

これは役立つかもしれません

    $(document).ready(function(){
         var value;
         var j;
     var count = $(".required-entry").length;
     $(".required-entry").blur(function(){
       for(var i=0;i<count;i++){
          value =  $('.size_max[1_1_'+i).val();
             j= i+1;
           $('.size_min[1_1_'+j).val(value);
         }

      });


 });

javascript - 1 つのテキスト ボックスから値を取得し、次のテキスト ボックスに割り当てる方法

5 に答える 5

Related

Reference

javascript - 1 つのテキストボックスから値を取得し、次のテキストボックスに割り当てる方法