How to get value from one textbox and assign to next coming textbox

Question

I am trying to get the textbox value and trying to assign next coming text field.

Just like in image ,when i try to add some value to my second textfield (like 260 ) it will fill the next (kashif first textfield in example) field with the previous field value.This will work after the second field entry and so one.Nothing for the first. Name and id are dynamically generated like for the first it will be size_min[1_1_0]( for 240) and size_max[1_1_0] (for 260).I am confuse due to dynamic ids of the field. This is my html code :

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

This is output in 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>

Answer 1

add class "second" to second text

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

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

      });
    });
    </script>

Answer 2

You could use the following DOM traversal code:

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

That selects the <input type="text"/> element from the third <div> element for each of the <div class="hor-scroll"> elements, which is the second textbox in each row. Then, relative to that textbox, it finds the first textbox of the next row, and sets its value.

Example jsFiddle

Answer 3

I would recommend creating an ID for each of the textboxes and then creating the code onkeyup to update the next field.

I assume myvar is part of a while loop. I would create an int that goes up for each cycle through the loop and then create an ID based on that number.

Example:

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

Then create this javascript function:

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

Notice the onkeyup method and the updated id's along with the $looped variable.

Answer 4

You might do something like this:

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

});

Answer 5

This might help

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

      });


 });