# jquery add input to form



## ropueh (24. Mai 2011)

Hallo,

ich habe ein funktionierendes Skript in ein neues Formular übertragen wollen. Es geht darum, dass bei klick auf "Hinzufügen" ein neues Inputfeld erscheint:


```
<script type="text/javascript">
function addFormField() {
	var id = document.getElementById("id").value;
	$("#pics").append("<p id='row" + id + "'>&nbsp;&nbsp;<input type='text' name='zutaten[]' id='zutaten" + id + "' size='20' value='Zutat " + id + "'>&nbsp;&nbsp;<a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'><img src='http://xxo/images/del.png'/></a><p>");
		
	$('#row' + id).highlightFade({
		speed:1000
	});
	
	id = (id - 1) + 2;
	document.getElementById("id").value = id;
}

function removeFormField(id) {
	$(id).remove();
}
</script>
```


```
<p><a href="#" onClick="addFormField(); return false;">Bild Hinzuf&uuml;gen</a></p>
<input type="hidden" id="id" value="1">
<div id="pics"></div>
```

die Felder hinzufügen klappt prima, allerdings erhöht er die id nicht, weshalb ich sie nicht ordentlich auswerten kann. Weiß jemand Rat?

vielen Dank schonmal


----------



## Back2toxic (24. Mai 2011)

Wenn du schon JQuery einsetzt, dann kannst du das Value auch direkt per JQuery abfragen, dann klappts auch.

Wieso eigentlich (id-1)+2?
++id tut das selbe (und erspart dir parseInt())


```
function addFormField() {
    var id = $('#id').val();
    $("#pics").append("<p id='row" + id + "'>&nbsp;&nbsp;<input type='text' name='zutaten[]' id='zutaten" + id + "' size='20' value='Zutat " + id + "'>&nbsp;&nbsp;<a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'><img src='http://xxo/images/del.png'/></a><p>");
    $('#row' + id).highlightFade({
        speed:1000
    });
    $('#id').val(++id);
}
```


----------



## ropueh (25. Mai 2011)

hey..
danke. ich kenne mich leider mit js und jquery kaum, eher gar nicht, aus... habe das script mal vor einiger zeit irgendwo gefunden und minimal angepasst.

mit deiner verschlankung geht die id aber bei mir immer noch nicht hoch :/


----------



## Back2toxic (25. Mai 2011)

Sorry, wenn mein Post etwas geknirscht klang, ist nicht so gemeint 

Zum Thema:
Bei mir heißen die erstellten Felder Zutaten1, Zutaten2, Zutaten3, ...

Wo tritt bei dir denn der Fehler auf?


----------



## ropueh (25. Mai 2011)

hehe, nee hab ich nich krumm genommen 

bei mir bleibt Zutat 1 stehen.


----------



## Back2toxic (25. Mai 2011)

Welchen Browser benutzt du?

Ich hab das jetzt mal in FF4, Chrome 11, IE 6, 7, 8 probiert, überall wird die Zutat hochgezählt.

Hast du schon mal mit STRG+F5 die Seite neu geladen?


----------



## ropueh (25. Mai 2011)

ff4 nutze ich und ie8 hab ich auch probiert. 
strg f5 auch...

hier mal der ganze, unsaubere murks code.


```
<link rel="stylesheet" type="text/css" href="style.css" /> 
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript">
	$(document).ready(function()
	{
		//Hide div w/id extra
		$("#extra").css("display","none");

        // Add onclick handler to checkbox w/id checkme
		$("#bildjn").click(function()
		{
       
			// If checked
			if ($("#bildjn").is(":checked"))
			{
				//show the hidden div
				$("#extra").show("fast");
			}
			else
			{     
				//otherwise, hide it
				$("#extra").hide("fast");
			}
		});
    });
    </script>
	<script type="text/javascript">
	$(document).ready(function()
	{
		//Hide div w/id extra
		$("#extragal").css("display","none");

        // Add onclick handler to checkbox w/id checkme
		$("#galeriejn").click(function()
		{
       
			// If checked
			if ($("#galeriejn").is(":checked"))
			{
				//show the hidden div
				$("#extragal").show("fast");
			}
			else
			{     
				//otherwise, hide it
				$("#extragal").hide("fast");
			}
		});
    });
     </script> 
<!-- TinyMCE -->
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
	tinyMCE.init
	({
		mode : "textareas",
		theme : "simple"
	});
</script>
<!-- /TinyMCE -->
<script type="text/javascript">
function addFormField() {
    var id = $('#id').val();
    $("#pics").append("<p id='row" + id + "'>&nbsp;&nbsp;<input type='text' name='zutaten[]' id='zutaten" + id + "' size='20' value='Zutat " + id + "'>&nbsp;&nbsp;<a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'><img src='http://xxo/images/del.png'/></a><p>");
    $('#row' + id).highlightFade({
        speed:1000
    });
    $('#id').val(++id);
}
</script>
<?php
include('config.php');
echo "<form name='newseintragen' method='post' action='news_eintragen1.php' enctype='multipart/form-data'>

<label for='titel'>Titel</label>
<input type='text' name='titel' value='' size='50' maxlength='200'>

<label for='anreisser'>Anreißer (erscheint auf der Startseite)</label>
<textarea name='anreisser' value='' cols='50' rows='15'></textarea>

<label for='beitrag'>Beitrag</label>
<textarea name='beitrag' value='' cols='50' rows='15'></textarea>

<label for='kategorie'>Kategorie</label>
<select name='kategorie[]' multiple>\n"; 

$sqlkat = "SELECT * FROM nkategorien";
$querykat = mysql_query($sqlkat);
while ($data = mysql_fetch_array($querykat)) 
{
	$nk_id = $data['nk_id'];
	$kategorie = $data['kategorie'];
	echo "<option value=\"$nk_id\">$kategorie</option>";
}

echo "</select>";

?>

<label for="bildjn">Bild?</label>
<input type="checkbox" name="bildjn" id="bildjn" value="1"/>

<div id="extra">
	<label for="bildstd">Standardbild auswählen</label><select name="bildstd"><option value="0">kein Standardbild</option><option value="1">Stiefel</option><option value="2">Glatze</option></select>
	<label for="bildind">oder ein neues hochladen</label><input name="bild" type="file">
</div>

<label for="galeriejn">Bilder/Video-Galerie?</label>
<input type="checkbox" name="galeriejn" id="galeriejn" value="1"/>
<div id="extragal">

<p><a href="#" onClick="addFormField(); return false;">Bild Hinzuf&uuml;gen</a></p>
<input type="hidden" id="id" value="1">
<div id="pics"></div>
</div>

			<input type="submit" name="submit" value="absenden">

</form>
```


----------



## Back2toxic (25. Mai 2011)

Mir sagt er 

```
Fehler: $("#row" + id).highlightFade is not a function
Quelldatei: http://localhost/test.html#
Zeile: 65
```


----------



## ropueh (31. Mai 2011)

und was sagt mir der fehler? :/ sorry


----------



## Back2toxic (31. Mai 2011)

Der Fehler sagt, dass die Funktion highlightFade keine Funktion ist.


```
$('#row' + id).highlightFade({
        speed:1000
    });
```
Kommentier das mal aus, dann sollte es klappen.


----------

