Dynamicly add data to a hidden field

Let me see first if I understand the problem correctly.

Each row has an "Add Note" button and a different $data->id value. When the user clicks a certain "Add Note" button you want the corresponding id to be placed into the value attribute of the following hidden form field:

<?php echo form_hidden('username', 'johndoe'); ?>

I'll try to give you an answer based on that. I'll update my answer if you're trying to do something else instead.

I think you can write a click handler for the buttons and then retrieve the user id for that row and write it out to the hidden input.

This is the jQuery I came up with. It assumes only one hidden input field on the page. If you have others then we'll have to change the selector for that hidden input. I don't know how much jQuery you know so let me know if you need an explanation of the code.

$('button[data-target="#addNote"]').click(function() {
  var userId = $(this).parent().siblings(":first").text();
  $('input[type="hidden"]').val(userId);
});

I did a codepen for a proof of concept so you can verify that it's doing what you want before you put it into your code. I stripped down the html to what I thought was essential for the problem.

http://codepen.io/anon/pen/sjIfz/

You'll have to use your browser's developer tools if you want to see the input value changing as you click each of the buttons. You'll need to inspect the form element and then watch the value as you click the buttons. I use firebug in firefox.

We'll have to see if this code still works correctly when the modal is called up.

Hi Jason.

Thank you very much for your answer. Your assumptions were right. Unfortunately I am not familiar at with jquery at all.

So I added this instead of the hidden field:

´´´ <script> $('button[data-target="#callAgain"]').click(function() { var userId = $(this).parent().siblings(":first").text(); $('input[type="hidden"]').val(userId); }); </script> ´´´

But how does this refer to the ´´´$data->id´´´?

Hi Dennis,

After I posted I realized I had some confusion on this. You're calling up two different modals on that page. You have a couple links that are calling up the "call again" modal and then your "add note" button was calling up an "addNote" modal. The modal that you posted on the page looks like it's the call again modal based on its' id and the modal title of "Call again"

Is the modal you posted supposed to be the "addNote" modal but your forgot to change the id and title?

I can explain the jQuery to you but I'd like to clear up my confusion on this first in case the jQuery needs to be changed.

Also, do you only have the one hidden input field on the page?

Another thing I should point out is that I don't believe the output html for your modal dialog would validate.

You're opening your form before the first modal div and then closing the form before the last closing div.

So I think you have a situation like this:

<form> <div> </form> </div>

Which wouldn't be valid html. View the source of your html in the browser to see if that's the case.

All of your modal content should be inside the modal-body div. I recommend that you open and close your form within that div. This way your submit button will also be up there with your form inputs instead of down next to the close button in the modal footer. By having those two buttons close together you risk having the user click on the wrong one.

I would suggest doing your dialog like this:

<!-- Modal -->
<div class="modal fade" id="callAgain" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Call again</h4>
      </div>
      <div class="modal-body">
<?php echo form_open('today/add_contact_record'); ?>
      <?php echo form_hidden('username', 'johndoe'); ?>

            <div class="form-group">
        <?php echo form_label('Date','', $labelattributes); ?>
        <div class="input-group date form_date col-md-12" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
        <?php echo form_input($date); ?>
                   <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                   <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
        <?php echo form_error('Date'); ?>
         </div> 
     </div>

    <div class="form-group">
        <?php echo form_label('Time','', $labelattributes); ?>
                <div class="input-group date form_time col-md-12" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
        <?php echo form_input($time); ?>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
        <?php echo form_error('Time'); ?>
         </div> 
     </div>
<?php echo form_textarea($notes); ?>
<?php  echo form_submit('submit', 'Submit', 'class="btn btn-default btn-lg", type="button"');    ?>
  <?php echo form_close();?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Hi Jason.

Thanks for answering. The intention of this form is to create kind of a call/to-do list.

There are indeed two modals, that are called through the buttons.

The callagain-Button/Modal. There is a time, date and note field which will be added to database. In order to reference it for the update query I would need the user's id in a hidden field.

If I would find a working example I might be able to adapt it myself.

Hi Jason.

Thanks for answering. Indeed there are two modals.

One for adding date, time and a note (textarea) and another one for just adding a note. When clicking on submit in these modals an update query gets launched.

Ok, so both modals will be saving data back to the server and you need the userId in each one.

Does this mean both of your modals have a hidden input field that needs to contain the userId?

yes. that's correct.

Edit: fixed some typos

This jQuery code should work for the "Add note" button. I've changed the selector for the hidden input now that i know there's two on the page.

$('button[data-target="#addNote"]').click(function() {
  var userId = $(this).parent().siblings(":first").text();
  $('#addNote input[type="hidden"]').val(userId);
});

It selects all the buttons that have a data-target attribute equal to "#addNote". It then assigns a click handler to all of those buttons and passes in a function which will be executed each time one of the buttons is clicked.

We need to know which button was clicked so we can retrieve the corresponding id. $(this) refers to the button that was clicked. At this point it's a matter of navigating the dom hierarchy to get to that first <td> which contains the id in question.

parent() will get us up to the td that contains the button.

siblings(":first") will select all of the other td siblings and then filter it down to the first td.

text() will give us the text of that td which is the userId and then I'm storing that in the userId variable.

Then it's selecting the hidden input that is within the modal with an id of "AddNote" and setting the value to the userId.

We also need to do this for the "call again" links but navigating the dom will be a little different because those links are nested deeper into the <td>

$('a[data-target="#callAgain"]').click(function(e) {
e.preventDefault();
  var userId = $(this).parents("td").siblings(":first").text();
  $('#callAgain input[type="hidden"]').val(userId);
});

The only difference here is that we're selecting links with a data-target of #callAgain. Since it's a link we're clicking, we need to prevent the default link action. Then the navigation to the first td is different.

I didn't test this second one so let me know if it doesn't work.

Both of these click handlers should be placed inside a script tag probably before your closing body tag.

Let me know what the results are.

Hi Jason.

Thanks for your explanations. Unfortunately the hidden field is populated with the value of userId, not the number

Here is the code in modal right now:

<?php echo form_hidden('userId', 'userId'); ?>

    <script type= text/javascript>
      $('a[data-target="#callAgain"]').click(function(e) {
      e.preventDefault();
        var userId = $(this).parents("td").siblings(":first").text();
        $('#callAgain input[type="hidden"]').val(userId);
      });
       </script>

and

    <?php echo form_hidden('userId', 'userId'); ?>

    <script type= text/javascript>
      $('a[data-target="#callAgain"]').click(function(e) {
      e.preventDefault();
        var userId = $(this).parents("td").siblings(":first").text();
        $('#callAgain input[type="hidden"]').val(userId);
      });
       </script>

Hi Jason. The jquery script works correctly and I get the right alerts displayed. But how do I get the data in to a hidden field?

Hello Jason.

Thanks for your help. What I did ist I changed the input type to text instead of hidden. So far I could see where I lose my variable. When I call my modal it is still there, but when I submit it and try to store in the database I lose my variable. But I guess that is more of an php/codeigniter problem.

Thanks a lot for your help!

HI Jason.

I managed to get it working. Thank you again for your awsome help!

At the end it was php that did't get the value of the form.

Just a quick question: How would that code look if you would select a table data field with an id.

<td id="companyID">
<td id="employeeID">

I have modified my table structure. so now in need two id's.

Thanks in advance.

so this is what I ended up with. The alerts are still correct. But the form values are wrong. They only take the first value.

      <script type= text/javascript>
      $('button[data-target="#addNote"]').click(function() {
      //alert('Clicked the  Add note button');
      var companyID = $(this).parent().siblings(":first").text();
      var employeeID = $(this).parent().siblings(":first").next().text();


      alert(companyID);
      alert(employeeID);
      $('#addNote input[type="text"]').val(companyID);
      $('#addNote2 input[type="text"]').val(employeeID);

      });

      $('a[data-target="#callAgain"]').click(function(e) {
    //  alert('Clicked the call again link');
      e.preventDefault();
      var companyID = $(this).parents("td").siblings(":first").text();
      var employeeID = $(this).parent().siblings(":first").next().text();

      alert(companyID);
      alert(employeeID);

      $('#callAgain input[type="text"]').val(companyID);
      $('#callAgain2 input[type="text"]').val(employeeID);

      });
      </script>

Awsome. Thank you very much. Defenetly will hit the javascript course here on treehouse.