jquery add input to form

R

ropueh

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

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

HTML: 
<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
 
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())

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);
}
 
Zuletzt bearbeitet von einem Moderator:
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 :/
 
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?
 
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?
 
ff4 nutze ich und ie8 hab ich auch probiert.
strg f5 auch...

hier mal der ganze, unsaubere murks code.

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>
 
Mir sagt er
Code: 
Fehler: $("#row" + id).highlightFade is not a function
Quelldatei: http://localhost/test.html#
Zeile: 65
 
Der Fehler sagt, dass die Funktion highlightFade keine Funktion ist.

Javascript: 
    $('#row' + id).highlightFade({
        speed:1000
    });
Kommentier das mal aus, dann sollte es klappen.
 
Zuletzt bearbeitet von einem Moderator:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück