JavaScript use same function for different id's

Question

I have a form with several date fields. These date fields are actual text fields as I want to control the date structure from the start.

<div class="form-group col-md-6 col-xs-13">
  <?php echo form_error('eindDatum'); ?>
  <label for="eindDatum"><?php echo $this->lang->line('eindDatum'); ?><small class="text-info"><?php echo ' ' . $this->lang->line('datumNotatie'); ?></small></label>
  <input type="text" name="eindDatum" id="eindDatum" class="form-control date" placeholder="DD-MM-YYYY" required pattern="(0[1-9]|1[0-9]|2[0-9]|3[01])-(0[1-9]|1[012])-[0-9]{4}">
</div>
<div class="form-group col-md-6 col-xs-13">
  <?php echo form_error('aanvangDatum'); ?>
  <label for="aanvangDatum"><?php echo $this->lang->line('aanvangDatum'); ?><small class="text-info"><?php echo ' ' . $this->lang->line('datumNotatie'); ?></small></label>
  <input type="text" name="aanvangDatum" id="aanvangDatum" class="form-control date" placeholder="DD-MM-YYYY" required pattern="(0[1-9]|1[0-9]|2[0-9]|3[01])-(0[1-9]|1[012])-[0-9]{4}">

</div>

I was looking for a formatter online to automatically insert the - (dash) between the structures. But my knowledge of JavaScript is really limited. I tried with using the class selector but that does not seem to work at all.

var date = document.getElementsByClassName('date');

And then I added a class of date to the input text fields

I (am trying to) work with this https://codepen.io/tutsplus/pen/KMWqRr

Any help would be greatly appreciated. If possible tell me why you are approaching it in a specific way so I can learn from your experience.

" I tried with using the class selector"...please a) show what you tried, b) show more than one of your date fields, so we can compare them. Both your sample above and the CodePen contain only one date field, so it doesn't reflect the scenario which is actually causing the problem. — ADyson
– ADyson, Commented Apr 19, 2020 at 18:52
Changed my question. Not that much additional info is added in this. But if it can help. — PJC
– PJC, Commented Apr 19, 2020 at 20:14

cнŝdk · Accepted Answer · 2020-04-19 20:29:50Z

3

In the link you shared they are applying the function to a single element as they are getting it by id.

In your case you tried to get it by its class in that case it won't work because the date variable will contain a collection of elements, so you need to loop over this collection to add the event listener properly to each element.

Your code should look like this:

var dates = document.getElementsByClassName('date');

Array.from(dates).forEach(function(element) {
  element.addEventListener('input', inputFunction);
  element.addEventListener('blur', blurFunction);
});

Note:

I made two functions for both events, all you need to do is to put the code inside the eventlisteners in your link respectively inside these two functions:

function inputFunction(e) {
   //The input event code will be here
   ...
}

function blurFunction(e) {
   //The blur event code will be here
   ...
}

edited Apr 19, 2020 at 20:29

answered Apr 19, 2020 at 20:25

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user120242 Over a year ago

Probably should add how to have the functions be named inputFunction/blurFunction

cнŝdk Over a year ago

@user120242 Normally it is clear, but I made an edit with a little example.

PJC Over a year ago

It was clear for me. Ty for the assitance this worked perfectly

cнŝdk Over a year ago

@Pieter-JanCasteels Good, glad it helps :)

Collectives™ on Stack Overflow

JavaScript use same function for different id's

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related