单击按钮时仅显示输入框

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/

您可以将最后一个按钮设为提交按钮，以提交整个表单。