如何从一个文本框中获取值并分配给下一个文本框

时间:2013-07-15 09:37:39

标签: javascript jquery

我正在尝试获取文本框值并尝试分配下一个文本字段。enter image description here

就像在图像中一样,当我尝试在我的第二个文本字段(如260)中添加一些值时,它将使用前一个字段值填充下一个(示例中的kashif第一个文本字段)字段。这将在第二个字段输入后工作所以一个。第一个没什么。 名称和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 formate输出:

<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>

5 个答案:

答案 0 :(得分:0)

将类“second”添加到第二个文本

     <script>
    $(document).ready(function(){
       $('.second').blur(function(){

              $(this).next().val($this.val());

      });
    });
    </script>

答案 1 :(得分:0)

您可以使用以下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"/>元素选择第三个<div>元素中的<div class="hor-scroll">元素,这是每行中的第二个文本框。然后,相对于该文本框,它找到下一行的第一个文本框,并设置其值。

Example jsFiddle

答案 2 :(得分:-1)

我建议为每个文本框创建一个ID,然后在keyup上创建代码以更新下一个字段。

我认为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变量。

答案 3 :(得分:-1)

您可能会这样做:

$('#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);

});

答案 4 :(得分:-2)

这可能会有所帮助

    $(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);
         }

      });


 });