how to get data from html table and put it in php text fields?

Question

This is my table created:

    <table class="table table-striped table-bordered" id="example">
    <thead>
    <?php
        foreach ($fields as $field_name => $field_display){
             echo "<th>".$field_display."</th>";
        }
    ?>
    </thead>
    <tbody>
    <?php
        foreach ($users as $row){
        echo "<tr>";
        foreach($fields as $field_name => $field_display){
            if($field_name == 'username'){
            echo "<td><a href='#' onclick=\"edituserdata('".$row->username."')\">".$row->$field_name."</a></td>";
        }else{
            echo "<td>".$row->$field_name."</td>";
        }
        }
        echo "</tr>";
        }
    ?>
    </tbody>
    </table>

And this is the bootstrap modal that appears when I click on a row:

    <!-- Modal -->
<div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Update you're data</h3>
</div>
<div class="modal-body">
        <?php echo form_open('main/update'); ?>

        <?php 

        $name = array(
                'name' => 'name',
                'id' => 'name',
                'value' => set_value('name')
        );
        ?>

        <div class="control-group">
            <label class = "control-label" for="name">Name:</label>
            <div>
                <input type="text" name="name" placeholder="Name" id="name" value="">
                <?php echo form_error('name', '<span class="alert-error help-inline">', '</span>')?>
            </div>
        </div>

        <div class="control-group">
            <label class = "control-label" for="name">Username:</label>
            <div>
                <input type="text" name="username" placeholder="Username" id="username" value="">
                <?php echo form_error('username', '<span class="alert-error help-inline">', '</span>')?>
            </div>
        </div>

        <div class="control-group">
            <label class = "control-label" for="name">Password: </label>
            <div>
                <input type="password" name="password" placeholder="Password" id="password" value="">
                <?php echo form_error('password', '<span class="alert-error help-inline">', '</span>')?>
            </div>
        </div>

        <div class="control-group">
            <label class = "control-label" for="name">Retype password: </label>
            <div>
                <input type="password" name="password1" placeholder="Retype password" id="password1" value="">
                <?php echo form_error('password1', '<span class="alert-error help-inline">', '</span>')?>
            </div>
        </div>

        <div class="control-group">
            <label class = "control-label" for="name">Email address: </label>
            <div>
                <input type="email" name="email" placeholder="Email" id="email" value="">
                <?php echo form_error('email', '<span class="alert-error help-inline">', '</span>')?>
            </div>
        </div>

        <div class="control-group">
            <label class = "control-label" for="name">Phone number: </label>
            <div>
                <input type="tel" name="tel" placeholder="Phone number" id="phone_number" value="">
                <?php echo form_error('tel', '<span class="alert-error help-inline">', '</span>')?>
            </div>
        </div>

        <div class="control-group">
            <label class = "control-label" for="name">Description: </label>
            <div>
                <input type="text" placeholder="Description" name="descr" id="description" value="">
                <?php echo form_error('descr', '<span class="alert-error help-inline">', '</span>')?>
            </div>
        </div>


</div>
<div class="modal-footer">
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span5" id="message_add_user_id">
        </div>

        <div class="span7">
            <button id="add_user_submit" type="button" class="btn btn-success">Update <i class="icon-white icon-check"></i> </button>
            <button class="btn" onClick="document.location.reload(true)" data-dismiss="modal" >Close</button>
        </div>          
    </div>
</div>
<?php echo form_close();?>

and here is the function with which the modal will appear:

    function edituserdata(username){
      $('#myModal1').modal('show');
    }

and when I click on a row, I want to have that user's data int the bootstrap modal's text fields. How can I do that?

Answer 1

You'll probably want to do everything through ajax like this:

table html page

<table class="table table-striped table-bordered" id="example">
    <thead>
    <?php
        foreach ($fields as $field_name => $field_display){
            echo "<th>$field_display</th>";
        }
    ?>
    </thead>
    <tbody>
    <?php
        foreach ($users as $row){
            echo "<tr>";
            foreach($fields as $field_name => $field_display){
                if($field_name == 'username'){
                    echo "<td><a href='#' onclick=\"edituserdata('".$row->username."')\">".$row->$field_name."</a></td>";
                } else {
                    echo "<td>".$row->$field_name."</td>";
                }
            }
            echo "</tr>";
        }
    ?>
    </tbody>
</table>   

<!-- Modal -->
<div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Update you're data</h3>
    </div>
    <div class="modal-body">

        <!-- NOTE THE EMPTY MODAL -->

    </div>
    <div class="modal-footer">
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span5" id="message_add_user_id">
                </div>

                <div class="span7">
                    <button id="add_user_submit" type="button" class="btn btn-success">Update <i class="icon-white icon-check"></i> </button>
                    <button class="btn" onClick="document.location.reload(true)" data-dismiss="modal" >Close</button>
                </div>          
            </div>
        </div>
    </div>
</div>

Ajax page

<?php echo form_open('main/update'); ?>

<?php 
    // TODO get username from $_GET['username'] and then retrieve all user information from db
    // TODO echo user data into form fields

    $name = array(
            'name' => 'name',
            'id' => 'name',
            'value' => set_value('name')
    );
    ?>

    <div class="control-group">
        <label class = "control-label" for="name">Name:</label>
        <div>
            <input type="text" name="name" placeholder="Name" id="name" value="">
            <?php echo form_error('name', '<span class="alert-error help-inline">', '</span>')?>
        </div>
    </div>

    <div class="control-group">
        <label class = "control-label" for="name">Username:</label>
        <div>
            <input type="text" name="username" placeholder="Username" id="username" value="">
            <?php echo form_error('username', '<span class="alert-error help-inline">', '</span>')?>
        </div>
    </div>

    <div class="control-group">
        <label class = "control-label" for="name">Password: </label>
        <div>
            <input type="password" name="password" placeholder="Password" id="password" value="">
            <?php echo form_error('password', '<span class="alert-error help-inline">', '</span>')?>
        </div>
    </div>

    <div class="control-group">
        <label class = "control-label" for="name">Retype password: </label>
        <div>
            <input type="password" name="password1" placeholder="Retype password" id="password1" value="">
            <?php echo form_error('password1', '<span class="alert-error help-inline">', '</span>')?>
        </div>
    </div>

    <div class="control-group">
        <label class = "control-label" for="name">Email address: </label>
        <div>
            <input type="email" name="email" placeholder="Email" id="email" value="">
            <?php echo form_error('email', '<span class="alert-error help-inline">', '</span>')?>
        </div>
    </div>

    <div class="control-group">
        <label class = "control-label" for="name">Phone number: </label>
        <div>
            <input type="tel" name="tel" placeholder="Phone number" id="phone_number" value="">
            <?php echo form_error('tel', '<span class="alert-error help-inline">', '</span>')?>
        </div>
    </div>

    <div class="control-group">
        <label class = "control-label" for="name">Description: </label>
        <div>
            <input type="text" placeholder="Description" name="descr" id="description" value="">
            <?php echo form_error('descr', '<span class="alert-error help-inline">', '</span>')?>
        </div>
    </div>

<?php echo form_close();?>

Javascript on table page

<script>
    function edituserdata(username) {
        $.get('url-to-ajax-page', {username: username}, function(resp) {
            $('#myModal1 .modal-body').html(resp);
            $('#myModal1').modal('show');
        });
    }
</script>

What we do here is have a table with usernames. When you click on a username it makes an ajax call to the page that populates the form data with the users data and shows that in the modal.

So this should get you started. I don't have time to write out the rest when it comes to submitting the form but what you will do is have another ajax query when they click on the submit button and that will post the data to probably the same ajax url. When the data comes back if there were errors in the posted data you replace the content of the model body with the ajax response otherwise you close the window.