Bootstrap: Using a disabled button as a form input

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;
} 
?>

score 0 · Answer 1 · answered Feb 09 '14 at 21:31

0

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

answered Feb 09 '14 at 21:31

T0xicCode

4,583
2
37
50

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

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

edited May 23 '17 at 10:33

Community

1
1

answered Feb 09 '14 at 21:31

melc

11,523
3
36
41

score 0 · Answer 3 · answered Feb 09 '14 at 21:32

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'];

score 0 · Accepted Answer · answered Feb 09 '14 at 21:45

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;
} 
?>

Bootstrap: Using a disabled button as a form input

4 Answers4