引導程序：使用禁用的按鈕作為表單輸入

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

您可以使用按鈕插件切換到常規輸入字段。

Answer 2

禁用的輸入字段不會發布，但是您可以將其設置為只讀。

請看看這個線程，

禁用的表單輸入未出現在請求中

Answer 3

您可以使用隱藏的輸入字段：

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

在您的gainBtnOnclick和reduceBtnOnclick中，您可以設置隱藏字段的值。

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