How to change a form and GET variable before sending it with javascript?

Question

I would like to get some fields from my form, modify them and then send the form, but I have no clue how to do it.

I have a form like this:

<form action="http://myurl.com" method="GET">
    <input type="text" name="date">
    <input type="name" name="name">
    <input type="submit" value="Submit">
</form>

The date field is a String and I would like to take some part of it to make an url like this. The user have to go to this url when cliking on the submit button.

http://www.myurl.com?name=name@day@month@year

Example : http://www.myurl.com?name=paul@01@12@2016

I've tried to use getInnerHTML on the date to get the substring of it. Then I tried to parse it next to the name to "generate" the url.

(Edit : But it don't works)

name.getAttribute('value')+"@"+day+"@"+month+"@"+year);

Example of an Url that really works like this

http://premium.secureholiday.net/reservation.asp?nc=2864&lg=fr&re=L@02@07@2016@09@07@2016

Edit2 : Can't use JQuery !

    <script type="text/javascript">
//Get the field "re" and put it the converted date @j@m@a@j@m@a
function dateParser(){

    var champs = document.getElementById('resa_type_resa');
    var dateDebut = document.getElementById('resa_date_debut_resa').getInnerHTML;
    var dateFin = document.getElementById('resa_date_fin_resa').getInnerHTML;
    var jour = dateDebut.value.substring(0,1);
    var mois = dateDebut.value.substring(4,5);
    var annee = dateDebut.value.substring(7,10);
    var jourFin = dateFin.value.substring(0,1);
    var moisFin = dateFin.value.substring(4,5);
    var anneeFin = dateFin.value.substring(7,10);

    champs.setAttribute('value', champs.getAttribute('value')+"@"+jour+"@"+mois+"@"+annee+"@"+jourFin+"@"+moisFin+"@"+anneeFin);

    alert(champs);
}
</script>

<form id="reservation_crique" action="recup.php" method="GET" target="_blank" onSubmit="dateParser()">

    <p style="text-align: center;"><strong><strong><img src="images/stories/reservez.png" alt="" /></strong></strong></p>
    <p><strong>Location ouverte<br /></strong>du 15/03 au 15/11</p>
    <p><span class="form-label">Type de r&eacute;servation :</span>
        <select id="resa_type_resa" name="re" style="width: 143px;">
            <option value="E">Emplacement</option>
            <option value="L">Location</option>
        </select>
    </p>
    <span class="form-label">Date de d&eacute;but : </span>
    <input id="resa_date_debut_resa" name="date_debut" type="text" /><br /><span class="form-label">
    Date de fin : 
    </span>
    <input id="resa_date_fin_resa" name="date_fin" type="text" />
    <input id="resa_re" type="hidden" name="re" />
    <input id="lg" type="hidden" name="lg" value="fr" />
    <input id="nc" type="hidden" name="nc" value="2865" />
    <input id="mo" type="hidden" name="mo" value="1129" />
    <input id="site_frame" type="hidden" name="site_frame" value="1" />
    <input id="bloc_recherche" type="hidden" name="bloc_recherche" value="1" />
    <br />
    <input type="submit" value="Envoyer">
    <!--<div style="text-align: center;"><a href="#" id="resa_button_validate">Voir les r&eacute;servations</a></div>-->
</form>

Your question shows no research effort at all. Have you even tried to google on how to get field value using javascript? — Yury Tarabanko
– Yury Tarabanko, Commented Jan 11, 2016 at 13:33
I'll put my complete code with the real form to show you what I already did. — Hugo Palla
– Hugo Palla, Commented Jan 11, 2016 at 13:37
Still your code shows nothing but a wishful thinking. Why do you think there is something called getInnerHTML? — Yury Tarabanko
– Yury Tarabanko, Commented Jan 11, 2016 at 13:45

Chintan Mirani · Accepted Answer · 2016-01-11 13:40:57Z

0

you can get value of date by following and do your stuff to seperate day, month and year based on your input date format.

document.getElementsByName('date')[0].value

answered Jan 11, 2016 at 13:40

Chintan Mirani

1,4659 silver badges19 bronze badges

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

Comments

hherger · Accepted Answer · 2016-01-11 17:18:48Z

You might also think of using regular expressions (RegEx) for parsing the date elements. See the embracing example below:

var url_year, url_month, url_day = "";
var base_url = "http://www.example.com";

function getElement(id) {
  (typeof id != "string")
  return (typeof id != "string") ? id : document.getElementById ? document.getElementById(id) : document.all ? document.all(id) : document.layers[id];
}


function valiDate(dateval) {
  var myregexp = "";
  var match = null;

  myregexp = /([\d]{4,4})-([\d]{1,2})-([\d]{1,2})/i; // YYYY-MM-DD
  match = myregexp.exec(dateval);
  if (match != null) {
    url_year = match[1];
    url_month = ((match[2].length < 2) ? '0' : '') + match[2];
    url_day = ((match[3].length < 2) ? '0' : '') + match[3];
    return true;
  }
  myregexp = /([\d]{1,2}).([\d]{1,2}).([\d]{4,4})/i; // DD.MM.YYYY
  match = myregexp.exec(dateval);
  if (match != null) {
    url_year = match[3];
    url_month = ((match[2].length < 2) ? '0' : '') + match[2];
    url_day = ((match[1].length < 2) ? '0' : '') + match[1];
    return true;
  }
  myregexp = /([\d]{1,2}).([\d]{1,2}).([\d]{4,4})/i; // MM/DD/YYYY
  match = myregexp.exec(dateval);
  if (match != null) {
    url_year = match[3];
    url_month = ((match[1].length < 2) ? '0' : '') + match[1];
    url_day = ((match[2].length < 2) ? '0' : '') + match[2];
    return true;
  }
  alert("Date format not valid\nAllowed are: YYYY-MM-DD | DD.MM.YYYY | MM/DD/YYYY");
  return false;
}

function doSubmit() {
  var f_name = getElement("myForm_name");
  if (typeof f_name == "undefined") {
    alert("No 'name' field in form");
    return false;
  } else {
    v_name = f_name.value;
    if (v_name.length < 1) {
      alert("Name field must not be empty");
      return false;
    }
  }
  var f_date = getElement("myForm_date");
  if (typeof f_date == "undefined") {
    alert("No date field in form");
    return false;
  } else {
    v_date = f_date.value;
    if (v_date.length < 1) {
      alert("Date field must not be empty");
      return false;
    }
  }
  if (!valiDate(v_date)) return false;
  var xpar = "name=" + escape(v_name) + "@" + url_day + "@" + url_month + "@" + url_year;
  // window.location.href = base_url + "?" + xpar;
  alert("URL=" + base_url + "?" + xpar);
  return true;
}

<form action="" method="GET" name="myForm" onsubmit="return doSubmit(); return false;">
  <section style="display: table;">
    <div style="display: table-row;">
      <div style="display: table-cell;">Name:&nbsp;</div>
      <div style="display: table-cell;">
        <input type="name" id="myForm_name" name="myForm_name">
      </div>
    </div>
    <div style="display: table-row;">
      <div style="display: table-cell;">Date:&nbsp;</div>
      <div style="display: table-cell;">
        <input type="text" id="myForm_date" name="myForm_date">
      </div>
    </div>
    <div style="display: table-row;">
      <div style="display: table-cell;padding-top:4px;"></div>
      <div style="display: table-cell;padding-top:4px;">
        <input type="submit" value="Submit">
      </div>
    </div>
  </section>

</form>

MCMXCII · Accepted Answer · 2016-01-11 13:30:00Z

-2

If you need to generate the day, month and year from the users input, why not instantiate a new Date object using their data and then use the Date functions to get the information you need.

Something like this:

var date = new Date($('form input[name="date"]').val());

var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();

answered Jan 11, 2016 at 13:30

MCMXCII

1,0264 gold badges14 silver badges27 bronze badges

1 Comment

MCMXCII Over a year ago

Okay, so the above, with the jQuery substituted for something like form-name.date.value;

Collectives™ on Stack Overflow

How to change a form and GET variable before sending it with javascript?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related