Null value is getting passed to the Servlet from my jQuery script

Question

I am passing a value from a jsp page to bootstrap modal using jQuery and it is working. I want to pass the same value from bootstrap modal to the servlet. I tried with ajax, post, nothing seems to be working. Here is my html:

<div class="container" style="padding-top: 60px;" >                                          
    <select class="createAlarm" id="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="/ProjectName/createAlarm" method="post" id="addcard" class="form-horizontal" role="form">
         <div class="modal-body" style="height: 170px;">
          <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="alarmName">
            </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" id="priority" name="priority" class="col-md-3 control-label">
            <input type="text" class="form-control" name="name">
             </label>
            <div class="col-md-9">
                <div class="col-md-3">
                <select name="sign" 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="threshold">
                </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 -->

Here is my jQuery part:

<script>
 $('#myModal').on('show.bs.modal', function(e) {

var metrics_key = $('.createAlarm').val();
var metrics_label = $(".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"]').text(metrics_label);
$.post("/CMPE283_Project2/createAlarm", { val : $("#priority").text()});
alert($('#priority').text()); 
});

My Servlet:

String Metric = request.getParameter("val");

But, I am getting null for the String Metric. But alert pop up after clicking 'Create Alarm' button shows the correct value I want to pass the servlet. Please help. Thanks.

Answer 1

Your post looks ok, I believe it's just a matter of jquery syntax for accessing controls. In particular, I'd expect a text input with id="priority" (not just a label as it appears in your code), and then you access it with ' .val()' and not 'text()'

<input type="text" id="priority" ... />

$.post('your url', {priority: $("#priority").val()} ...

At least this works for me (jquery version 2.1.3). If you want to make sure, you can just start by posting hard coded data such as {priority: '7'}