單擊按鈕時僅顯示輸入框

Question

我的表單中有很多潛在的輸入框，但是，我只希望在單擊上一個輸入框旁邊的按鈕時顯示它們。 這是我的意思的一點想法：

<form>
  <input name='box1'><input type='submit' name='button1' value='show box 2'>
  <input name='box2'><input type='submit' name='button2' value='show box 3'>
  <input name='box3'><input type='submit' name='button3' value='show box 4'> .......

等等

可以使用PHP完成此操作，還是應該使用JavaScript或其他方法？ 任何建議將不勝感激。 謝謝

Answer 1

我會使用jQuery或純JavaScript來做到這一點。 JavaScript是一種客戶端語言，非常適合獲取點擊和事件。 PHP是服務器端，用於頁面處理和數據處理。 我會將輸入包裝在div中，並在單擊時隱藏並顯示它們。

Answer 2

是的，這可以通過PHP完成，但是如果您希望它看起來不錯，請使用javascript。

無論如何，PHP中的一個丑陋的偽解決方案：

$Step = 1;
if(isset($_POST['step']))
    $Step = $_POST['step'];

switch($Step) {
    case 2:
        echo '<input name="box2">';
        break;
    case 3:
        echo '<input name="box3">';
        break;
    // ...
    default:
        echo '<input name="box1">';
}
echo '<input type="hidden" name="step" value="'.($Step + 1).'">';
echo '<input type="submit" name="submit" value="Next">';

但是，在javascript中，它看起來更好並且易於實現。

Answer 3

如果要避免頁面重新加載，則需要使用瀏覽器端JavaScript來顯示新的輸入框。

如果然后在新輸入框出現之前，需要服務器端PHP腳本處理輸入框的文本，則需要在單擊按鈕時發出Ajax請求，以將輸入框的數據發送到服務器並獲取一個答復。

如果您可以在瀏覽器端處理輸入框的文本，它將變得越來越簡單。

在這兩種情況下，您都希望將按鈕的type屬性submit替換為button以獲取沒有默認行為的按鈕。 然后，您可以將單擊處理程序添加到按鈕。 使用jQuery，如果您不希望處理文本（將其放在表單后），則類似於以下代碼片段：

<script>
$('input[type^="button"]').click(function() {
    var button_number = $(this).attr("name").split("button")[1];
    var box_number = parseInt(button_number) + 1;
    $('input[name="box' + box_number + '"]').show();
});
</script>

為了初始化可見性，可以使用以下CSS：

input[name^="box"] {
  display:none;
}
input[name="box1"] {
  display:inline;
}

這是jsfiddle： http : //jsfiddle.net/SjXH9/27/

您可以將最后一個按鈕設為提交按鈕，以提交整個表單。