PHP / javascript - How to get value from Input Text Box, and append it to div/Form

Question

EDIT QUESTION: In my WHILE loop, it creates an readonly input text box, and the values are whatever records it pulls from my Database. After each text box, there is an add button, which is suppose to append the value of the text box beside the button, to another div on my page. The only value being added is the first record. I know why, I just can't fix. Any ideas?

    $query = "SELECT `$posResults` FROM test.departments ";
    $result = mysql_query($query);
                        
    if ($result) {
    //output results from database
                                    
    echo 'Software';
    while($row = mysql_fetch_array($result))
    {
      echo '<tr>';
      echo '<td><input type="text" id="rSoft" size="50" name="reqSoft" value="'.$row[0].'" readonly/> <button  id="toForm" value="Add" >Add</button>';
      echo '</td>';
      echo '</tr>';
     }
      echo "<script type='text/javascript'>$(document).ready(function(){ $('button#toForm').click(function(){ var req = document.getElementById('rSoft').value;  $('<tr><td>' + req + '</td></tr>').appendTo('#empInfo');}); });</script>";                                     
     }

Here is an image. When I Hit Add, I want the value to go to the div. Right now, only the first value is being appended. php js add to div

You have multiple entities which share an id. Id's are supposed to be unique. — OIS
– OIS, Commented Oct 2, 2013 at 20:12
Put your js-code into a separate js-file. It would make it easier to maintain and read your code. — bestprogrammerintheworld
– bestprogrammerintheworld, Commented Oct 2, 2013 at 20:16

grant117 · Accepted Answer · 2013-10-03 22:15:47Z

Found out the answer that covers everything: On my main page:

    $query = "SELECT `$posResults` FROM test.departments ";
    $result = mysql_query($query);

    if ($result) {
    //output results from database

    echo 'Software';
    echo '<table>';

    $i = 0;
    while($row = mysql_fetch_array($result))
    {
      echo '<tr><td><input type="text" id="rSoft'.$i.'" value="'.$row[0].'" name="reqSoft" readonly/>';
      echo '<button  id="toForm'.$i.'"  data="rSoft'.$i.'" >Add</button>';
       $i++;
      }
       echo '</table>';
    }

On my JS page:

    /*Add software to form*/
    $(document).ready(function(){
    $('button').on('click' , function(){  
      var inputID = $(this).attr('data');
      var theValue = $('#' + inputID).val();
        $('#empInfo').append('<tr><td>' + theValue + '</td></tr>')
       });

This will append the data of the input box to where I need it to go. Thank you OIS and Kristen Jukowski for getting me started on the resolution! });

Community · Accepted Answer · 2017-05-23 10:32:48Z

0

The IDs of your inputs need to be unique. You can pass the values, though, as an array if you change the ID to something like this: echo '<td><input type="text" id="reqSoft[]" size="50" name="reqSoft[]" value="'.$row[0].'" readonly/> <button id="toForm" value="Add" >Add</button>'; Your passed values will be available as an array in $_POST['reqSoft']. (First textbox value would be $_POST['reqSoft'][0], etc.)

Similar question/answer here: Dynamically create unique ID for an array of input fields using Javascript

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Oct 2, 2013 at 20:18

Kristen Waite

1,4752 gold badges16 silver badges28 bronze badges

Collectives™ on Stack Overflow

PHP / javascript - How to get value from Input Text Box, and append it to div/Form

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related