stackoverflownewbie stackoverflownewbie - 4 months ago 34
HTML Question

Passing data from bootstrap model

I am trying to pass the data from bootstrap model and display it on a table. However, the problem here is I am unable to pass the data and the column only display null values. I am a newbie, so I need some help on how to pass the data Day and Session?

<table class="table order-list" id="myTable">
<thead>
<tr>
<th>
Day
</th>
<th>
Type
</th>
</tr>
</thead>
<tbody>
</tbody>

</table>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div id="daypicker" class="modal-body">
<div class="container">
<h5>Select A Day: </h5>
<select class="selectpicker" data-style="btn-info" multiple data-max-options="1" data-live-search="true">
<optgroup label="Day">
<option>Monday</option>
<option>Tuesday</option>
</optgroup>
</select>
<h5>Select A Session: </h5>
<select class="selectpicker" data-style="btn-info" multiple data-max-options="1" data-live-search="true">
<optgroup label="Session">
<option>Morning</option>
</optgroup>
</select>
</br>
</br>
</div>
</div>
</br>
</br>
</br>
<div class="modal-footer">
<button id="addrow" type="button" class="btn btn-primary">Add</a>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>

<script>
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control" name="Day' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="Session' + counter + '"/></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
});
</script>

Answer
  1. You haven't closed the tag correctly for the "#addrow" button.

  2. You can extract the values from the modal like so (after you give the <select> elements a proper id:

    var dayPickerSelect1 = $("#daypicker-select1").val();

    var dayPickerSelect2 = $("#daypicker-select2").val();

  3. You can then pass the extracted values to the table like so:

    <input type="text" class="form-control" name="Day' + counter + '" value="' + dayPickerSelect1 + '"/>

    <input type="text" class="form-control" name="Session' + counter + '" value="' + dayPickerSelect2 + '"/>