Jquery val() does not bring back value of textbox

Question

I am trying to assign textbox values within my object but am not getting any values back at all. My textboxes are held within a modal, and the assignment fires off when I click the submit button which the code does hit the the assignment but it's not getting back the value typed in.

if (($("#editWidgetModal").data('bs.modal') || {}).isShown) {
        //check for onclick event for the save button
        $('#edit-widget').on('click', null, function (event) {
            event.preventDefault()
            var completed;

            //loop through each input box in the modal
            $('#editWidgetModal input[type=text]').each(function () {
                if (this.value == "") {
                    alert("Please enter all fields");
                    completed = false;
                    return false;
                } else {
                    completed = true;
                    return false;
                }
            });

            if (completed) {

                //Now assign all textboxes and create an object to pass into the lineBasedChart mutator
                var chartEditOptions = {
                    title: $('#chart-title').val(),
                    subtitle: $('#chart-subtitle').val(),
                    yAxis: $('#chart-yAxis').val(),
                    tooltip: $('#chart-tooltip').val(),
                    lineWidth: parsetInt($('#chart-lineWidth').val())
                };

                //set renderTo data attribute to the widgets created element
                overlayedData.data("data-render", overlayedData.closest('.grid-stack-item-content').attr('id'));
                chart[0].SetNewOptions(chartEditOptions);
                $('#editWidgetModal').modal('hide');
            }

        });
    }

and here is my HTML

<div class="modal fade" id="editWidgetModal" 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">Edit Widget</h4><!--add depending on which panel you have clicked-->
        </div>
        <div class="modal-body" id="myModalBody">
            <!--Depending on which panel insert content-->
                <div class="form-horizontal">
                    <div class="form-group">
                        <div class="col-md-2">
                            Chart title:
                        </div>
                        <div class="col-md-10">
                            <input id="chart-title" class="form-control" type="text" value="" name="title">
                        </div>

                    </div>
                    <div class="form-group">
                        <div class="col-md-2">
                            Chart subtitle:
                        </div>
                        <div class="col-md-10">
                            <input id="chart-subtitle" class="form-control" type="text" value="" name="subtitle">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2">
                            Y-Axis text:
                        </div>
                        <div class="col-md-10">
                            <input id="chart-yAxis" class="form-control" type="text" value="" name="yAxis">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2">
                            Tooltip text:
                        </div>
                        <div class="col-md-10">
                            <input id="chart-tooltip" class="form-control" type="text" value="" name="tooltip">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2">
                            Line width:
                        </div>
                        <div class="col-md-10">
                            <input id="chart-lineWidth" class="form-control" type="text" value="" name="lineWidth">
                        </div>
                    </div>                        
                    <div class="form-group">
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <button type="submit" value="DeleteWidgetConfirmed" class="btn btn-default btn-ok" id="edit-widget">Save</button>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>

Answer 1

You have a typo in your code: parsetInt should be parseInt ...

Have you checked your console?

$('#edit-widget').on('click', null, function (event) {
  event.preventDefault()
  handleFormData();
})

  function handleFormData() {
    var chartEditOptions = {
      title: $('#chart-title').val(),
      subtitle: $('#chart-subtitle').val(),
      yAxis: $('#chart-yAxis').val(),
      tooltip: $('#chart-tooltip').val(),
      lineWidth: parseInt($('#chart-lineWidth').val())
    };

    
    document.getElementById('result').innerHTML = JSON.stringify(chartEditOptions);
    
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-horizontal">
                    <div class="form-group">
                        <div class="col-md-2">
                            Chart title:
                        </div>
                        <div class="col-md-10">
                            <input id="chart-title" class="form-control" type="text" value="" name="title">
                        </div>

                    </div>
                    <div class="form-group">
                        <div class="col-md-2">
                            Chart subtitle:
                        </div>
                        <div class="col-md-10">
                            <input id="chart-subtitle" class="form-control" type="text" value="" name="subtitle">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2">
                            Y-Axis text:
                        </div>
                        <div class="col-md-10">
                            <input id="chart-yAxis" class="form-control" type="text" value="" name="yAxis">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2">
                            Tooltip text:
                        </div>
                        <div class="col-md-10">
                            <input id="chart-tooltip" class="form-control" type="text" value="" name="tooltip">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-2">
                            Line width:
                        </div>
                        <div class="col-md-10">
                            <input id="chart-lineWidth" class="form-control" type="text" value="" name="lineWidth">
                        </div>
                    </div>                        
                    <div class="form-group">
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <button type="button" value="DeleteWidgetConfirmed" class="btn btn-default btn-ok" id="edit-widget">Save</button>
                        </div>
                    </div>
                </div>

<div id="result"></div>

Answer 2

The textbox is not in the DOM when you run your script.