单击按钮时仅显示输入框

Question

I have a form with many potential input boxes, however I only want them to be displayed if the button next to the previous input box is clicked. Here's a little Idea of what I mean:

<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'> .......

and so on

Can this be done with PHP or should I use JavaScript or something else? Any advice would be much appreciated. Thanks

Answer 1

I would use jQuery or pure JavaScript to do this. JavaScript is a client side language which is ideal for picking up clicks and events. PHP is server side and is used for page processing and data handling. I would wrap the inputs in divs and hide and show them on clicks.

Answer 2

Yes this can be done by PHP, but if you want it look nice use javascript.

Anyways, an ugly pseudo solution in 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">';

But still, in javascript it's looking better and it's easier to implement.

Answer 3

If you want to avoid page reloads, you need to use browser side JavaScript for showing the new input boxes.

If you then need the text of the input boxes to be processed by your server side PHP scripts before the new input box shows up, you will need to make ajax requests on button clicks to send the data of the input box to the server and get a response.

If you can process the text of the input boxes browser sided, it is getting simpler.

In both cases you will want to replace the type attribute submit of the buttons with button to get buttons without default behaviour. You can then add click handlers to the buttons. With jQuery this would look like the following snippet, if you don't want to process the text (put this after your form):

<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>

For the initialization of the visibility, you can use this CSS:

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

here is the jsfiddle: http://jsfiddle.net/SjXH9/27/

you can make your last button a submit button, to submit the whole form.