Formular erweitern - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > JavaScript > Formular erweitern

Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Formular erweitern

Pages: [1]

geschrieben von harald am 15.11.2007 - 12:41

Hi,

ich habe hier ein Formular, mit mehreren Feldern und habe dort ein Feld mit einer Bestellnummer. Nun will ich per Klick auf einen Button ein weiteres Feld für so eine Bestellnummer einfügen.
Gefunden habe ich schon mal das hier:

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22:

<script type="text/javascript">
<!--
function clone_this(objButton)
{
if(objButton.parentNode)
    {
    tmpNode=objButton.parentNode.cloneNode(true);
    objButton.form.appendChild(tmpNode);
    for(j=0;j<objButton.form.lastChild.childNodes.length;++j)
        {
        if(objButton.form.lastChild.childNodes[j].type=='text')
            {
            objButton.form.lastChild.childNodes[j].value='';
            break;
            }
        }
    objButton.value="entfernen";
    objButton.onclick=new Function('f1','this.form.removeChild(this.parentNode)');
    }
}
//-->
</script>

Das funzt auch, allerdings erscheinen die zusätzlichen Felder unterhalb meines Formulars:

HTML-Quelltext

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: 
32:

<form method="post" action="">
<input type="hidden" name="no_cache" value="1" />
     <table width="90%" class="htmlarea-showtableborders csc-frame-frame2">
     		<tr>
     						<td><b>Barcodenummer(n)</b></td>

	             	<td valign="top">
	             	 <div class="rentalmanager_barcode">
								  <input type="text" size="20" name="barcode[]" value="">

								  <input type="button"value="noch eins" onclick="clone_this(this)">	             	
								 </div>
	             	</td>
							</tr>
     		<tr>
     						<td><b>noch ein feld</b></td>

	             	<td valign="top">
								  <input type="text" size="20" name="feld2" value="">             	
	             	</td>
							</tr>
              <tr>
                <td>
                
                </td>
               </tr>
							<tr>

								<td colspan="2"><input type="submit" name="add" value="eintragen" /></td>
							</tr>   																											
      </table>
</form>

Wie muss ich das den anpassen, damit die Felder unterhalb von dme alten Feld erscheinen?

geschrieben von harald am 29.11.2007 - 09:56

Hi,

hat da keiner eine Idee (oder vielleicht einen anderen Ansatz für mich)?

Grüße
Harald

geschrieben von René am 29.11.2007 - 11:12

... vielleicht kannst du danit ja was anfangen?

HTML-Quelltext

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: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
<!--
var i = 1;

function NeuesFeld()
{
	var row = document.getElementById('formtable').insertRow(i);
	var cell_1 = row.insertCell(0);
	var cell_2 = row.insertCell(1);

	var text = document.createTextNode('Link ' + (i + 1));
	cell_1.appendChild(text);

	var input = document.createElement('input');
	input.type = 'text';
	input.name = 'link[]';
	input.size = 60;
	input.maxlength = 150;

	cell_2.appendChild(input);

	i++;
}
-->
</script>

</head>
<body>

<form name="posting" action="save.php" method="post">
	<table id="formtable" border="1" cellspacing="0" cellpadding="0" width="100%">
		<tr>
			<td>Link 1</td>
			<td><input name="link[]" type="text" size="60" maxlength="150" /></td>
		</tr>
		<tr>
			<td colspan="2"><input type="button" onclick="NeuesFeld();" value="Feld hinzufügen" /></td>
		</tr>
	</table>
</form>

</body>
</html>

geschrieben von harald am 29.11.2007 - 13:24

Moin Rene,

vielen Dank!! Funzt perfekt.
Ließe sich so ein Feld dann auch wieder entfernen?

geschrieben von okley am 29.11.2007 - 16:27

Ja. Siehst du hier zum Beispiel:
http://www.mredkj.com/tutorials/tableaddrow.html
http://www.dustindiaz.com/add-and-r....avascript/