How to call a function in the Input Type = "date" click

Asked

Viewed 789 times

1

Friends, I have a question I would be happy if you could help me.

I have a calendar created with the <input type="date"> of Html5. I need that by clicking on a specific date it takes the date value and calls a function PHP that will load a new page passing as parameter the date that was clicked for this PHP function.

I can do this with a button because I step as a parameter in the global variable $_GET calling a PHP you will receive this information, but I need it done without the button Submit of form, yes at the click of the date. Someone knows how to proceed?????

javascript html5 input date input-type-date
  • 1

    To turn on when the date changes you can use the event change, you can show the code you already have with a button?

  • 1

    Edit your question and enter the codes you’ve tried. It’ll make it easier to help

  • It’s not that simple, the Onchange event you mentioned is triggered before it fills the new date in the input. So after calling the onchange it fills in the input date. How do I know the value of the input (or date) if it is triggered before it fills in the date?

  • @Marcelojosélustosarodrigues change comes after choosing the date. Have a look here: https://jsfiddle.net/Sergio_fiddle/0thw8coh/1/

  • @Marcelojosélustosarodrigues if any of these answers solved your problem you can mark this as accepted.

2 answers

1

You have several events to choose from input and change are what you want. The blur also, but it only fires when you click off the input.

Example:

var input = document.querySelector('input');
var mostrador = document.getElementById('mostrador');

input.addEventListener('input', log);
input.addEventListener('change', log);
input.addEventListener('focus', log);
input.addEventListener('blur', log);

var contador = 0;

function log(e) {
  mostrador.innerHTML = [
    contador++,'|', e.type, this.value || 'sem valor',
    '<br>' + mostrador.innerHTML
  ].join(' ');
}
#mostrador {
  height: 80px;
  overflow: hidden;
}
<div id="mostrador"></div>

<input type="date">

0

You can use the tag event called : onchange In case it would look like this:

<input id="Testes" type="date" onchange="alert(this.value)" >

then you would use a javascript method to analyze the value and within this javascript you could in the case make a layer for your PHP. I don’t have as much practice in PHP, however, I believe you can put PHP code inside script.

If you can’t call PHP code... you can still make this your method click on some invisible button inside your HTML code and this runs the PHP method you want.

If you are not comfortable with counting calls when typing the date and it completes all values, then test using the onBlur event ( it is only called when the field loses focus.)

Browser other questions tagged javascript html5 input date input-type-date

You are not signed in. Login or sign up in order to post.