How to send a form value from a javascript variable and be received as an integer in php?

Question

My form is going to post data to a php called numberActionPage.php. There are two buttons (a +, and a -) around the variable I am trying to post, and they simply change the variable by adding or subtracting one. The problem I'm having is I can't find a way to retrieve the value of my Javascript number variable. Another potential problem I have noticed is that $_POST results in a string in PHP. I am not, however, concerned with negative numbers being posted to the action page, as in the actual program the number will never be lower than 1.

For instance my Javascript looks something like this:

var number = 5;

function subtractNumber()       {
        number--;
        document.getElementById("numberID").innerHTML = number;
}

function addNumber()    {
        number++;
        document.getElementById("numberID").innerHTML = number;
}

My html looks like this:

<form action="numberActionPage.php" method="post">
    Number:
       <button type="button" onclick="subtractNumber()">-</button>
    <a id="numberID"> <input type="hidden" value="5" name="number">  <script>document.write(number);</script>        </a>    
       <button type="button" onclick="addNumber()">+</button>
    <br>
    <p><input type="submit" value="Submit" /></p>
</form>

My numberActionPage looks like this:

$number = (int)htmlspecialchars($_POST['number']);
echo $number;

Output = 5 on actionNumberPage

---

So, to reiterate my problem: I need a way for the value="5" part of my input element in my form to receive the value of the javascript variable number. Looking for something such as:

value="<script>retrieveNumber()</script>"

Also, am I preparing the $_POST variable correctly; turning it into an integer properly.

Thanks for your time and advice.

Answer 1

what you want to do is updated the hidden input called number and change its value. so that when submit the value of the input will be sent to the next page like as if it was a normal input. I gave the input an id of 'inputNumber'

Like so

<form action="numberActionPage.php" method="post">
    Number:
       <button type="button" onclick="subtractNumber()">-</button>
    <a id="numberID"> <input type="hidden" id="inputNumber" value="5" name="number">  <script>document.write(number);</script>        </a>    
       <button type="button" onclick="addNumber()">+</button>
    <br>
    <p><input type="submit" value="Submit" /></p>
</form>

Make changes to your script so that the input value is updated when the buttons are pressed.

function subtractNumber()       {
        number--;
        document.getElementById("numberID").innerHTML = number;
        document.getElementById("inputNumber").value = number;
}

function addNumber()    {
        number++;
        document.getElementById("numberID").innerHTML = number;
        document.getElementById("inputNumber").value = number;
}