Fill form with table row data using javascript

Question

I am having trouble filling a form with table data.The form is in a modal dialogue and I want the dialogue to popup with inputs filled when the user clicks on the glyphicon, glyphicon-pencil.

I have looked at Fill form using table data, How to fill input fields in form with data from row in html table I want to edit, jQuery dynamic fill in form fields with table data, and Automatic fill a table with data using JavaScript and JSON, and none of their solutions worked for me, so please help. here is the modal and form code:

<div class="modal fade" id="New-Employee-Modal" 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-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Employee</h4>
            </div>
            <div class="modal-body">

                <div id="data">
                    <form id="person">
                        <div class="form-group">
                            <label class="control-label">First Name:</label>
                            <input class="form-control" id="FirstName" name="FirstName" type="text">
                        </div>
                        <div class="form-group">
                            <label class="control-label">Last Name:</label>
                            <input class="form-control" id="LastName" name="LastName" type="text">
                        </div>
                        <div class="form-group">
                            <label class="control-label">Net Id:</label>
                            <input class="form-control" id="NetId" name="Netid" type="text">
                        </div>
                        <div class="form-group">
                            <label class="control-label">Phone #:</label>
                            <input class="form-control" id="PhoneNumber" name="PhoneNumber" type="tel" required />
                        </div>

                        <div class="form-group">
                            <label class="control-label">Email:</label>
                            <input class="form-control" id="Email" name="Email" type="text">
                        </div>
                        <div class="form-group">
                            <label class="control-label">Role</label>
                            <input class="form-control" id="Role" name="Role" type="text">

                        </div>
                        <div class="form-group">
                            <label class="control-label">Active:</label>
                            <br />
                            <input name="Active" type="radio" value='<span class="glyphicon glyphicon-ok-circle">' /> Active
                            <br />
                            <input name="Active" type="radio" value='<span class="glyphicon glyphicon-ban-circle">' /> Not Active
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" onclick="ResetForm()">Reset</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="AddData()">Save</button>
                </div>
            </div>
        </div>
    </div>

Here is the part of the table:

<div id="tab">
    <table class="table table-striped" id="list">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Net ID</th>
                <th>Phone #</th>
                <th>Email</th>
                <th>Active</th>
                <th>Role</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Joel</td>
                <td>lewis</td>
                <td>lewisj</td>
                <td>333-555-3667</td>
                <td>[email protected]</td>
                <td>
                    <a id="icon-toggle" class="btn-default">
                        <span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>
                    </a>
                </td>
                <td>Developer</td>
                <td>
                    <span class="glyphicon glyphicon-pencil" data-target="#New-Employee-Modal" onclick="UpdateForm()" aria-hidden="true"></span>
                    <a id="icon-toggle-delete" class="removebutton">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </a>

                </td>
            </tr>

and here is the javascript:

function AddData() {
    var rows = "";
    var FirstName = document.getElementById("FirstName").value;
    var LastName = document.getElementById("LastName").value;
    var NetId = document.getElementById("NetId").value;
    var PhoneNumber = document.getElementById("PhoneNumber").value.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
    var Email = document.getElementById("Email").value;
    var Active = document.querySelector('input[name="Active"]:checked');
    Active = Active ? Active.value : '';
    var Role = document.getElementById("Role").value;
    rows += "<td>" + FirstName + "</td><td>" + LastName + "</td><td>" + NetId + "</td><td>" + PhoneNumber + "</td><td>" + Email + "</td><td>" + Active + "</td><td>" + Role + '</td><td>  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> <a id="icon-toggle-delete2" class="removebutton">  <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </a></td>';
    var tbody = document.querySelector("#list tbody");
    var tr = document.createElement("tr");

    tr.innerHTML = rows;
    tbody.appendChild(tr)

}

function UpdateForm() {

    $('span.glyphicon glyphicon-pencil').click(function() {
        //! Don't know what do here
    });

}

function ResetForm() {
    document.getElementById("person").reset();
}

here is the jsfiddle http://jsfiddle.net/neu4gh37/2/

top.dev · Accepted Answer · 2015-05-19 17:09:11Z

1

You can use such an example of code. Note, you don't need call UpdateForm() with onclick event, you added this event by jQuery for the selector 'span.glyphicon-pencil' (I fixed it a little)

$('span.glyphicon-pencil').click(function () {
    var formFields = [];
    var $target = $(event.target);
    var $row = $target.closest('tr');
    $row.find('td').each(function (index, el) {
        var fieldValue = $(el).html();
        switch (index) {
            case 0:
                formFields['FirstName'] = fieldValue;
                break;
            case 1:
                formFields['LastName'] = fieldValue;
                break;
            default: 
                break;
        }
    });

    fillForm(formFields);
});

function fillForm(data) {
    var $form = $('#person');
    $form.find('input').each(function () {
        var $input = $(this);
        switch ($input.attr("name")) {
            case 'FirstName':
               $input.val(data['FirstName']);
               break;
            case 'LastName':
               $input.val(data['LastName']);
               break;
            default:
                break;

        }
    });
}

answered May 19, 2015 at 17:09

top.dev

4571 gold badge6 silver badges18 bronze badges

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

1 Comment

friendo9876 Over a year ago

I couldn't get your example code to work, maybe I am implementing it wrong? jsfiddle.net/neu4gh37/3

Collectives™ on Stack Overflow

Fill form with table row data using javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related