How to add values to a form via javascript?

Question

So what im trying is to add POST inputs to a form on an Onclick function. so, when i check the info is OK via Javascript, before doing via Javascript form.submit() I want to add more information, for example an IdCrono. What im doing right now is in Form.action = "myPhpFunction.php" is add GET variables via the action so it would be

"myPhpFunction.php?key=1&IdCrono=1"

anyway to add Key and IdCrono to the POST via javaScript?

My code looks like this:

function GuardarMilestone(a) {
  var id = a.id;
  var idCrono = Math.floor(a.id / 10);
  alert(idCrono);
  var form = document.getElementById("Form" + id);
  if (id % 10 == 0) {
    //alert("Resto 0");
    var date = form.elements["FechaInicio"];
  } else {
    //alert("Resto 5");
    var date = form.elements["FechaFin"];
  }
  if (date.value != "") {
    form.action = "InteriorInternalFunciones.php?key=1&id=" + id;
    form.target = "_self";
    form.submit();
  } else {
    alert("Please fill in the date before saving");
  }
}

<form method="POST" id="Form<?php echo $rstMilestones->fields['IdCronograma']; ?>0" action="">
  <input type="date" style="font-size: 9px; font-style: bold;" name="FechaInicio" value="<?php echo $strFaseInicioSinFormato;?>">
  <input type="hidden" name="IdCronograma" value="<?php echo $rstMilestones->fields['IdCronograma']; ?>">
  <a href="#botones" id="<?php echo $rstMilestones->fields['IdCronograma']; ?>0" onclick="GuardarMilestone(this)"><img src="images/PC_si.png" alt="Save"></a>
  <a href="#botones" id="<?php echo $rstMilestones->fields['IdCronograma']; ?>0" onclick="EditarFechaCronograma(this)"><img src="images/PC_no.png" alt="cancel"></a>
</form>

Add two hidden inputs for `key, id` with a empty value and give them an id (html attribute). Then on submit you can update the hidden inputs before submit the form for real. `document.getElementById("IdCrono").value = id;` — JustOnUnderMillions, Apr 24 '17 at 10:49
Your form has 'POST' and you are creating 'GET' is that intentional? — RST, Apr 24 '17 at 10:53
@RST yes its intentional, because i don't know if i can dynamically add POST variables to send, I don't like useing GET variables. That's why I'm asking if there is a way to do it. — Juanfri Lira, Apr 24 '17 at 10:59
@JustOnUnderMillions Thanks i actually never thought about that haha, so simple, but efective. But is there still a way to do it with out the input hiddens? if not I'll just use that — Juanfri Lira, Apr 24 '17 at 11:00
@JustOnUnderMillions already provided the scenario for adding POST variables before send — RST, Apr 24 '17 at 11:00
@Juanfri Lira Thing it is also possible to at the data dircty to the `form` variable. Check for an link and drop it later here. — JustOnUnderMillions, Apr 24 '17 at 11:04
@JuanfriLira Read more here http://stackoverflow.com/a/9251540/4916265 — JustOnUnderMillions, Apr 24 '17 at 11:04

score 4 · Accepted Answer · answered Apr 24 '17 at 11:24

Maybe this will help, just add this function to your code:

function addFields(form, inputName, inputValue) {
    // Create an <input> element
    var input = document.createElement("input");
    input.type = "hidden";
    input.name = inputName;
    input.value = inputValue;
    form.appendChild(input);
}

and replace this line:

form.action = "InteriorInternalFunciones.php?key=1&id=" + id;

with this:

form.action = "InteriorInternalFunciones.php;
addFields(form, "key", 1);
addFields(form, "id", id);

This will add hidden fields to your code just before form is submitted, and all will be send with POST method.

How to add values to a form via javascript?

1 Answers1