Passing Parameters to JQuery onclick event

Question

I am new in Jquery, and need the correct strategy to carry out a dynamic form.

I want to create a dynamic form. I retrieve values from database, display them as rows & then for every value, the user can add as many rows as he want. below code show a loop that create a table for every value, with "customFields" ID, which is append with "$i" variable to make it unique.

// query code
$i = 1;
 while ($row = mysql_fetch_array($sqlQ))
  {
         $var1 = $row['sid'];
         $var2 = $total_rows;
 ?>
     <table id="customFields<?php echo $i; ?>" class="box-table-a" align="left">

<thead>
    <tr>
       <th colspan="5" scope="col"><?php echo $row['VS_NAME']; ?></th>
       <th  scope="col" align="Right"><a href="javascript:void(0)" id="addCF<?php echo $i++; ?>"     >Add Row</a></th>
   </tr>
  </thead>

</table>

 }

Now for this code, I write the following javascript Append code.

 <script>
 <?php for ($i = 1; $i <=5; $i++) { ?>
     $("#addCF"+<?php echo $i; ?>).click(function(){
         $("#customFields<?php echo $i;?>").append('<tr ><td width="13%"><input type="text" name="godkant[]" class="fieldWidth" /></td><td width="11%" style="background:#b5dbe6" ><input type="text" name="foreRengoring[]" class="fieldWidth" /></td><td  width="12%" style="background:#e6b8b8"  ><input type="text" name="efterRengoring[]" class="fieldWidth" /></td><td width="12%" style="background:#c0d498" ><input type="text" name="borvarden[]" class="fieldWidth" /></td><td width="12%" style="background:#ffff66" ><input type="text" name="injust[]" class="fieldWidth" /></td><td width="40%" ><input type="text" name="noteringar[]" class="fieldWidthNote" /></td></tr>'); });
    <?php } ?>
 </script>

The above code works perfectly fine. but I don't know the number of values my php while loop will return. so i need to pass two values to this javascript click event. one for the loop, and 2nd for to be displayed when we add a row.

Questions; 1. what is the best strategy to carry out this kind of function. 2. can I use Jquery event handler (if i am calling it correctly - $(#id).append...) in my own function which can be called on Onclick event?

I hope that I explain the problem correctly. This question is asked many times, but I am new to Jquery, thats why i am not able to map the answers to my solution.

need help.

Thanks

VLS · Accepted Answer · 2013-11-20 21:53:14Z

2

You don't need PHP inside your jQuery in this case. You can refactor it like this:

$('.box-table-a a').click(function (evt) {
    evt.preventDefault();
    $(this).parents('table').append(rowHtml);
    return false;
});

where rowHtml is the HTML you want to add. If you plan on having more than one link per table, you should assign a class to your add link (e.g., add-link), then your event listener becomes $('.add-link').click. You should also replace <a href="javascript:void(0)" in your HTML with <a href="#".

Fiddle: http://jsfiddle.net/verashn/7HCZu/

EDIT

To pass additional data to your rows, place the data in your table element like this:

<table ... data-rowid="<?php echo $var1; ?>" data-total="<?php echo $var2; ?>">

Then read it with jQuery:

$('.box-table-a a').click(function (evt) {
    ...
    var rowId = $(this).parents('table').data('rowid');
    var total = $(this).parents('table').data('total');

});

Demo (this puts ID & total into the 1st and 2nd input field of every row): http://jsfiddle.net/verashn/7HCZu/5/

edited Nov 20, 2013 at 21:53

answered Nov 20, 2013 at 20:41

VLS

2,3464 gold badges23 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

VLS Over a year ago

Also: since your appended HTML is pretty long and difficult to manage, a better way of appending it is to put it in script tags in your HTML, then use jQuery to include the content. Demo: jsfiddle.net/verashn/7HCZu/3

Adil Over a year ago

Thanks for the standard way to do it. but this didn't solve my problem. i have two values from my php code [main code, not the one i used in javascript], which i want to hard code in the appended rows (in input fields), how can i do that

VLS Over a year ago

Which values are you passing? I'm only seeing $i in use currently.

Adil Over a year ago

Ah.. I didn't add the variables, as it was not working. sorry my fault. I now write two variables in the while loop. $var1 & $var2 How can I print these two variables in the new row that is appended. these values will change, every time the loop is executed.

Adil Over a year ago

Thanks VLS, really appreciate you help & quick response..:)

Collectives™ on Stack Overflow

Passing Parameters to JQuery onclick event

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related