Bootstrap: Using a disabled button as a form input - php

Question

There may be a better way to do this, but I'm trying to create a button group where the left and right buttons are increment/decrement, and the middle button is a disabled button representing the value.
The field properly increments/decrements, but the value isn't getting passed to php.
I do like how the button group looks:
HTML
<form method="POST" action="send_email.php">
<div class="row"">
<div class="col-sm-4 col-xs-4">
<h5><b>Attendees</b></h5>
</div>
<div class="col-sm-8 col-xs-8">
<div class="btn-group">
<input type="button" class="btn btn-default" name="decrease" value="-" onclick="decreaseBtnOnclick('attendees')"/>
<input type="button" class="btn btn-primary" name="attendees" value="0" id="chairs" disabled/>
<input type="button" class="btn btn-default" name="increase" value="+" onclick="increaseBtnOnclick('attendees')"/>
</div>
</div>
</div>
<div class="text-right">
<input type="hidden" name="email" value="contact">
<a href="./index.php">
<button type="submit" class="btn-main">Finish!</button>
</a>
</div>
</form>
Javascript (works fine to change the value in the middle button)
<script>
function increaseBtnOnclick(item) {
document.getElementById(item).value = Number(document.getElementById(item).value) + 1;
}
function decreaseBtnOnclick(item) {
if(document.getElementById(item).value > 0){
document.getElementById(item).value = Number(document.getElementById(item).value) - 1;
}
}
PHP (works fine for other types of inputs, e.g., text)
<?php
if(isset($_POST['email'])) {
$attendees = $_POST['attendees']; // required
echo "Attendees: ".$attendees;
}
?>

Answer 1

Try adding a hidden input then add the value of your disabled button to it with JS.
JS
function increaseBtnOnclick(item) {
var newValue = Number(document.getElementById(item).value) + 1;
document.getElementById(item).value = newValue;
document.getElementById("hidden_input").value = newValue;
}
function decreaseBtnOnclick(item) {
if(document.getElementById(item).value > 0){
var newValue = Number(document.getElementById(item).value) - 1;
document.getElementById(item).value = newValue;
document.getElementById("hidden_input").value = newValue;
}
}
HTML:
<form method="POST" action="send_email.php">
<div class="row"">
<div class="col-sm-4 col-xs-4">
<h5><b>Attendees</b></h5>
</div>
<div class="col-sm-8 col-xs-8">
<div class="btn-group">
<input type="button" class="btn btn-default" name="decrease" value="-" onclick="decreaseBtnOnclick('attendees')"/>
<input type="button" class="btn btn-primary" name="attendees" value="0" id="chairs" disabled/>
<input type="button" class="btn btn-default" name="increase" value="+" onclick="increaseBtnOnclick('attendees')"/>
<input type="hidden" name="hiddenvalue" id="hidden_input" value="0">
</div>
</div>
</div>
<div class="text-right">
<input type="hidden" name="email" value="contact">
<a href="./index.php">
<button type="submit" class="btn-main">Finish!</button>
</a>
</div>
</form>
PHP:
<?php
if(isset($_POST['email'])) {
$attendees = $_POST['hiddenvalue']; // required
echo "Attendees: ".$attendees;
}
?>

Answer 2

You could switch to a regular input field with button addons.

Answer 3

Disabled input fields do not get posted, however you can set it to readonly.
Please have a look at this thread,
Disabled form inputs do not appear in the request

Answer 4

You could use a hidden input field:
<input type="hidden" id="h_attendees" name="h_attendees" value="0"/>
In your increaseBtnOnclick and decreaseBtnOnclick you could set the value of the hidden field.
function increaseBtnOnclick(item) {
document.getElementById(item).value = Number(document.getElementById(item).value) + 1;
document.getElementById("h_attendees").value = document.getElementById(item).value;
}
function decreaseBtnOnclick(item) {
if(document.getElementById(item).value > 0){
document.getElementById(item).value = Number(document.getElementById(item).value) - 1;
document.getElementById("h_attendees").value = document.getElementById(item).value;
}
}
And access it in PHP
$_POST['h_attendees'];