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,

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.

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

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

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

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

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

Airshow

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

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

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>

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

Airshow

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 (??)

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

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.