Question

可能有更好的方法可以做到这一点，但我正在尝试创建一个按钮组，其中左右按钮是递增/递减，而中间按钮是一个禁用按钮，表示该值。

字段正确递增/递减，但该值未传递给php。

我喜欢按钮组的外观：

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（可以正常更改中间按钮中的值）

<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（适用于其他类型的输入，例如文本）

<?php
if(isset($_POST['email'])) { 
    $attendees = $_POST['attendees']; // required
    echo "Attendees: ".$attendees;
} 
?>

Answer 1

您可以使用button addons切换到常规输入字段。

Answer 2

禁用的输入字段不会发布，但您可以将其设置为只读。

请看一下这个帖子，

Disabled form inputs do not appear in the request

Answer 3

您可以使用隐藏的输入字段：

<input type="hidden" id="h_attendees" name="h_attendees" value="0"/>

在你的increaseBtnOnclick和decreaseBtnOnclick中你可以设置隐藏字段的值。

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

并在PHP中访问它

$_POST['h_attendees'];

Answer 4

尝试添加隐藏的输入，然后使用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：使用禁用按钮作为表单输入

4 个答案: