javascript keypress event and php

Question

HTML code :

<td><input type="text"  name="flat[]" class="" value="<?php echo $row_pdetails["flat"]; ?>" /></td>
<td><input type="text"  name="new_price[]" class="" value="<?php echo   $row_pdetails["price"]; ?>" /></td>
<td><input type="text"  name="org_price[]" class="" value="<?php echo     $row_pdetails["org_price"]; ?>" readonly/></td>
<td><input type="submit"  name="save" value="save"/></td>

PHP code :

<?php
  if(isset($_POST["save"]))
  {
     for($i=0;$i<count($_POST["org_price"]); $i++)
     {
        $org_price=$_POST["org_price"][$i]; 
        $new_price=$_POST["new_price"][$i];
        mysql_query("update tb_party_rate_entry set price='$new_price' where   (party_id='$p_id' && org_price='$org_price')");
     }
  }

Here in this code I'm fetching the value of new_price[] and org_price[] from the database using a while loop, and for updating these values in the database I've used a for loop as in my PHP code.

Now what I want is that whenever I enter any value in flat[] textbox, that same value should simultaneously be entered in new_price[] textbox using keypress event. When I enter value in 1st row's flat price it should be entered in first row's new_price[] , when I enter value in 2nd row's flat price it should be entered in second row's new_price[] , and in keypress event.

Please help.

Answer 1

Test Here: http://jsfiddle.net/qsDn5/3/
Html

 <div>
    <tr>
        <td>flat1:<input type="text" name="flat[]" class="flat" value=""/></td>
        <td>price1:<input type="text" name="new_price[]" class="new_price" value=""/></td>
        <td><input type="text" name="org_price[]" class="" value=""</td>
    </tr>
</div>
<div>
    <tr>
        <td>flat2:<input type="text" name="flat[]" class="flat" value=""/></td>
        <td>price2:<input type="text" name="new_price[]" class="new_price" value=""/></td>
        <td><input type="text" name="org_price[]" class="" value=""</td>

    </tr>
</div>
<p><input type="submit" name="save" value="save"/></p>

Jquery

$(document).ready(function(){
    $('.flat').on('keyup',function(e) {
       $( this ).siblings(".new_price").eq(0).val ( $(this).val() );
    });
});

Answer 2

You should use onchange event on flat[] and set the value of new_price[] consequently.

Something like

$('input[name="flat[]"]').on('keyup',function(e) {
   $( this ).siblings('input[name="new_price[]"]:first').val ( $(this).val() );
});

Note: I used siblings because i assume you will have different rows with the same input name, in this way you only update the right element

Answer 3

FIDDLE (see demo)

Try this:

note that i add rel attribute in html and created unique id for textbox.means every textbox have a unique id.

<?php 
$i = "1";
while(//$row=...){ 
?>
<td><input type="text"  name="flat[]" id="flat<?php echo $i;?>" rel="<?php echo $i;?>" class="flat" value="<?php echo $row_pdetails["flat"]; ?>" /></td>
<td><input type="text"  name="new_price[]" id="newprice<?php echo $i;?>" rel="<?php echo $i;?>"  class="new_price" value="<?php echo   $row_pdetails["price"]; ?>" /></td>
<td><input type="text"  name="org_price[]" id="orgprice<?php echo $i;?>" rel="<?php echo $i;?>" class="org_price" value="<?php echo $row_pdetails["org_price"]; ?>" readonly/></td>
<?php $i++;} ?>
<td><input type="submit"  name="save" value="save"/></td>

JQuery:

when user try to enter some thing in flat textbox, we get it's rel and it's value.using the rel's value we found related newprice textbox.

$(document).on('keyup','.flat',function(){
    var rel = $(this).attr('rel');
    var flatvalue = $(this).val();
    $("#newprice"+rel).val(flatvalue);
});