How to pass a dropdown value from 1 page to bootstrap modal? - html

Question

I have a dropdown with a list of values. When user selects 1 from the dropdown and click on a button, a bootstrap modal pops up. I want to pass the dropdown value to the pop up. I know how to do this with 2 different html pages. But can anyone help how to pass the value to the modal.
Here is my html code:
<div class="container" style="padding-top: 60px;" >
<select class="open-CreateAlarm" name="metrics">
<option value="cpuUsage">CPU Usage</option>
<option value="memoryUsage">Memory Usage</option>
<option value="diskRead">Disk Read</option>
<option value="diskWrite">Disk Write</option>
<option value="diskUsage">Disk Usage</option>
<option value="netUsage">Net Usage</option>
</select>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-whatever="Create Alarm">Create Alarm</button>
</div>
<!-- Modal- Create Alarm -->
<div class="modal fade" id="myModal" 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-hidden="true">×</button>
<h4 class="modal-title">Create Alarm</h4>
</div>
<form action="/createAlarm" method="post" id="addcard" class="form-horizontal" role="form">
<div class="modal-body" style="height: 250px;">
<div class="form-group" style="height: 30px;">
<label for="title" class="col-md-3 control-label">Name</label>
<div class="col-md-9">
<input type="text" class="form-control" name="name">
</div>
</div>
<div class="form-group" style="height: 30px; margin-bottom:30px;">
<label for="title" class="col-md-3 control-label">Description</label>
<div class="col-md-9">
<textarea class="form-control" name="desc"></textarea>
</div>
</div>
<div class="form-group">
<label for="priority" class="col-md-3 control-label">Whenever metric: </label>
<div class="col-md-9">
<div class="col-md-3">
<select name="metric" class="form-control">
<option value="lessthan"><</option>
<option value="greaterthan">></option>
<option value="lessthanequalto"><=</option>
<option value="greaterthanequalto">>=</option>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" name="metricnum">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-primary" id="formSubmit" type="submit">Create Alarm</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
In the pop up, in the "Whenever metric" label, instead of "metric" I want to show the value I am selecting from the dropdown. Any help would be appreciated. Thanks.

Answer 1

I would use JavaScript to read the value from the user selection, and then using DOM manipulation to insert the value where it is needed. The HTML of the modal is just part of your webpage, so the fact that it's a modal shouldn't really change anything.
Using jQuery, for example, you can put a trigger on show.bs.modal, you can read the value from anywhere... inside some other html, in the data attribute, wherever you want to put it.
$('#myModal').on('show.bs.modal', function(e) {
var metrics_key = $('.open-CreateAlarm').val();
var metrics_label = $(".open-CreateAlarm option:selected").text();
// Now you have the key and label in variables.
// Write the key into the textfield.
$('#myModal input[name="name"]').val(metrics_key);
// Change the HTML of an element to the label.
$('#myModal label[for="priority"]').html(metrics_label);
});