0

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,

3
Contributors
13
Replies
14
Views
6 Years
Discussion Span
Last Post by felix001
0

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.

0

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 by Airshow: n/a

0

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

0

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

0

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

0

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

0

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

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

Airshow

Edited by Airshow: n/a

0

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

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.