Question

<< Referring to this thread >>

How to pass the value chosen from the modal-box to the each textbox based on its rows?You can dynamically add or remove the textbox, and in order to fill the textbox, you have t o choose the value from Modal-box.

For example:

[Add Textbox] [Remove Textbox]
[TextBox1] [Link]
[TextBox2] [Link]
 ...
[TextBoxX] [Link]

While the link is clicked, it shows a Modal-box for user to choose the list on a table provided on the modal-box and return the value to the textbox on its rows. I’ve created the code below but it return the value for each textbox.

Please see the code below:

This javascript code is for add/remove the textbox:

<script type="text/javascript">
       //Add
       $('#tblDetail tbody').on("click", "a", function() {
         $("#products_modal_box").data("target", $(this).siblings("input"));
         showProductsModalBox();
         return false;
       });

       $(document).ready(function() {
         $("#addRow").click(function() {
           $('#tblDetail tbody>tr:last').clone(true).insertAfter('#tblDetail tbody>tr:last');
           $('#tblDetail tbody>tr:last #field1').val(''); 
           $('#txtTotalRow').val(tblDetail.rows.length - 1);
         });
       });  

       function removeRowFromTable() {
         var tbl = document.getElementById('tblDetail');
         var lastRow = tbl.rows.length;
         if (lastRow > 2) tbl.deleteRow(lastRow - 1);
       }
</script>

This is the form to add/remove the textbox, and the textbox itself:

<form id="form1" action="#" method="post">
  <input type="button" id="addRow" value="ADD" />
  <input type="button" id="removeRow" value="REMOVE" onclick="removeRowFromTable(); $('#txtTotalRow').val(tblDetail.rows.length - 1);"/>
  <input type="hidden" name="txtTotalRow" id="txtTotalRow" value="1" />

  <table cellpadding='0' cellspacing='0' border='0' id='tblDetail' width='100%'>
    <tr>
  <th colspan="3">&nbsp;</th>
</tr>
<tr>
  <td>
    <input type="text" name="field1[]" id="ProductID" />
    <a href="#" ><!-- removed - onclick="showProductsModalBox(); return false;" /--> 
      Choose
    </a>
  </td>
</tr>
  </table>
</form>

And the modal-box script is referred to the this thread. The inline javascript injected to the link to pass the value to “field1” textbox, changed to:

<!-- Edited - <a href=\"javascript:;\" onclick=\"$('input[name=field1]').val('".$fetch[0]."');$('#products_modal_box').dialog('close')();\"> /-->
<a href=\"javascript:;\" onclick=\"$('#products_modal_box').data('target').val('".$fetch[0]."');$('#products_modal_box').dialog('close')();\">

That code works for passing the value for the first textbox. But while I’m trying to add an textbox and choose a value from the modal-box, the value is being passed to each textbox (the first textbox and the second textbox), and so on. How to pass the value for each textbox differently? Thanks.

— UPDATE 1 —

$('#tblDetail tbody').on("click", "a", function() {

    console.log($(this)); // This should be the link you just clicked
    console.log($(this).siblings("input")); // This should be the text box you want to save the value to

    $("#products_modal_box").data("target", $(this).siblings("input"));

    console.log($("#products_modal_box").data("target")); // To confirm it was saved correctly as data

    showProductsModalBox();
    return false;
});

After check the console with firebug, the result is:

[a#]
[]
[]

---

UPDATE 2 – The Actual Problem

The mark-up for Product ID Textbox:

<table cellpadding="5px" id="tblDetail" class="tblDetail" width="100%">
  <tr>
    <th colspan="2" width="15%">Product ID</th>
    <th>Problem</th>
  </tr>
  <tr>
    <td><input type="text" name="productid[]" id="productid" size="7"/></td>
    <td><a href="#">Choose</a></td> <!-- THE PROBLEM WAS HERE /-->
    <td><input type="text" name="problem[]" id="problem" /></td>
  </tr>
</table>

<input type="button" id="addRow" value="ADD" />
<input type="button" id="removeRow" value="REMOVE" onclick="removeRowFromTable();"/>

The mark-up for Modal-box:

<div id="IDBarang_dialog" title="Ambil ID Barang" style="display: none;">
  <div class="in">
    <div class="grid-12-12">
      <form ID="IDBarang_dialog_form" action="#" method="post">
        <table>
          <thead>
            <tr>
              <th>&nbsp;</th>
              <th>Product</th>
            </tr>
          </thead>
          <!-- Query for read mysql goes here (I skipped this line because it's not the main thing I'm gonna ask since it's run well) /-->
          <tbody>
          <?php
            //read the results
            while($fetch = mysqli_fetch_array($r)) {                
              print "<tr>";
              print "  <td><a href='#' onclick=\"$('#IDBarang_dialog').data('target').val('".$fetch[0]."');$('#IDBarang_dialog').dialog('close')();\">Choose</a></td>"; 
              print "  <td>" . $fetch[0] . "</td>"; //$fetch[0] == Product ID
              print "</tr>";
            }
          ?>
          </tbody>
        </table>
      </form>
    </div>
  </div>
</div>

The Javascript:

<script>
  var grid_modal_options = {
    height: 'auto',
    width: '80%',
    modal: true
  };

  function showIDBarangModalPopup() {
    $("#IDBarang_dialog").dialog(grid_modal_options);
    $("#IDBarang_dialog").parent().appendTo('form:first');
  }
</script>  

<script type="text/javascript">
    //MODAL-BOX
    $('#tblDetail tbody').on("click", "a", function() {
      console.log($(this)); 
      console.log($(this).siblings("input")); 
      $("#IDBarang_dialog").data("target", $(this).siblings("input"));

      console.log($("#IDBarang_dialog").data("target")); 

      showIDBarangModalPopup();
      return false;
    });

    //ADD ROW
    $(document).ready(function() {
      $("#addRow").click(function() {
        $('#tblDetail tbody>tr:last').clone(true).insertAfter('#tblDetail tbody>tr:last');

        $('#tblDetail tbody>tr:last #productid').val('');
        $('#tblDetail tbody>tr:last #problem').val(''); 

        return false;
      });
    }); 

    //REMOVE ROW
    function removeRowFromTable() {
      var tbl = document.getElementById('tblDetail');
      var lastRow = tbl.rows.length;
      if (lastRow > 2) tbl.deleteRow(lastRow - 1);
    }

Answer 1

There are two things you need to do for this workflow to work:

1. When opening the modal box, save somewhere the target of the selection;
2. When closing the modal box, set the chosen value to that target.

For (1), I’d suggest first taking the showProductsModalBox() out of the onclick attribute (where you don’t have access to the current element) and moving it to a jQuery handler (where you do).

<a href="#"> <!-- Removed: onclick="showProductsModalBox(); return false;" -->
  Choose
</a>

I’m using $.on, so the handler will work for current and future rows alike:

$('#tblDetail tbody').on("click", "a", function() {
    $("#products_modal_box").data("target", $(this).siblings("input"));
    showProductsModalBox();
    return false;
});

I suggested saving the target as a data value of your #products_modal_box so you can access it globally. The target is the input element that is a sibling of your clicked link this (prev would also work).

Now for (2), you only have to retrieve the target and set the chosen value to it:

<a href=\"javascript:;\" onclick=\"$('#products_modal_box').data('target').val('".$fetch[0]."');$('#products_modal_box').dialog('close')();\">

That’s it! As a side note, IMHO you should avoid generating JavaScript with PHP (or using inline JS for that matter), it’s good as a quick “hack” but it’s not without its drawbacks. See qeremy’s answer in the linked question for an alternative way of accomplishing the same thing. As your project progresses, more and more complications may arise if you don’t clearly separate you data from your code.

---

Update: I’m pretty sure the code above is correct. If it’s not working for you, then your markup should not be like the one you described. Check this working example at jsFiddle. The values printed to the console are the expected ones.

Reiterating, calling siblings on you link will return elements under the same parent of it. If the structure is different, you should use other means to navigate to the right element. Like parent (one step up), children (one step down), closest (many steps up) or find (many steps down). If you need further help, please update the question with the actual markup you’re using.