Bootstrap：使用禁用的按鈕作爲表單輸入

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

嘗試增加一個隱藏的輸入那麼你禁用按鈕的值與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

你可以切換到常規輸入字段button addons。

Answer 3

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

請看看這個線程，

Disabled form inputs do not appear in the request

Answer 4

你可以使用一個隱藏的輸入字段：

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