Javascript inputvelden toevoegen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

John Doe

John Doe

21/06/2009 15:55:00
Quote Anchor link
Hoi allemaal,

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)
PHP script in nieuw venster Selecteer het PHP script
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
<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>
 
PHP hulp

PHP hulp

13/06/2021 12:20:18
 
Joey Drieling

Joey Drieling

21/06/2009 16:02:00
Quote Anchor link
effe snel gevonde via google.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
Gewijzigd op 01/01/1970 01:00:00 door Joey Drieling
 
John Doe

John Doe

21/06/2009 16:37:00
Quote Anchor link
Ik heb het toegepast nu krijg ik dit
Voorbeeld

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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>
 
Joey Drieling

Joey Drieling

21/06/2009 17:06:00
Quote Anchor link
Heb hem effe aan gepast.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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 ;)
 
John Doe

John Doe

21/06/2009 21:07:00
Quote Anchor link
het enige nadeel is dat als je tab doet je naar beneden gaat ipv opzij weet iemand daar nog een oplossing voor dat zou helemaal te gek zijn.
 
Jesper Diovo

Jesper Diovo

21/06/2009 21:28:00
 
Www JdeRuijterNL

www JdeRuijterNL

21/06/2009 21:56:00
Quote Anchor link
Maar wat als je client nou geen java ondersteund :s moet je dan niet terug kunnen vallen op alle invulveldjes?

Wel leuk dat dit mogelijk is alleen twijfel ik nogal veel over het gebruik van javascript op deze manier.
 
John Doe

John Doe

22/06/2009 14:58:00
Quote Anchor link
Ik ook dus ik denk dat ik het gewoon 5 velden laat worden.
 
Joey Drieling

Joey Drieling

22/06/2009 15:19:00
Quote Anchor link
ja kan het gewoon toe pasen en voor mensen zonder javascript gebruik de noscript tag.
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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.