Change output of an input type time

Asked

Viewed 90 times

0

I have a form with an input of type="time", when I click on Submit the url sends the data like this:
hrentrada=HH%3AMM&hrsaida=HH%3AMM.
I’d like you to rule like this:
hrentrada=HHMM&hrsaida=HHMM.
Someone knows how to manipulate it?

<form name="teste" method="GET" action="index.html"> 
   <input type="time" name="hrentrada"style="width:70px" maxlength="4 required>
   <input type="time" name="hrsaida"style="width:70px" maxlength="4" required>
   <input type="submit" name="submit">
</form>

preferably only with html and at most pure javascript

javascript html5

  • The browser does this on purpose to avoid having : in the URL. You can decode this with Javascript using decodeURIComponent('HH%3AMM&hrsaida=HH%3AMM')... but the server should receive it correctly. You are using a server?

  • I just wanted to take that %3A

1 answer

1


Nothing prevents you from handling the information at destination (index.html). However, if it is a restriction of your project you can do it as follows:

<input type="time" name="hrentrada_get"style="width:70px" maxlength="4">
<input type="time" name="hrsaida_get" style="width:70px" maxlength="4">
<form name="teste" method="GET" action="index.html" onsubmit="return ajustarHora()"> 
   <input type="hidden" name="hrentrada">
   <input type="hidden" name="hrsaida">
   <input type="submit" name="submit">
</form>
<script>
function ajustarHora(){
    $("input[name='hrentrada']").val($("input[name='hrentrada_get']").val().replace(":",""));
    $("input[name='hrsaida']").val($("input[name='hrsaida_get']").val().replace(":",""));

  return false;
}
</script>

In this solution you will need to validate the filling of the fields that are outside the form and according to your need to do the ajustarHora() return true or false whether or not to send the data.

Follow example link working https://jsfiddle.net/76wzqupt/2/

Browser other questions tagged javascript html5

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