Setting the input value of a form element from javascript

Question

My form element looks like

<div class="modal fade" id="modal-xl">
                    <div class="modal-dialog modal-xl">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">You Can Edit This Item</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                            </div>
                            <div class="modal-body">
                                <form role="form" id="modal-form">
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="receivingdate">Receiving Date</label>
                                            <input type="date" class="form-control" id="receivingdate" placeholder="Select Receiving Date" required>
                                        </div>

from javascript I just want to set receivingdate to x/x/x

 var form = document.getElementById('modal-form').getElementsByClassName('form-group');

Not sure why this does not work.

Answer 1

var form = document.getElementById('modal-form').getElementsByClassName('form-group');

Does not work because your document.getElementById('modal-form') gets a specific element while .getElementsByClassName('form-group') can't be used to get children of that element. Additionally, the form variable would simply hold the element retrieved from the document.

If you absolutely need to get all .form-group elements under #modal-form, then you can use

var elements = document.querySelector("#modal-form .form-group");

If you're just trying to set the #receivingdate date element, then you can use the value property of that element.

document.getElementById("receivingdate").value = "2019-12-10";

Note that this will require a string in the format of yyyy-MM-dd . You can't set that box to x/x/x literally, but setting it to the above value will give you 10/12/2019 or 12/10/2019 depending on your locale.

If you simply want it to default to todays date, then you can use

document.getElementById("water-volume").value = new Date().toLocaleDateString('en-CA');

Where en-CA sets todays date to the string format of Canadian English date format, which just so happens to be the format that a date element requires.

If you want to retrieve the current date, you would simply use

var date = document.getElementById("receivingdate").value;

And you'd put that inside an event handler like on change.

If you're looking to do more advanced manipulation of the DOM, then I'd look into jQuery . More robust date formatting can be done using date.js .

Answer 2

f you just want to get value of receivingdate.Try this

document.getElementById('receivingdate').addEventListener('change', function(e) {
  var form = document.getElementById('receivingdate').value;
  console.log(form)

})