Add input box

Question

felix001 13 Junior Poster in Training

13 Years Ago

Im currently working on a HTML page to add additional input boxes.
I have the following code. Does anyone know how I would go about adding the required vlaues to each of the input boxes, for use later on within php ??

<html>
<head>
<title></title>
<script language="javascript">
fields = 0;
function addInput() {
if (fields != 5) {
document.getElementById('text').innerHTML += "<label for='remotelannet'>Local LAN</label><input type='text' value='' /><label 

for='remotelansub'>Mask</label><input type='text' value='' /><br />";
fields += 1;
} else {
document.getElementById('text').innerHTML += "<br />Only 5 upload fields allowed.";
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<form name="form">
<label for="remotelannet">Local LAN</label>
        <input type="text" name="remotelannet" />
<label for="remotelansub">Mask</label>
        <input type="text" name="remotelansub" />

<input type="button" onclick="addInput()" name="add" value="+" />
</form>
<div id="text">

</div>
</body>
</html>

Thanks,

javascript

3 Contributors
13 Replies
163 Views
5 Days Discussion Span
Latest Post 13 Years Ago Latest Post by felix001

ddymacek 15 Posting Whiz

13 Years Ago

what are the 'required values' and when are you wanting to add them in? perhaps when you are building your input boxes you can give them values.

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Im currently working on a HTML page to add additional input boxes.
I have the following code. Does anyone know how I would go about adding the required vlaues to each of the input boxes, for use later on within php ??

The values of the additional input boxes will (eventually) be whatever the user enters. Do you want to seed them with default values?

Something else you need to consider is that the original and additional input boxes need unique names, eg.:

<label for="remotelannet">Local LAN</label>
        <input type="text" name="remotelannet_0" />
<label for="remotelansub">Mask</label>
        <input type="text" name="remotelansub_0" />
<label for="remotelannet">Local LAN</label>
        <input type="text" name="remotelannet_1" />
<label for="remotelansub">Mask</label>
        <input type="text" name="remotelansub_1" />
...

or maybe:

<label>Local LAN</label>
        <input type="text" name="remotelannet[]" />
<label>Mask</label>
        <input type="text" name="remotelansub[]" />
<label>Local LAN</label>
        <input type="text" name="remotelannet[]" />
<label>Mask</label>
        <input type="text" name="remotelansub[]" />
...

You need to ensure your php is compatible with whichever version you use. See eg. here for a discussion on this point (make sure you read all the comments).

Also, for="..." in a label tag works with the corresponding input element's (unique) id, not name. Therefore, there's no point setting for="..." unless you intend also to give the input elements ids.

Airshow

Edited 13 Years Ago by Airshow because: n/a

Airshow 416 WiFi Lounge Lizard

13 Years Ago

That's straightforward string building:

...
document.getElementById('text').innerHTML += '<label for="remotelannet_' + fields + '">Local LAN</label><input type="text" value="" /><label for="remotelansub_' + fields + '">Mask</label><input type="text" value="" /><br />';
...

You can also set default values:

...
var remotelannet_val = 99;//whatever you want here
var remotelansub_val = 'text_' + fields;//whatever you want here
document.getElementById('text').innerHTML += '<label for="remotelannet_' + fields + '">Local LAN</label><input type="text" value="' + remotelannet_val + '" /><label for="remotelansub_' + fields + '">Mask</label><input type="text" value="' + remotelansub_val + '" /><br />';
...

Airshow

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Move your <div id="text"></div> inside the form, above the GO button.

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

felix001 13 Junior Poster in Training · Answer 1 · 2011-08-18T02:10:45+00:00

Thanks for your replies. My thinking was to add the fields variable onto each of the labels, id etc.

Any ideas on how to do this ???

felix001 13 Junior Poster in Training · Answer 2 · 2011-08-18T04:16:54+00:00

Thanks for your help with this:

I now have the following code:

if (fields != 4) {
fields += 1;
document.getElementById('text').innerHTML += '<label for="remotelannet_' + fields + '">Local LAN</label><input type="text" id="remotelannet_' + fields + '" /><label for="remotelansub_' + fields + '">Mask</label><input type="text" for="remotelansub_' + fields + '" /><br />';
} else {
document.getElementById('text').innerHTML += "<br />Only 5 upload fields allowed.";
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<form name=form action="test.php" method="get">
<label for="remotelannet">Local LAN</label>
        <input type="text" name="remotelannet" />
<label for="remotelansub">Mask</label>
        <input type="text" name="remotelansub" />
<input type="button" onclick="addInput()" name="add" value="+" />
<input type="submit" value="GO" />
</form>
<div id="text">
</div>
</body>
</html>

but the query string that is sent to the php script is only for remotelannet & remotelansub ??

felix001 13 Junior Poster in Training · Answer 3 · 2011-08-18T19:01:03+00:00

Ive amended the div tags but the same thing happens (??)

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 4 · 2011-08-19T02:37:58+00:00

Use DragonFly (Opera) or FireFly (Firefox) to inspect the contents of the div after it has been dynamically loaded.

Does the HTML look correct?
If not, then work out what needs to be fixed.

Airshow

felix001 13 Junior Poster in Training · Answer 5 · 2011-08-22T00:32:49+00:00

I inspected the html using firebug and all the relevant ids are being generate (??) it just appears the submission of these from the form isnt working correctly...

The html being displayed by the browser is :

<body>
<form method="get" action="test.php" name="form">
<label for="remotelannet">Local LAN</label>
<input type="text" name="remotelannet">
<label for="remotelansub">Mask</label>
<input type="text" name="remotelansub">
<input type="button" value="+" name="add" onclick="addInput()">
<input type="submit" value="GO">
</form>
<div id="text">
<label id="remotelan_id__1" for="remotelannet_1">Local LAN</label>
<input id="remotelannet_1" type="text">
<label for="remotelansub_1">Mask</label>
<input type="text" for="remotelansub_1">
<br>
<label id="remotelan_id__2" for="remotelannet_2">Local LAN</label>
<input id="remotelannet_2" type="text">
<label for="remotelansub_2">Mask</label>
<input type="text" for="remotelansub_2">
<br>
</div>
</body>
</html>

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 6 · 2011-08-22T00:56:57+00:00

That's fine except for one small detail - you still haven't moved <div id="text"></div> inside the form :ooh:

Airshow

felix001 13 Junior Poster in Training · Answer 7 · 2011-08-22T01:08:27+00:00

That's fine except for one small detail - you still haven't moved <div id="text"></div> inside the form :ooh:
Airshow

I`ve changed the div tags are you said earlier :

</script>
    </head>

        <body>
        <form name=form action="test.php" method="get">
    <div id="text">
        <label for="remotelannet">Local LAN</label>
    <input type="text" name="remotelannet" />
    <label for="remotelansub">Mask</label>
    <input type="text" name="remotelansub" />
    <input type="button" onclick="addInput()" name="add" value="+" />
    <input type="submit" value="GO" />
</div>
    </form>
    </body>

But still the same (??)

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 8 · 2011-08-22T01:27:56+00:00

<form name=form action="test.php" method="get">
<label for="remotelannet">Local LAN</label>
        <input type="text" name="remotelannet" />
<label for="remotelansub">Mask</label>
        <input type="text" name="remotelansub" />
<div id="text"></div>
<input type="button" onclick="addInput()" name="add" value="+" />
<input type="submit" value="GO" />
</form>

felix001 13 Junior Poster in Training · Answer 9 · 2011-08-22T02:39:37+00:00

<form name=form action="test.php" method="get">
<label for="remotelannet">Local LAN</label>
        <input type="text" name="remotelannet" />
<label for="remotelansub">Mask</label>
        <input type="text" name="remotelansub" />
<div id="text"></div>
<input type="button" onclick="addInput()" name="add" value="+" />
<input type="submit" value="GO" />
</form>

Thanks... :)