Showing Jquery Variable in HTML

Question

I have used jQuery Datepicker successfully for some time to input two dates ("ArrivalDate" and "DepartureDate"). Now I am trying to adapt the present page to show the difference between the two. This should be revealed (jQuery slideDown) after the second date has been inputted.

My HTML is

<form action="tba.php" method="post" id="bookform" name="bookform">
    <table cellspacing="3px" width="100%" border="0">
        <tr>
            <td align="right">
<b>Arrival Date: </b>

            </td>
            <td>
                <input name="ArrivalDate" id="ArrivalDate" size="10">
            </td>
        </tr>
        <tr>
            <td align="right">
<b>Departure Date: </b>

            </td>
            <td>
                <input name="DepartureDate" id="DepartureDate" size="10">
            </td>
        </tr>
    </table>
    <div id="numnights" style="display:none">
        <table cellspacing="3px" width="100%" border="0">
            <tr>
                <td align="right" width="48.5%">&nbsp;</td>
                <td>That's <span id="nights"></span> nights in total</td>
            </tr>
        </table>
    </div>
</form>

and the jQuery is

$(document).ready(function () {

    //jQuery UI datepicker
    $("#ArrivalDate").datepicker({
        dateFormat: "d M yy",
        minDate: 0,
        showOtherMonths: true,
        selectOtherMonths: true,
        onClose: function () {
            var DepDate = $('#DepartureDate');
            var limitDate = $(this).datepicker('getDate');
            //add 1 day to Arrival Date
            limitDate.setDate(limitDate.getDate() + 1);
            DepDate.datepicker('option', 'minDate', limitDate);
            $(this).datepicker('option', 'minDate', minDate);
        }
    });

    $('#DepartureDate').datepicker({
        dateFormat: "d M yy",
        showOtherMonths: true,
        selectOtherMonths: true
    });

    //Reveal number of nights
    $("#DepartureDate").on("change", function () {
        var arr_date = $("#ArrivalDate").datepicker('getDate');
        var dep_date = $("#DepartureDate").datepicker('getDate');
        var diff = Math.floor((dep_date.getTime() - arr_date.getTime()) / 86400000);
        $('#nights').val(diff);
        $("#numnights").hide().slideDown(1200);
    });
});

Demo

The problem I have is that the span (id=nights) is always blank. I have tried substituting other elements: input works p doesn't work

How can I persuade it to display a piece of text saying "That's 5 nights in total"?

score 2 · Accepted Answer · answered Jun 17 '15 at 18:25

2

$('#nights') selects the <span id="nights"></span> element. Only form inputs have the .val() method. What you're looking for is .text() which is used for inserting text nodes into

$('#nights').text(diff);

Note that .html() would work as well

$('#nights').html(diff);

But, .html() causes the value to be rendered as HTML, which could be slightly slower simply because it has to be sent to the HTML parser but it won't be noticeable.

answered Jun 17 '15 at 18:25

So simple. (Nearly as simple as me!) Tiny Giant gets the green tick because his answer is the most comprehensive, but all answers were valid. Thanks to all. – TrapezeArtist Jun 17 '15 at 22:03

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

You should use .text() for the span and not .val():

$('#nights').text(diff);

Demo

See Difference between val() and text() for reference

edited May 23 '17 at 12:16

Community

1
1

answered Jun 17 '15 at 18:11

Brooklyn Web Developers

395
2
10

score 1 · Answer 3 · answered Jun 17 '15 at 18:13

1

You could use .html() to add that text in.

answered Jun 17 '15 at 18:13

9Deuce

689
13
27

score 0 · Answer 4 · answered Jun 17 '15 at 18:41

0

just use

$(".element").text(jQuery element here);

answered Jun 17 '15 at 18:41

Viraj Shah

990
8
8

Showing Jquery Variable in HTML

4 Answers4