Javascript inputvelden toevoegen
Is het mogelijk om met behulp van een link(met javascript erachter) meer inputvelden toe te voegen aan mijn formulier.
Dit is mijn html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<head>
<title>Price check</title>
</head>
<body>
<form id="pricecheckform" name="pricecheckform" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<table width="75%"border="0">
<tr>
<td>Amount</td>
<td>Id</td>
</tr>
<tr>
<td><input type="text" name="amount[]" /></td>
<td><input type="text" name="id[]" /></td>
</tr>
<tr>
<td><input type="text" name="amount[]" /></td>
<td><input type="text" name="id[]" /></td>
</tr>
<tr>
<td></td>
<td><input name="calc" type="submit" value="Calculate" /></td>
</tr>
</table>
</form>
</body>
</html>
<head>
<title>Price check</title>
</head>
<body>
<form id="pricecheckform" name="pricecheckform" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<table width="75%"border="0">
<tr>
<td>Amount</td>
<td>Id</td>
</tr>
<tr>
<td><input type="text" name="amount[]" /></td>
<td><input type="text" name="id[]" /></td>
</tr>
<tr>
<td><input type="text" name="amount[]" /></td>
<td><input type="text" name="id[]" /></td>
</tr>
<tr>
<td></td>
<td><input name="calc" type="submit" value="Calculate" /></td>
</tr>
</table>
</form>
</body>
</html>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<title></title>
<script language="javascript">
fields = 0;
function addInput() {
if (fields != 10) {
document.getElementById('text').innerHTML += "<input type='file' value='' /><br />";
fields += 1;
} else {
document.getElementById('text').innerHTML += "<br />Only 10 upload fields allowed.";
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<form name="form">
<input type="button" onclick="addInput()" name="add" value="Add input field" />
<div id="text"></div>
</form>
</body>
</html>
<head>
<title></title>
<script language="javascript">
fields = 0;
function addInput() {
if (fields != 10) {
document.getElementById('text').innerHTML += "<input type='file' value='' /><br />";
fields += 1;
} else {
document.getElementById('text').innerHTML += "<br />Only 10 upload fields allowed.";
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<form name="form">
<input type="button" onclick="addInput()" name="add" value="Add input field" />
<div id="text"></div>
</form>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Joey Drieling
Voorbeeld
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
<head>
<title>Price check</title>
<script language="javascript">
function addInput() {
document.getElementById('addbox').innerHTML += '<tr><td><input type="text" name="amount[]" /></td><td><input type="text" name="id[]" /></td></tr>';
}
</script>
</head>
<body>
<form id="pricecheckform" name="pricecheckform" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<table width="75%"border="0">
<tr>
<td>Amount</td>
<td>Id</td>
</tr>
<tr id="addbox">
<td><input type="text" name="amount[]" /></td>
<td><input type="text" name="id[]" /></td>
</tr>
<tr>
<td></td>
<td><input name="calc" type="submit" value="Calculate" /></td>
</tr>
</table>
</form>
<input type="button" onclick="addInput()" name="add" value="Add input field" />
</body>
</html>
<head>
<title>Price check</title>
<script language="javascript">
function addInput() {
document.getElementById('addbox').innerHTML += '<tr><td><input type="text" name="amount[]" /></td><td><input type="text" name="id[]" /></td></tr>';
}
</script>
</head>
<body>
<form id="pricecheckform" name="pricecheckform" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<table width="75%"border="0">
<tr>
<td>Amount</td>
<td>Id</td>
</tr>
<tr id="addbox">
<td><input type="text" name="amount[]" /></td>
<td><input type="text" name="id[]" /></td>
</tr>
<tr>
<td></td>
<td><input name="calc" type="submit" value="Calculate" /></td>
</tr>
</table>
</form>
<input type="button" onclick="addInput()" name="add" value="Add input field" />
</body>
</html>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
<title>Price check</title>
<script language="javascript">
function addInput() {
document.getElementById('addbox1').innerHTML += '<br /><input type="text" name="amount[]" />';
document.getElementById('addbox2').innerHTML += '<br /><input type="text" name="id[]" />';
}
</script>
</head>
<body>
<form id="pricecheckform" name="pricecheckform" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<table width="75%"border="0">
<tr>
<td>Amount</td>
<td>Id</td>
</tr>
<tr>
<td id="addbox1"><input type="text" name="amount[]" /></td>
<td id="addbox2"><input type="text" name="id[]" /></td>
</tr>
<tr>
<td></td>
<td><input name="calc" type="submit" value="Calculate" /></td>
</tr>
</table>
</form>
<input type="button" onclick="addInput()" name="add" value="Add input field" />
</body>
</html>
<head>
<title>Price check</title>
<script language="javascript">
function addInput() {
document.getElementById('addbox1').innerHTML += '<br /><input type="text" name="amount[]" />';
document.getElementById('addbox2').innerHTML += '<br /><input type="text" name="id[]" />';
}
</script>
</head>
<body>
<form id="pricecheckform" name="pricecheckform" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
<table width="75%"border="0">
<tr>
<td>Amount</td>
<td>Id</td>
</tr>
<tr>
<td id="addbox1"><input type="text" name="amount[]" /></td>
<td id="addbox2"><input type="text" name="id[]" /></td>
</tr>
<tr>
<td></td>
<td><input name="calc" type="submit" value="Calculate" /></td>
</tr>
</table>
</form>
<input type="button" onclick="addInput()" name="add" value="Add input field" />
</body>
</html>
De fout zat in dat je wou schijven in <tr> maardaar kandat niet alleen in blockelmenten zo als <td> <div> <span> <p> maar nu werkt hij wel ;)
Wel leuk dat dit mogelijk is alleen twijfel ik nogal veel over het gebruik van javascript op deze manier.
Je zou bijvoorbeeld voor mensen zonder java dat er serverside een inputveld wordt toegevoegd, enkel nadeel pagina word steedts gerefreshd.
Het aan tal mensen zonder java is heel klein het gebruik er van maakt niets uit als je er aleen er voor zorgt dat je een basis manier maakt mocht ere geen java zijn.