-3

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?

Improve this question
4
  • 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? Commented Apr 20, 2016 at 20:20
  • Do this in JS and have the name attribute be a dynamic array? Commented Apr 20, 2016 at 20:31
  • @BobbyJack - good point. I should probably limit how many additional it would add. Commented Apr 21, 2016 at 0:01
  • @chris85 - JS would also be a viable solution, I was not sure which way would be easier. Commented Apr 21, 2016 at 0:02

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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

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/

Improve this answer

4 Comments

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.
yeah, each field should be unique to prevent overrite values, thx @SunKnight0 :)
Would it be possible to always have the Add another button be at the bottom? Or is that to much coding?
See my edit, I can not get the syntax to run properly, what did I miss?
0

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.