Get value for joomla calendar input box to use in ajax call

Question

I have a joomla calendar set up:

        <?php
        defined('_JEXEC') or die;
        JHTML::_('behavior.calendar');
        echo '<div id="calendarBoxes"  >';
        echo '<div id="datereceived1" class="datereceived1" >';
        echo JHtml::calendar(date("d/m/Y"),'dateReceived','dateReceived' , '%d-%m-%Y');
        echo "</div>";

This works fine and shows the calendar which then populates the box correctly.

I need to get the populated value so that I can use it in an ajax call to save it to a database.

I'm doing this:

stock.datereceived = jQuery( "#dateReceived" ).val();

but this returns nothing.

I looked at the code inspector and I can see the value:

<input type="text" id="dateReceived" name="dateReceived" value="" data-alt-value="13-10-2019" autocomplete="off" data-local-value="13-10-2019">

but I can't access the data. I can't use

jQuery("#dateReceived).attr("data-alt-value");
jQuery("#dateReceived).val();

And I can't find any getter or setter for the calendar.

Any help would be great. thanks

Update 1

I've tried a few debug type things without success:

stock.datereceived = jQuery( "#dateReceived" ).val();
console.log("stock.datereceived is "+stock.datereceived);
console.log("getElementById is "+jQuery("dateReceived").attr("data-alt-value") );

which gives stock.datereceived is stock-lists:268 getElementById is undefined in the element inspector

Answer 1

Here's the glaring issue that I can detect via Google Chrome's developer tools...

You have multiple instances of the element id (one nested inside another) that you are attempting to access. id attributes need to be unique on a document.

---

I strongly urge you to make the the necessary changes to make the id attributes unique before progressing with your application (this is not only a matter of writing good markup, it is a matter of stability as you're seeing first-hand the implications).

That said, you need to increase the specificity of your selector so that jQuery knows precisely which element you wish to access. Fortunately, the adjustment is super simple:

jQuery('input#dateReceived').val();