Add extra form field

[ShannenS]

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.

[Dormilich]

a very basic and incomplete example, albeit showing the idea

PHP Code:

function makeTextField(inpName, defValue)
{
    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", addField, false); 


you can also make it more stylish

PHP Code:

function addTextField(inpName, defValue)
{
    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", addField, false); 


or even

PHP Code:

HTMLFormElement.prototype.addTextField = function (inpName, defValue)
{
    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", addField, false); 


[ShannenS]

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.

[Dormilich]

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", addField, false);
} 


[Philip M]

Originally Posted by ShannenS

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?

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>

[ShannenS]

Originally Posted by Dormilich

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", addField, false);
} 


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.

Originally Posted by Philip M

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.

[Dormilich]

Originally Posted by ShannenS

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?

[ShannenS]

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

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

[Dormilich]

well, a dropdown box looks like (what I think you mean)

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

[ShannenS]

Yes I have already coded the PHP part to generate those parts marked in blue all I need is the AJAX and HTML

[Dormilich]

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 (4 === xhr.readyState && 200 === xhr.status) {
    document.getElementById("formID").appendChild(xhr.responseXML.documentElement);
} 


// HTML
<form action="…" id="formID">
    <!-- form elements -->
</form>

note: the PHP output must produce well-formed XML or JavaScript will throw an error.

[ShannenS]

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"]4 === 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(inpName, defValue)
{
    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", addField, false); 
}  
if (4 === 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.

[Dormilich]

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", addField, false); 
} 


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 (4 === 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.");
        }
    }
}