1

I been trying to find a solution for this for a long time and would really appreciate any help.

I have a table which is generated through a php sql query beside each row is two buttons Buy & Sell when the user clicks on either of the buttons it would populate an order form which is in a dialog box

I have a function which acts on the click event in jQuery but its reading the first fields of the first row in the table.

here is my function

$('.buy').click(function(){
if($('#buying').dialog('isOpen')) alert('Buy Box Already open');
else { 
   $(".buycommodity").val($(".commodity_name").val()+"
                 "+$(".commodity_code").val());
      $("#buyprice").val($(".commodity_price").val());
      $("#buyqty").val($(".commodity_volume").val());


      $('#buying').dialog('open'); 
    }}
    );

The question, how can I get the correct fields read and populated in the form? How can I get jQuery to know which button, on which row is clicked? All the type button have the same class i.e buy or sell

here is some HTML source of the table

<div id="exchange">
<form>
<table border="1" cellspacing="5" cellpadding="5">
<tr>
    <th>Commodity</th>
    <th>Code</th>
    <th>Current Price</th>
    <th>Past Price</th>
    <th>Change</th>
    <th>Volume</th>
        </tr>
        <tr valign='top'>
<td align=left>
   <input type="text" name="commodityname" value=Basmati readonly="readonly" id="commodityname" size=10>
</td>
<td align=left>
   <input type="text" name="commoditycode" value=1121 readonly="readonly" id="commoditycode" size=6>
</td>
<td align=absmiddle>
   <input type="text" name="currentprice" value=100 readonly="readonly" id="currentprice" size=4>
</td>
<td align=absmiddle>
   <input align=absmiddle type="text" name="pastprice" value=80 readonly="readonly" id="pasrprice" size=4>
</td>
<td align="absmiddle"><font size="3" color="blue"><em>&#x25B2;</em></font></td>
<td align=left><input type="text" name="commodityvolume" value=88000 readonly="readonly" id="commodityvolume" size=7>
</td>
   <input type=hidden id=commodity_id name=commodity_id value=1>
   <input type=hidden class=commodity_name name=commodity_name value=Basmati>
   <input type=hidden class=commodity_code name=commodity_code value=1121>
   <input type=hidden class=commodity_volume name=commodity_volume value=88000>
   <input type=hidden class=commodity_price name=commodity_price value=100>
<td>
   <input class=buy type=button name=orderbutton value=Buy>
</td>
<td>
   <input class=sell type=button name=orderbutton value=Sell>
</td>
</tr>
</form>
<tr valign='top'>
   <td align=left>
      <input type="text" name="commodityname" value=Basmati readonly="readonly" id="commodityname" size=10>
   </td>
   <td align=left>
      <input type="text" name="commoditycode" value=386 readonly="readonly" id="commoditycode" size=6>
  </td>
  <td align=absmiddle>
      <input type="text" name="currentprice" value=90 readonly="readonly" id="currentprice" size=4>
  </td>
  <td align=absmiddle><input align=absmiddle type="text" name="pastprice" value=100 readonly="readonly" id="pasrprice" size=4>
  </td>
  <td align="absmiddle"><font size="3" color="red"><em>&#x25BC;</em></font></td>
  <td align=left><input type="text" name="commodityvolume" value=44000 readonly="readonly" id="commodityvolume" size=7>
  </td><input type=hidden id=commodity_id name=commodity_id value=2>
   <input type=hidden class=commodity_name name=commodity_name value=Basmati>
   <input type=hidden class=commodity_code name=commodity_code value=386>
   <input type=hidden class=commodity_volume name=commodity_volume value=44000>
   <input type=hidden class=commodity_price name=commodity_price value=90><td>
   <input class=buy type=button name=orderbutton value=Buy></td>
                         <td><input class=sell type=button name=orderbutton value=Sell></td></tr
   </form>
 <tr valign='top'>
   <td align=left>
     <input type="text" name="commodityname" value=Basmati readonly="readonly" id="commodityname" size=10></td>
     <td align=left><input type="text" name="commoditycode" value=385 readonly="readonly" id="commoditycode" size=6></td>
    <td align=absmiddle><input type="text" name="currentprice" value=75 readonly="readonly" id="currentprice" size=4>
    </td>
    <td align=absmiddle><input align=absmiddle type="text" name="pastprice" value=88 readonly="readonly" id="pasrprice" size=4></td>
    <td align="absmiddle"><font size="3" color="red"><em>&#x25BC;</em></font></td>
    <td align=left>
      <input type="text" name="commodityvolume" value=24000 readonly="readonly" id="commodityvolume" size=7></td>
      <input type=hidden id=commodity_id name=commodity_id value=3>
      <input type=hidden class=commodity_name name=commodity_name value=Basmati>
      <input type=hidden class=commodity_code name=commodity_code value=385>
      <input type=hidden class=commodity_volume name=commodity_volume value=24000>
      <input type=hidden class=commodity_price name=commodity_price value=75><td>
      <input class=buy type=button name=orderbutton value=Buy></td>
                         <td><input class=sell type=button name=orderbutton value=Sell></td></tr>
      </form>
      <tr valign='top'><td align=left>
      <input type="text" name="commodityname" value=Ierro readonly="readonly" id="commodityname" size=10></td><td align=left>
      <input type="text" name="commoditycode" value=6 readonly="readonly" id="commoditycode" size=6></td><td align=absmiddle>
      <input type="text" name="currentprice" value=33 readonly="readonly" id="currentprice" size=4></td><td align=absmiddle>
      <input align=absmiddle type="text" name="pastprice" value=39 readonly="readonly" id="pasrprice" size=4></td><td align="absmiddle"><font size="3" color="red"><em>&#x25BC;</em></font>
    </td><td align=left>
      <input type="text" name="commodityvolume" value=124000 readonly="readonly" id="commodityvolume" size=7></td>
      <input type=hidden id=commodity_id name=commodity_id value=4>
      <input type=hidden class=commodity_name name=commodity_name value=Ierro>
      <input type=hidden class=commodity_code name=commodity_code value=6>
      <input type=hidden class=commodity_volume name=commodity_volume value=124000>
      <input type=hidden class=commodity_price name=commodity_price value=33><td>
      <input class=buy type=button name=orderbutton value=Buy></td>
      <td><input class=sell type=button name=orderbutton value=Sell></td></tr></form>
<tr valign='top'><td align=left>
      <input type="text" name="commodityname" value=Ierro readonly="readonly" id="commodityname" size=10>
  </td>
     <td align=left>
      <input type="text" name="commoditycode" value=9 readonly="readonly" id="commoditycode" size=6></td><td align=absmiddle>
      <input type="text" name="currentprice" value=79 readonly="readonly" id="currentprice" size=4></td><td align=absmiddle>
      <input align=absmiddle type="text" name="pastprice" value=60 readonly="readonly" id="pasrprice" size=4></td><td align="absmiddle"><font size="3" color="blue"><em>&#x25B2;</em></font></td><td align=left>
      <input type="text" name="commodityvolume" value=24000 readonly="readonly" id="commodityvolume" size=7></td>
      <input type=hidden id=commodity_id name=commodity_id value=5>
      <input type=hidden class=commodity_name name=commodity_name value=Ierro>
      <input type=hidden class=commodity_code name=commodity_code value=9>
      <input type=hidden class=commodity_volume name=commodity_volume value=24000>
      <input type=hidden class=commodity_price name=commodity_price value=79><td>
      <input class=buy type=button name=orderbutton value=Buy></td>
      <td><input class=sell type=button name=orderbutton value=Sell></td></tr></form></table
      </div>
5
  • sorry I re-edited, hope the question is a bit clear now :) Thanks
    – Sammy
    Aug 18, 2012 at 9:56
  • 1
    provide some html code (generated by php), or better make jsfiddle sample
    – deerua
    Aug 18, 2012 at 10:06
  • 1
    Some html please to make rewriting your function possible. anyway you should assign the right values in the table row by using $(this).parents() etc. to assign the right val() Aug 18, 2012 at 10:13
  • Have you tried to have your $('.buy').click handler dispatch a custom even and then listen for event.target, and then look for the parent div? api.jquery.com/event.target
    – widged
    Aug 18, 2012 at 11:20
  • I just tried the event.target as suggested and when i click on button it says clicked: input I have updated the question to include HTML source as requested
    – Sammy
    Aug 18, 2012 at 13:21

2 Answers 2

3

You can use html5 data- attributes to mark your buttons. In the following example I gave each button related product's Id, but you can add as many other data- attributes as you wish. There is also an example how to get the row number of the clicked button.

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
    </head>
    <body>
        <table>
            <tr>
                <td><button class="buy" data-product-id="1" >button 1</button></td>
                <td><button class="buy" data-product-id="2" >button 2</button></td>
            </tr>
            <tr>
                <td><button class="buy" data-product-id="3" >button 3</button></td>
                <td><button class="buy" data-product-id="4" >button 4</button></td>
            </tr>
        </table>

        <script>
            $('.buy').click(function(){             
                var prod_id = $(this).data('productId')
                alert(prod_id);
                var row_number = $(this).closest("tr")[0].rowIndex;
                alert("row number: "+row_number);
            });
        </script>
    </body>
</html>
2

I hope this helps you out:

$('.buy').click(function() {
 var trRef=$(this).parent().parent(); //double parent() to get reference of TR, that holds the button in action
 var commodity_name = $(trRef).find('.commodity_name').val();
 var commodity_code = $(trRef).find('.commodity_code').val();
 var commodity_price = $(trRef).find('.commodity_price').val();
 var commodity_volume = $(trRef).find('.commodity_volume').val();

 $(".buycommodity").val(commodity_name+" "+commodity_code);
  $("#buyprice").val(commodity_price);
  $("#buyqty").val(commodity_volume);
});
1
  • This was exactly it. I really appreciate the help :) Thanks to everyone and stackoverflow for this service :)
    – Sammy
    Aug 18, 2012 at 13:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.