CODEWITHSUNDEEP
javascriptjquery
user2847429
user2847429

Reputation:

Displaying form data to a table dynamically

Here is My JsFiddle

After Filling the form and clicking add button, i want the form data to be displayed inside the table. can someone help me how can i do it with jquery.

<div class="form-div">
<form class="form-inline">
    <fieldset>
        <legend>Item Details</legend>
        <label>Enter Item Name</label>
        <input type="text" placeholder="Item Name">
        <label>Quantity</label>
        <select class="input-mini">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
        <button class="btn">Add Data</button>
    </fieldset>
</form>
</div>
<div class="table-div">
<table class="table">
    <thead>
        <tr>
            <th> S.no </th>
            <th> Item Name </th>
            <th> Quantity </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
</div>

Upvotes: 1

Views: 8593

Answers (3)

Anand Jha
Anand Jha

Reputation: 10714

try this 

<div class="">

        <fieldset>
            <legend>Item Details</legend>
            <label>Enter Item Name</label>
            <input type="text" placeholder="Item Name" id="item_name">
            <label>Quantity</label>
            <select class="input-mini" id="quentity">
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
            </select>
            <button class="btn" onclick="viewRecord()">Add Data</button>
        </fieldset>

</div>
<div class="">
    <table class="table controls controls-row">
        <thead>
            <tr id="heading">
                <th> S.no </th>
                <th> Item Name </th>
                <th> Quantity </th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

js part

var index=0;
function viewRecord(){
    index++;
$('table tbody').append('<tr><td>'+index+'</td><td>'+$("#item_name").val()+' </td><td> '+$("#quentity option:selected").val()+'</td></tr>');
}

Working Demo

Upvotes: -1

Rajesh
Rajesh

Reputation: 3778

Wrote the code and added fiddle.

You need to get values of text and select and create a new row, then add to tbody.

Fiddle: http://jsfiddle.net/aH6hb/2/

Upvotes: 2

letiagoalves
letiagoalves

Reputation: 11302

You should give unique identifiers to the elements you want to manipulate. After that you can do something like this using click(), val() and append() jQuery functions:

var sno = 0;
$("form button.btn").click(function() {
    var item_name = $("#item_name").val();
    var quantity = $("#quantity").val();
    var new_row = "<tr><td>" + ++sno + "</td><td>" + item_name + "</td><td>" + quantity + "</td></tr>";
    $("table tbody").append(new_row);
    return false;
});

Working demo

Better give a ID to form and table elements if they are not unique in the window and also to optimize DOM selections.

Upvotes: 4

Related Questions