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.

What about `document.getElementById("receivingdate").value = "x/x/x";` Edit: Scratch that. It won't let you put x/x/x as a value because it doesn't conform to a date format, e.g. dd/mm/yyyy or yyyy-MM-dd. You'll need to put an actual date in there if you want a default. — Zei, Dec 10 '19 at 04:36
According to [this comment](https://stackoverflow.com/questions/6982692/how-to-set-input-type-dates-default-value-to-today#comment83721109_6982754), you can use this trick to get the default todays date into the right format to set it using the value property of the element. `document.getElementById("water-volume").value = new Date().toLocaleDateString('en-CA');` — Zei, Dec 10 '19 at 04:45

score 1 · Accepted Answer · answered Dec 10 '19 at 04:59

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.

The reason why I posted here is because, I have mutiple forms in my html that has the same name. I need to get the ```recieivngdate``` of ```modal-form``` hence ```document.getElementById("receivingdate").value``` will not work because there are multiple elements with that ID. — sakib11, Dec 10 '19 at 06:00
@sakib11 you can't have multiple elements on the same page with the same ID. ID needs to be unique to the element. Only one is allowed at a time. Classes are allowed to have multiple elements. So you would need to put the ID on the modal and then put a class on the input element. Then you can use `document.querySelector("#elementID .inputClass")` to get the specific input. Where elementID is the ID of the modal and the inputClass is the class of the input. Or you could make them both IDs so `document.querySelector("#modalID #receivingdate")`. — Zei, Dec 11 '19 at 02:23

score 0 · Answer 2 · answered Dec 10 '19 at 04:45

0

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)

})

answered Dec 10 '19 at 04:45

Waseem Ansar

113
1
9

Setting the input value of a form element from javascript

2 Answers2