Fetching text input val in jquery is always empty

Question

I'm fetching the value the user has put into a text field in Jquery but the value is empty. Maybe I'm doing something wrong here or maybe I'm trying to access a clone of something istead of the real element because the inputed value is inside a popover in a fullcalendar. And I'm using bootstrap. Here is my code.

$(document).on('click', '#saveEvent', function () {
    //save to db
    var yogaspaceid = $("#HiddenYogaSpaceId").val();
    var eventTitle = $("#eventTitle").val(); // always empty
    //var eventTitle = $("#eventTitle").attr('value'); //always emtpy
    var eventStartTime = $( "#timeSelect" ).val();
    var eventDuration = $("#timeDuration").val();
    $.post(
            '/ManageSpaces/SaveNewEvent',
            { id: yogaspaceid, title: eventTitle, startTime: eventStartTime, duration:  eventDuration}
        );
    $calPopOver.popover('destroy');
    //refresh callendar or add new event then re render
});

<div id="eventcalendar">
            <div class="col-md-10">
                <div id='fullcalendar' style="width:100%"></div>
                <div id="day-popover-head" class="hide">Add Event</div>
                <div id="day-popover-content" class="hide">
                    @*<form role="form">*@
                        <div class="form-group">
                            <label for="eventTitle">Title:</label>
                            <input type="text" id="eventTitle" class="form-control">
                        </div>

                        <div class="form-group">
                            <label for="timeSelect">Select time:</label>
                            <select class="form-control" id="timeSelect">
                                
                            </select>
                            <br>
                            <label for="timeDuration">Select duration:</label>
                            <select class="form-control" id="timeDuration">
                                <option value="30">30 min</option>
                                <option value="45">45 min</option>
                                <option value="60">60 min</option>
                                <option value="75">75 min</option>
                                <option value="90">90 min</option>
                                <option value="105">105 min</option>
                                <option value="120">120 min</option>
                            </select>
                        </div>

                    <div class="form-inline">
                        <button type="button" id="saveEvent" class="btn btn-default">Submit</button>
                        <button type="button" id="cancelEvent" class="btn btn-default">Cancel</button>
                    </div>
                    @*</form>*@
                </div>
            </div>
            <div id="eventDetails" class="col-md-2 collapse" style="background-color:yellow;">
                hello
            </div>
        </div>

Your code works fine. Check this -- http://jsfiddle.net/8nw5xkom/ — Sam, Apr 03 '15 at 00:59
not sure why it doesn't work for me in my code but I solved it by looking at another post. Will post answer below. — chuckd, Apr 03 '15 at 01:10
may be you have two elements with same **id** `eventTitle`, just inspect your html code — Fares M., Apr 03 '15 at 05:26

score 1 · Answer 1 · edited May 23 '17 at 11:53

1

Had to use

var eventTitle = $(".popover #eventTitle").val();

not sure why I had to use .popover in the call, but found the solution here

edited May 23 '17 at 11:53

Community

1
1

answered Apr 03 '15 at 01:11

chuckd

13,460
29
152
331

Fetching text input val in jquery is always empty

1 Answers1