Forcing a change in the value of the hidden field before submitting a form

Question

I am trying to change the value of a hidden field on submission by JavaScript. In my page there are two buttons, one for going back to homepage (index.php) and another for returning to the first page for data entry (addData.php). I am trying to use a hidden field with id "goHome" to control the routeing. My codes are like this:

HTML (Form only)

<form name = "addDataReal" id = "addDataReal" method = "POST" action = "addDataProc.php" onsubmit="return checkNSub()">
        <!-- Other items -->
        <input type = "submit" name = "submitBtnF" id = "submitBtnF" class="shortText" style = "width: 120px;" value = "Submit + Home" onclick = "return getGoValue(true)"/>
        <input type = "submit" name = "submitBtnR" id = "submitBtnT" class="shortText" style = "width: 120px;" value = "Submit + Next" onclick = "return getGoValue(false)"/>
        <input type = "hidden" name = "goHome" id = "goHome" value = "" />
    </div>   
</form>

Javascript

function checkNSub() {
    //form validation functions
    //OK then return true
    //Not then return false
}
function getGoValue(goHome) {
    if (goHome) {
        document.getElementById("goHome").value = "true";
    } else {
        document.getElementById("goHome").value = "false";
    }
    return true;
}

Before this I have tried many other versions and I refered to these few questions:

Set form hidden value on submit

Setting a form variable value before submitting

How to change the value of hidden input field before submitting

But none of the methods were working for me.

For practical purposes there is a workaround for this, but I want to know if I would like to keep these two buttons, how should my code be modified so that the value of "goHome" can be changed before the form is submitted? After many attempts I am still getting $_POST["goHome"] = "".

Also, why is the form submitted before the value is actually changed when the code is placed before that?

Thanks!

Since you are submitting the form, the _server_ can tell which of the two buttons was used by trying to get the parameter `submitBtnF`, and if not there try to get the value of `submitBtnR`. Now the server can handle/save the form data and then [redirect](https://wikipedia.org/wiki/Post/Redirect/Get) to home if `submitBtnF` was used to submit the form, or to addData.php again if `submitBtnR` was used. — Stephen P, Jun 30 '16 at 21:53

score 2 · Answer 1 · answered Jul 24 '20 at 18:56

It's old question But I thought If any one still looking for the answer , here it is

You can try jquery $('input[name="goHome"]').val('true'); or JS - document.getElementByName("goHome").value = "true"; This will work for sure.

While updating any value at the time of submitting for use name selector instead of ID, that will save you some time :)

When we try to change value of Hidden field at the time of submitting form it didn't update value because DOM has already detached the ID from the input parameter but name is still there because name is going to be passed in form.

If anyone find this useful and they do not have to work for lot hours for a simple solution :)

Happy Coding :)

Strahdvonzar · Answer 2 · 2016-06-30T18:45:36.223

Various ways to achieve this. Firstly though keep in mind that you are using type="submit" <input> inside a <form> , and that means that they will automatically submit the form regardless of an onclick event or not.

One as much as less intrusive (to your code) way is the following:

Take out the submit inputs from your form like this:

Example :

<form name = "addDataReal" id = "addDataReal" method = "POST" action = "whatever.php">
        <!-- Other items -->
        <input type = "hidden" name = "goHome" id = "goHome" value = "" />
    </div>   
</form>

<input type = "submit" name = "submitBtnF" id = "submitBtnF" class="shortText" style = "width: 120px;" value = "Submit + Home" onclick = "return getGoValue(true)"/>
<input type = "submit" name = "submitBtnR" id = "submitBtnT" class="shortText" style = "width: 120px;" value = "Submit + Next" onclick = "return getGoValue(false)"/>

Change your getGoValue() and checkNSub() functions like this :

function checkNSub() {
    //form validation functions
    //OK then return true
    //Not then return false
    var myForm = document.getElementById('addDataReal');
    myForm.submit();
}

function getGoValue(goHome) {
    if (goHome) {
        document.getElementById("goHome").value = "true";
        console.log(document.getElementById("goHome").value);
        checkNSub();
    } else {
        document.getElementById("goHome").value = "false";
        console.log(document.getElementById("goHome").value);
        checkNSub();
    }
    return true;
}

Try it out.

P.S : A couple of console.logs so you can check out the value changing. Comment out checkNSub(); to see them in your console. Nevertheless keep in mind that you are posting a Form which means you are going to load a new page from the server , this new page will be agnostic regarding your "goHome" value. The "goHome" value exists only while you are on the same page. The moment your DOM is "recreated" you will lose it.

P.S.2 :

Your return true; inside the getGoValue(); is not needed in my example. You can remove it.
the return in your onclick = "return getGoValue(true)" is also not needed and you can remove it

P.S.3 : This reply is focused on keeping most of your code intact. In reality now that you have your inputs outside the form there is no need for them to be of type="submit" you should change them to <button> with onClick events (or Listeners).

Forcing a change in the value of the hidden field before submitting a form

2 Answers2