PHP To Create Add Another Button

Question

I am creating a php page for camp registration, very basic and I do not want to plaster the page with multiple Name label/textbox. What I was thinking was to by default have one textbox and one label, and possibly blue text that says add another (or even a button) that when pressed the page will keep the current data but add an additional label and textbox so that more info can be added in. This is how I am capturing the data for 1, could this easily be modified in order to achieve my above outcome?

<td><label for="lblName">Campers Name:</label></td>
<td class="style1"><input  type="text" name="txtName" 
    maxlength="100" size="30"></td>

EDIT
The link ad does nothing when I click it, I am sure it is I am missing the obvious but here is full syntax, what should I alter to make it work?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script type="text/javascript">
    $("#newCamper").on('click', function() {
      $('#Campers').after(
        '<div id="Campers">' +
        '<td><label for="lblName">Campers Name: </label></td>' +
        '<td class="style1"><input  type="text" name="txtName" maxlength="100" size="30"></td>' +
        '<a href="#" id="rmCamper"> remove this</a>' +
        '</div>'
      );
    });
    $(document).on('click', '#rmCamper', function() {
      $(this).closest('#Campers').remove();
    });
</script>
</head>
<body>
    <div id="Campers">
       <td><label for="lblName">Campers Name:</label></td>
       <td class="style1"><input  type="text" name="txtName" maxlength="100" size="30"></td>
       <a href="#" id="newCamper">Add another</a>
    </div>
</body>
</html>

EDIT #2
when I go to localhost on my machine and push the Add button it changes the URL to localhost# but no additional fields are added to the page?

Do you want a button that, effectively, adds a label/text input pair? So if you press the button 50 times, you get 50 inputs in which to enter your data? — Bobby Jack, Apr 20 '16 at 20:20
Do this in JS and have the name attribute be a dynamic array? — chris85, Apr 20 '16 at 20:31
@BobbyJack - good point. I should probably limit how many additional it would add. — Bob Goblin, Apr 21 '16 at 00:01
@chris85 - JS would also be a viable solution, I was not sure which way would be easier. — Bob Goblin, Apr 21 '16 at 00:02

score 1 · Answer 1 · answered Apr 20 '16 at 20:40

1

i think you can use a little of jquery code to do this job ;) all you have to do is include https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js in your page.

<div id="Campers">
   <td><label for="lblName">Campers Name:</label></td>
   <td class="style1"><input  type="text" name="txtName" maxlength="100" size="30"></td>
   <a href="#" id="newCamper">Add another</a>
</div>

// jquery code below:

$("#newCamper").on('click', function() {
  $('#Campers').after(
    '<div id="Campers">' +
    '<td><label for="lblName">Campers Name: </label></td>' +
    '<td class="style1"><input  type="text" name="txtName" maxlength="100" size="30"></td>' +
    '<a href="#" id="rmCamper"> remove this</a>' +
    '</div>'
  );
});
$(document).on('click', '#rmCamper', function() {
  $(this).closest('#Campers').remove();
});

https://jsfiddle.net/yb88s47s/

answered Apr 20 '16 at 20:40

Krzysztof Królikowski

11
2

Make sure you don't use `name="txtName"` on every input. Instead add use `name="txtName_"+i` where i is incremented with each added input. – SunKnight0 Apr 20 '16 at 20:45
yeah, each field should be unique to prevent overrite values, thx @SunKnight0 :) – Krzysztof Królikowski Apr 20 '16 at 20:51
Would it be possible to always have the Add another button be at the bottom? Or is that to much coding? – Bob Goblin Apr 21 '16 at 00:05
See my edit, I can not get the syntax to run properly, what did I miss? – Bob Goblin Apr 21 '16 at 00:31

Pevara · Answer 2 · 2016-04-20T21:18:26.120

In real life one would probably be best of using javascript for this indeed. It is perfectly possible with just php however. Have a look at the following example:

<?php
$names = isset($_GET['txt']) ? $_GET['txt'] : [];
$i = 0;
?>
<form method="get">
    <?php foreach ($names as $name) : ?>
        <label for="txt<?= $i ?>">member</label>
        <input name="txt[]" id="xt<?= $i ?>" value="<?= $name ?>">
        <br>
        <?php $i++ ?>
    <?php endforeach; ?>
    <label for="txt<?= $i ?>">member</label>
    <input name="txt[]" id="xt<?= $i ?>">
    <button type='submit'>
        add
    </button>
</form>

This form will submit to itself. It starts by getting the array of names (note the [] on the txt[] field). It then iterates over them and displays each of them as an input. After the loop you just add 1 extra, empty field.

This is obviously a very basic example, you'll probably want some validation, and a name on that add button to be able to distinguish it from the actual final submit. It is just a proof of concept.

Have a look at the code in action here. Feel free to ask if anything is unclear.

score 0 · Answer 3 · edited May 23 '17 at 12:07

0

I know that you're looking for an answer in PHP, but for what you need to do (DOM manipulation), you'd be better off using JavaScript. You can create another input field and increment a variable to append to the ID field of same. See this question. If you keep track of the total number of input fields that have been created in this fashion, you could iterate over those on form submission to capture all of the data.

edited May 23 '17 at 12:07

Community

1
1

answered Apr 20 '16 at 20:27

DanWake

1
1

Why would you increment a variable to the ID attribute (assuming that's what you mean). There isn't even an ID attribute in the first place and the name attribute can easily be turned into an array to prevent any issues there as well. – icecub Apr 20 '16 at 20:30

PHP To Create Add Another Button

3 Answers3