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
– JustOnUnderMillions, Commented Apr 24, 2017 at 10:49
Your form has 'POST' and you are creating 'GET' is that intentional? — RST
– RST, Commented Apr 24, 2017 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
– Juanfri Lira, Commented Apr 24, 2017 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
– Juanfri Lira, Commented Apr 24, 2017 at 11:00
@JuanfriLira Read more here stackoverflow.com/a/9251540/4916265 — JustOnUnderMillions
– JustOnUnderMillions, Commented Apr 24, 2017 at 11:04

Nebojsa Nebojsa · Accepted Answer · 2017-04-24 11:24:10Z

4

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.

answered Apr 24, 2017 at 11:24

Nebojsa Nebojsa

1,4591 gold badge9 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

How to add values to a form via javascript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related