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 13 of 13
  1. #1
    New Coder
    Join Date
    Apr 2010
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Add extra form field

    I have a form, say this:
    Title: [text field]
    Parameters: [dropdown box]

    Simples so far. What I want is to have this:
    Title: [text field]
    Parameters: [dropdown box]
    [button or link]Add another parameter[/button or link]

    The button/link has to add another dropdown box beneath the first one.
    Any idea how to do this without refreshing the page (ie, using ajax or javascript)

    I would look this up on google but I don't have any idea what that process is called.

    Thank you for your time.

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,286
    Thanks
    12
    Thanked 343 Times in 339 Posts
    a very basic and incomplete example, albeit showing the idea
    PHP Code:
    function makeTextField(inpNamedefValue)
    {
        var 
    inp document.createElement("input");
        
    inp.type "text";
        
    inp.name inpName;
        if (
    undefined !== defValue) {
            
    inp.value defValue;
        }
        return 
    inp;
    }

    function 
    addField()
    {
        
    document.getElementById("formID").appendChild(makeTextField("addedField"));
    }

    // to be executed after page load
    document.getElementById("addFieldButton").addEventListener("click"addFieldfalse); 
    you can also make it more stylish
    PHP Code:
    function addTextField(inpNamedefValue)
    {
        var 
    inp document.createElement("input");
        
    inp.type "text";
        
    inp.name inpName;
        if (
    undefined !== defValue) {
            
    inp.value defValue;
        }
        
    this.appendChild(inp);
    }

    function 
    addField()
    {
        
    addTextField.call(document.getElementById("formID"), "addedField""insert name here");
    }

    // to be executed after page load
    document.getElementById("addFieldButton").addEventListener("click"addFieldfalse); 
    or even
    PHP Code:
    HTMLFormElement.prototype.addTextField = function (inpNamedefValue)
    {
        var 
    inp document.createElement("input");
        
    inp.type "text";
        
    inp.name inpName;
        if (
    undefined !== defValue) {
            
    inp.value defValue;
        }
        
    this.appendChild(inp);
        return 
    inp;
    }

    function 
    addField()
    {
        
    document.getElementById("formID").addTextField("addedField""insert name here");
    }
    // to be executed after page load
    document.getElementById("addFieldButton").addEventListener("click"addFieldfalse); 
    Last edited by Dormilich; 04-14-2010 at 01:50 PM. Reason: code improvements
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #3
    New Coder
    Join Date
    Apr 2010
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'm sorry I know nothing about javascript. I'm going to need to know how to implement this into my page after I have including the javascript file.

  • #4
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,286
    Thanks
    12
    Thanked 343 Times in 339 Posts
    the only thing you have to make sure is, that a) the IDs match and b) the indicated line is executed after page load (you can use window.onload for that)
    PHP Code:
    window.onload = function load()
    {
        
    document.getElementById("addFieldButton").addEventListener("click"addFieldfalse);

    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,011
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by ShannenS View Post
    The button/link has to add another dropdown box beneath the first one.
    Any idea how to do this without refreshing the page (ie, using ajax or javascript)
    Is this what you want?

    Code:
    Title <input type = "text"><br>
    
    <select name = 'list1' id = 'list1'">
    <option selected value=""> Choose A Fruit</option>
    <option value='Mango'> Mango </option>
    <option value='Apple'> Apple </option>
    <option value='Orange'> Orange </option>
    <option value='Watermelon'> Watermelon </option>
    </select>
    
    <input type = "button" value = "View Another Dropdown box" onclick = "show()">
    <br><br>
    
    <div id = "div1" style="display:none">
    <select name = 'list2' id = 'list2'">
    <option selected value=""> Choose A Country</option>
    <option value='USA'> USA </option>
    <option value='Canada'> Canada </option>
    <option value='France'> France </option>
    <option value='Germany'> Germany </option>
    </select><br>
    </div>
    
    <script type = "text/javascript">
    function show() {
    document.getElementById("div1").style.display="block";
    }
    </script>

  • #6
    New Coder
    Join Date
    Apr 2010
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Dormilich View Post
    the only thing you have to make sure is, that a) the IDs match and b) the indicated line is executed after page load (you can use window.onload for that)
    PHP Code:
    window.onload = function load()
    {
        
    document.getElementById("addFieldButton").addEventListener("click"addFieldfalse);

    When I say I am new to javascript I mean totally new. I still dont know how to have a button or link on my page that runs all that javascript.

    Quote Originally Posted by Philip M View Post
    Is this what you want?
    This is more like it. It is ALMOST exactly how I want it. Just that if you try to click the button more than once nothing happens. Maybe I should be more clear. When the user clicks the button, no matter how many times, it should create a new dropdown box.

  • #7
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,286
    Thanks
    12
    Thanked 343 Times in 339 Posts
    Quote Originally Posted by ShannenS View Post
    When the user clicks the button, no matter how many times, it should create a new dropdown box.
    how do you determine the values of each option you want to create?
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #8
    New Coder
    Join Date
    Apr 2010
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'm not sure if I understand you.
    I just need the code to append another dropdown box underneath the previous one. If you're talking about
    Code:
    <select name="value">
    where "value" is the value you're talking about then just change it to "value2", "value3" and so on incrementally. I can code a php page to process that.

  • #9
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,286
    Thanks
    12
    Thanked 343 Times in 339 Posts
    well, a dropdown box looks like (what I think you mean)
    Code:
    <select name="name1">
        <option value="value1">text1</option>
        <option value="value2">text2</option>
        <option value="value3">text3</option>
        <option value="value4">text4</option>
    </select>
    so you need an awful lot of information to build that from scratch (marked blue). you can of course use PHP to build that and make JavaScript (via AJAX) insert that into your document.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #10
    New Coder
    Join Date
    Apr 2010
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes I have already coded the PHP part to generate those parts marked in blue all I need is the AJAX and HTML
    Last edited by ShannenS; 04-15-2010 at 01:02 PM.

  • #11
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,286
    Thanks
    12
    Thanked 343 Times in 339 Posts
    the AJAX part is quite simple. provided PHP passes the correct element and the appropriate file headers.
    PHP Code:
    // I am assuming you get AJAX running

    // onreadystatechange
    if (=== xhr.readyState && 200 === xhr.status) {
        
    document.getElementById("formID").appendChild(xhr.responseXML.documentElement);

    Code:
    // HTML
    <form action="…" id="formID">
        <!-- form elements -->
    </form>
    note: the PHP output must produce well-formed XML or JavaScript will throw an error.
    Last edited by Dormilich; 04-15-2010 at 01:32 PM.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #12
    New Coder
    Join Date
    Apr 2010
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    As I told you I really am not good with javascript. PHP is my area. You'll have to explain what this does:
    PHP Code:
    if ([COLOR="Blue"]=== xhr.readyState && 200 === xhr.status[/COLOR]) {
        
    document.getElementById("formID").appendChild([COLOR="Blue"]xhr.responseXML.documentElement[/COLOR]);

    In order for me to modify the PHP to output the proper values.

    As for the HTML page please tell me if this is the correct basic page structure
    PHP Code:
    <html>
    <
    head>
    <
    title>
    whatever
    </title>
    function 
    makeTextField(inpNamedefValue)
    {
        var 
    inp document.createElement("input");
        
    inp.type "text";
        
    inp.name inpName;
        if (
    undefined !== defValue) {
            
    inp.value defValue;
        }
        return 
    inp;
    }
    function 
    addField()
    {
        
    document.getElementById("formID").appendChild(makeTextField("addedField"));
    }
    window.onload = function load() 

        
    document.getElementById("addFieldButton").addEventListener("click"addFieldfalse); 
    }  
    if (
    === xhr.readyState && 200 === xhr.status) {
        
    document.getElementById("formID").appendChild(xhr.responseXML.documentElement);
    }  
    </
    head>
    <
    body>
    <
    form action="POST" id="formID">
    <
    select name="animals">
        <
    option value="value1">penguin</option>
        <
    option value="value2">easter bunny</option>
        <
    option value="value3">mosquito</option>
        <
    option value="value4">wolverine</option>
    </
    select>
    </
    form>
    <
    input type "button" value "View Another Dropdown box" onclick "addField
    </body>
    </html> 
    If that is wrong make whatever changes needed to make that work.

  • #13
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,286
    Thanks
    12
    Thanked 343 Times in 339 Posts
    PHP Code:
    <html>
    <
    head>
    <
    title>whatever</title>
    <
    script type="text/javascript" src="script.js"></script>
    </head>
    <body>
    <form action="POST" id="formID">
    <select name="animals">
        <option value="value1">penguin</option>
        <option value="value2">easter bunny</option>
        <option value="value3">mosquito</option>
        <option value="value4">wolverine</option>
    </select>
    <button type="button" id="addSel">View Another Dropdown box</button>
    </form>
    </body>
    </html> 
    script.js
    PHP Code:
    function addField()
    {
        
    // here would come the AJAX code as you would find it in any tutorial
    }
    window.onload = function load() 

        
    document.getElementById("addSel").addEventListener("click"addFieldfalse); 

    PHP
    PHP Code:
    include "functions.php";
    header("Content-Type: text/xml");
    echo '<?xml version="1.0" encoding="ISO-8859-1" ?>'; // if you save it in Latin-1 encoding
    echo newSelectElement(); // this will print the select element's HTML code
    // prints <select name="whatever"><option value="1">A</option> …
    now for the interesting part. somewhere in your AJAX code, you define what should happen when the server sends its response. therefore you define an onreadystatechange event:
    PHP Code:
    // xhr being the XMLHttpRequest object
    xhr.onreadystatechange = function (evt)
    {
        if (
    === this.readyState) { // if the request is completed
            
    if (200 === this.status) { // if all is OK
    // xhr.responseXML is the document from PHP parsed as XML
    // (xhr.responseText would be the text returned by PHP)
    // .documentElement refers to the root node (<select>)
                
    document.getElementById("formID").appendChild(xhr.responseXML.documentElement);
            }
            else {
                
    alert("Request failed.");
            }
        }

    Last edited by Dormilich; 04-15-2010 at 02:11 PM.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer


  •  

    Tags for this Thread

    Posting Permissions

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