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请求以将输入框的数据发送到服务器并得到回复。

如果您可以浏览侧面的输入框文本，则会变得更加简单。

在这两种情况下，您都希望用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/

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

单击按钮时仅显示输入框

3 个答案: