SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2004
    Location
    Ashburn, VA
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding fields on fly.

    I'm sure you've all seen those file upload sites that start off with 1-5 text fields for selecting files to upload, and then a link below it to add more fields on the fly. I'd like to do something similar, but instead of files being selected it would be simply to add multiple student names for group registration to a course. Not sure how this is done. My page will be using php/mysql.
    Thanks for any assist.

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Examine this example:
    Code:
    <html>
    <head>
    <head><title></title>
    
    <script type="text/javascript">
    
    window.onload=function()
    {
    	document.getElementById("myButton").onclick = addMore;
    };
    
    function addMore()
    {
    	var newInput = document.createElement("input");
    	newInput.type = "text";
    	newInput.name = "student[]";
    
    	var newDiv = document.createElement("div");
    	newDiv.appendChild(newInput);
    	
    	var targetDiv = document.getElementById("target");
            targetDiv.appendChild(newDiv);
    }
    
    </script>
    </head>
    <body>
    
    <input type="text" name="student[]" />
    
    <input id="myButton" type="button" value="Click for more inputs" />
    
    <div id="target"></div>
    
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2004
    Location
    Ashburn, VA
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you.

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2004
    Location
    Ashburn, VA
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I wanted to also add two other fields email and phone, would I have to create a newInput2.name or would I just list them under the student input as newInput.name = "email[]";

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2004
    Location
    Ashburn, VA
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I've gotten further with adding the fields I need, but I'm not sure how to take this and incorporate it into the page that has the rest of my php and have these new dynamic fields get input into a table on submission.
    Can anyone assist?

    Code:
    <html>
    <head>
    <head><title></title>
    
    <script type="text/javascript">
    
    window.onload=function()
    {
    	document.getElementById("myButton").onclick = addMore;
    };
    
    function addMore()
    {
    	var newInput = document.createElement("input");
    	newInput.type = "text";
    	newInput.name = "student[]";
    	
    	var newInput2 = document.createElement("input");
    	newInput.type = "text";
    	newInput.name = "phone[]";
    	
    	var newInput3 = document.createElement("input");
    	newInput.type = "text";
    	newInput.name = "email[]";
    
    	var newDiv = document.createElement("div");
    	newDiv.appendChild(newInput);
    	newDiv.appendChild(newInput2);
    	newDiv.appendChild(newInput3);
    
    	
    	var targetDiv = document.getElementById("target");
            targetDiv.appendChild(newDiv);
    }
    
    </script>
    </head>
    <body>
    
    <input type="text" name="student[]" />
    <input type="text" name="phone[]" />
    <input type="text" name="email[]" />
    
    <input id="myButton" type="button" value="Click for more inputs" />
    
    <div id="target"></div>
    
    </body>
    </html>

  6. #6
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure how to take this and incorporate it into the page that has the rest of my php and have these new dynamic fields get input into a table on submission.
    A basic php setup requires two pages:

    a) an .htm page that contains the html and a form
    b) a .php page that is called when the user clicks the submit button on the form

    1) Put a form tag around the initial input field.
    2) Modify the js code to add the additional input fields to the form tag(or a div inside the form tag)
    3) Add a submit button to the form.
    4) Specify a php page for the action attribute of the form tag(which will be requested when the user clicks on the submit button).
    5) On the php page, obtain the values from the form and make a mysql query to insert them in your database.
    Last edited by 7stud; Jan 15, 2007 at 16:30.

  7. #7
    SitePoint Member panvagil's Avatar
    Join Date
    Dec 2006
    Location
    Stabogli 4, Lefkada 311.00, Greece
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't use it with radio buttons

    Hi,

    I tried the code with radio buttons but while it design radio buttons I can't select any.

    Please help.

    Code:
    <html>
    <head>
    <head><title></title>
    
    <script type="text/javascript">
    window.onload=function()
    {
    	document.getElementById("AddAddress").onclick = addMoreAddress;
    };
    
    function addMoreAddress()
    {
    	var newInputPrivateAddress = document.createElement("input");
    	newInputPrivateAddress.type = "checkbox";
    	newInputPrivateAddress.name = "PrivateAddress[]";
    
    	var newInputfrmAddressType1ID = document.createElement("input");
    	newInputfrmAddressType1ID.type = "radio";
    	newInputfrmAddressType1ID.id = "0";
    	newInputfrmAddressType1ID.value = "0";
    	newInputfrmAddressType1ID.checked  = true;
    	newInputfrmAddressType1ID.name = "frmAddressTypeID[]";
    	
    	var newInputfrmAddressType2ID = document.createElement("input");
    	newInputfrmAddressType2ID.type = "radio";
    	newInputfrmAddressType2ID.id = "1";
    	newInputfrmAddressType2ID.value = "1";
    	newInputfrmAddressType2ID.checked  = false;
    	newInputfrmAddressType2ID.name = "frmAddressTypeID[]";
    
    	var newInputAddress = document.createElement("input");
    	newInputAddress.type = "text";
    	newInputAddress.name = "Address[]";
    
    	var newDiv = document.createElement("div");
    	newDiv.appendChild(newInputPrivateAddress);
    	newDiv.appendChild(newInputfrmAddressType1ID);
    	newDiv.appendChild(newInputfrmAddressType2ID);
    	newDiv.appendChild(newInputAddress);
    	
    	var targetDiv = document.getElementById("target");
            targetDiv.appendChild(newDiv);
    }
    
    </script>
    </head>
    <body>
    <input type="checkbox" name="PrivateAddress[]" value="1" CHECKED>
    <input type="radio" name="frmAddressTypeID[]" value="1" CHECKED>
    <input type="radio" name="frmAddressTypeID[]" value="2">
    <input type="text" name="Address[]" />
    <div id="target"></div>
    
    <input id="AddAddress" type="button" value="Add" />
    
    
    </body>
    </html>


Bookmarks

Posting Permissions

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