Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    57
    Thanks
    15
    Thanked 1 Time in 1 Post

    [?] Add more input fields to PHP form

    How would I go about adding more input fields to a PHP form if they are needed?

    There seems to be lots of ways with javascript but the problem with that is they are created after
    the form is closed and so when you hit the submit button the content within extra fields does not
    get submitted ..

    PHP Code:
    <?php
    if (isset($_POST['submit']))
    {
    foreach (
    $_POST['foo'] as $value
    {
      
    $value htmlspecialchars($value);
    if (
    $value
    {
         echo 
    "$value\n";
            }
    }
    ?>

    <?php } else { ?>

    <form action="index.php" method="post">
     <fieldset>  
      <input type="text" name="foo[]" size="30" />
      <br />
      <input type="text" name="foo[]" size="30" />
      <br />
      
    <!-- Add additonal input fields here if needed by clicking "More" link -->
     
      <input type="submit" name="submit" value="Submit" /> 
     </fieldset>
    </form>

    <?php ?>
    As always thank you in advance
    Newbie at most things ...Hey we all gotta start somewhere right :)

  • #2
    New Coder
    Join Date
    Aug 2003
    Location
    Derby, UK
    Posts
    97
    Thanks
    0
    Thanked 14 Times in 14 Posts
    Quote Originally Posted by buggy View Post
    How would I go about adding more input fields to a PHP form if they are needed?
    You would need to submit the form to the server, repopulate all the values they submitted and add an extra field, then send back to client to continue populating.

    Quote Originally Posted by buggy View Post
    There seems to be lots of ways with javascript but the problem with that is they are created after
    the form is closed and so when you hit the submit button the content within extra fields does not
    get submitted ..
    Not sure what you mean by "after the form is closed", it is quite possible to dynamically add fields to a form with javascript that will get submitted with the form exactly as if they were there all along.

    Possibly the problem is to do with how/where you are adding the fields and/or what names you are giving them. As long as the fields are added within the form and are given the correct name they should submit just fine.

    If you have an example of a javascript solution that doesn't submit perhaps we could see what is wrong...?

    HTH,

    Dai

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    57
    Thanks
    15
    Thanked 1 Time in 1 Post
    < Head >
    Code:
    <script language="javascript">
    fields = 0;
    function addInput() {
    if (fields != 10) {
    document.getElementById('text').innerHTML += "<input type='text' name='foo[]' size='30' />";
    fields += 1;
    } else {
    document.getElementById('text').innerHTML += "<br />Maximum 10 fields allowed.";
    document.form.add.disabled=true;
    }
    }
    </script>
    < body > Added between last main input and submit button:
    Code:
    <input type="button" onclick="addInput()" name="add" value="Add input field" />
    The additional fields are created by clicking button but not submitted
    Last edited by buggy; 02-18-2010 at 01:08 PM.
    Newbie at most things ...Hey we all gotta start somewhere right :)

  • #4
    New Coder
    Join Date
    Aug 2003
    Location
    Derby, UK
    Posts
    97
    Thanks
    0
    Thanked 14 Times in 14 Posts
    Is there a URL? If I copy this into my own code for the form it may not reproduce the problem you are having.

    Other solutions I have seen use the DOM to add a DOM object "properly" rather than just squirting HTML into a container and assuming the browser will handle it, but that said I still would have expected it to work myself.

    Regards,

    Dai

  • #5
    New Coder
    Join Date
    Aug 2003
    Location
    Derby, UK
    Posts
    97
    Thanks
    0
    Thanked 14 Times in 14 Posts
    Works for me here:

    http://www.metatest.co.uk/test_dyninput.php

    in IE and firefox, possibly you are adding to the wrong container, so if you can show your form code....

    HTH,

    Dai

  • Users who have thanked DaiWelsh for this post:

    buggy (02-18-2010)

  • #6
    New Coder
    Join Date
    Jun 2008
    Posts
    57
    Thanks
    15
    Thanked 1 Time in 1 Post
    Thank you DaiWelsh after a little tweaking it was what you suggested I had the main inputs wrapped in a different <div container
    Newbie at most things ...Hey we all gotta start somewhere right :)

  • #7
    New Coder
    Join Date
    Aug 2003
    Location
    Derby, UK
    Posts
    97
    Thanks
    0
    Thanked 14 Times in 14 Posts
    welcome

  • #8
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi,i have the same problem to... can u please help me add input fields (3 INPUT FIELD, 1 SELECT & 1 RADIO BUTTON) in one line at the same time?

    i tried adding the text input but i find it hard to add the select and radio button..

    please,,anyone help... and response will be highly appreciated...

    thanks,
    Liezl

  • #9
    New Coder
    Join Date
    Aug 2003
    Location
    Derby, UK
    Posts
    97
    Thanks
    0
    Thanked 14 Times in 14 Posts
    If you post your code (or ideally a URL) then I am sure someone, possibly me, will take a look. There are lots of ways to skin a cat so it helps if we know where you are starting from...

  • #10
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, i know this a very old thread, but i found it usefull. Tanksyou all for your knoledges! I', having only one problem. and its that if i have completed some fileds, they reset when adding more fields. Any idea on how to skip form reseting? thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •