How to reformat form submit url that has GET method on the fly

Question

I have a form with datarangepicker. The value in the input is a string

 <form action="calculate" method="GET"> <input type="text" name="date_interval" value="08/01/2019 - 07/02/2019" id="range"> <input type="submit"> </form> <script type="text/javascript"> var range = document.getElementById('range').toString(); var arrayDates = range.split("-").map(function(item) { return item.trim(); }); arrayDates = arrayDates.map(item => item.replace('/', '-')); </script> 

When I submit the url above becomes encded with weird chars as shown below

https://www.webiste.co/calculate?date_interval=08%2F01%2F2019+-+07%2F02%2F2019

I want it to be redirected to a url something like

https://www.webiste.co/calculate/date_interval/08-01-2019/07-02-2019

In this question I take the value from input value, I don't submit to standart url How can I do this on the fly?

https://jsfiddle.net/tok63p5f/

Answer 1

You must obtain the 2 dates, this could be a way:

let arrayDates = valueFrom.trim().split("-");

You have an array with 2 dates, then, replace each one of the dates with format 08/01/2019 to 08-01-2019 , replacing / with - , like this:

arrayDates = arrayDates.map( item => item.replace(/\//g, '-'));

Lastly, call your URL by method window.href . at the end the script will look like this:

 document.getElementsByTagName('form')[0].onsubmit = (e) => 
 {
        e.preventDefault();
        let range;
        range = document.getElementById('range').value;
        let arrayDates = range.trim().split("-");
        arrayDates = arrayDates.map(item => item.trim().replace(/\//g, '-'));
        window.location.href = "https://www.webiste.co/calculate/date_interval/"+arrayDates[0]+"/"+arrayDates[0]
 }