Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

input bijvoegen en verwijderen (Opgelost)

riagabel2 - 27/11/2012 20:27 (laatste wijziging 27/11/2012 20:28)

Lid

Ik wil aan de hand van een jQuery een aantal input velden bijvoegen als de gebruiker dat wenst. Alleen ik heb daar ook een aantal labels tussen staan. Nu had ik een hele mooie alleen het geval is het dat hij het niet meer doet nu. Ik heb het volgende:

php code - Bekijk de code zonder highlighting - Klap code in

                //<![CDATA[
		$(window).load(function(){
			$(function() {
				var scntDiv = $('#p_scents');
				var e = $('#p_scents').size() + 1;
				$('#addScnt').live('click', function() {
					$('<p><div for="p_scnts"><div class="form"><label style="border-bottom: 1px dashed #1299f3; width: 100%; font-size: 20px;">Passagier '+e+'</label></div><div class="form"><label>Geslacht:</label><div class="radio"><input type="radio" name="geslacht'+e+'" value="man" /> Man &nbsp;<input type="radio" name="geslacht'+e+'" value="vrouw" /> Vrouw</div></div><div class="form"><label>Voorletters:</label><input type="text" name="voorletters'+e+'" /></div><div class="form"><label>Tussenvoegsel:</label><input type="text" name="tussenvoegsel'+e+'" /></div><div class="form"><label>Achternaam:</label><input type="text" name="voorletters'+e+'" /></div><div class="form"><label>Geboortedatum:</label><input type="text" name="geboortedatum'+e+'" placeholder="DD-MM-JJJJ" size="10" style="width: 70px;" /></div></div><a href="#" id="remScnt"><img src="images/delete.png" alt="verwijderen" /></a></p>').appendTo(scntDiv);
					e++;
					return false;
				});
				$('#remScnt').live('click', function() {
					if( e > 2 ) {
					$(this).parents('p').remove();
					e--;
					}
					return false;
				});
			});
		});//]]>
            
//<![CDATA[
		$(window).load(function(){
			$(function() {
				var scntDiv = $('#p_scents');
				var e = $('#p_scents').size() + 1;
				$('#addScnt').live('click', function() {
					$('<p><div for="p_scnts"><div class="form"><label style="border-bottom: 1px dashed #1299f3; width: 100%; font-size: 20px;">Passagier '+e+'</label></div><div class="form"><label>Geslacht:</label><div class="radio"><input type="radio" name="geslacht'+e+'" value="man" /> Man &nbsp;<input type="radio" name="geslacht'+e+'" value="vrouw" /> Vrouw</div></div><div class="form"><label>Voorletters:</label><input type="text" name="voorletters'+e+'" /></div><div class="form"><label>Tussenvoegsel:</label><input type="text" name="tussenvoegsel'+e+'" /></div><div class="form"><label>Achternaam:</label><input type="text" name="voorletters'+e+'" /></div><div class="form"><label>Geboortedatum:</label><input type="text" name="geboortedatum'+e+'" placeholder="DD-MM-JJJJ" size="10" style="width: 70px;" /></div></div><a href="#" id="remScnt"><img src="images/delete.png" alt="verwijderen" /></a></p>').appendTo(scntDiv);
					e++;
					return false;
				});
				$('#remScnt').live('click', function() {
					if( e > 2 ) {
					$(this).parents('p').remove();
					e--;
					}
					return false;
				});
			});
		});//]]>
 

en:

php code - Bekijk de code zonder highlighting - Klap code in

                <div id="p_scents">
	<p>
	    <div for="p_scnts">
											<div class="form">
												<label style="border-bottom: 1px dashed #1299f3; width: 100%; font-size: 20px;">Passagier 1</label>
											</div>
											<div class="form">
												<label>Geslacht:</label>
												<div class="radio">
													<input type="radio" name="geslacht" value="man" /> Man &nbsp;	
													<input type="radio" name="geslacht" value="vrouw" /> Vrouw
												</div>
											</div>
											<div class="form">
												<label>Voorletters:</label>
												<input type="text" name="voorletters" />
											</div>
											<div class="form">
												<label>Tussenvoegsel:</label>
												<input type="text" name="tussenvoegsel" />
											</div>
											<div class="form">
												<label>Achternaam:</label>
												<input type="text" name="voorletters" />
											</div>
											<div class="form">
												<label>Geboortedatum:</label>
												<input type="text" name="geboortedatum" placeholder="DD-MM-JJJJ" size="10" style="width: 70px;" />
											</div>
										</div>
									</p>
								</div>
							<label><a id="addScnt" href="#"><img src="/images/extend.png" alt="veld bijvoegen" />&nbsp;Passagier toevoegen</a></label>
            
<div id="p_scents">
	<p>
	    <div for="p_scnts">
											<div class="form">
												<label style="border-bottom: 1px dashed #1299f3; width: 100%; font-size: 20px;">Passagier 1</label>
											</div>
											<div class="form">
												<label>Geslacht:</label>
												<div class="radio">
													<input type="radio" name="geslacht" value="man" /> Man &nbsp;	
													<input type="radio" name="geslacht" value="vrouw" /> Vrouw
												</div>
											</div>
											<div class="form">
												<label>Voorletters:</label>
												<input type="text" name="voorletters" />
											</div>
											<div class="form">
												<label>Tussenvoegsel:</label>
												<input type="text" name="tussenvoegsel" />
											</div>
											<div class="form">
												<label>Achternaam:</label>
												<input type="text" name="voorletters" />
											</div>
											<div class="form">
												<label>Geboortedatum:</label>
												<input type="text" name="geboortedatum" placeholder="DD-MM-JJJJ" size="10" style="width: 70px;" />
											</div>
										</div>
									</p>
								</div>
							<label><a id="addScnt" href="#"><img src="/images/extend.png" alt="veld bijvoegen" />&nbsp;Passagier toevoegen</a></label>
 

Zou er misschien iemand een kijkje naar nemen en me misschien helpen het werkend te krijgen?

Met vriendelijke groet,

Riagabel2

1 antwoord

Gesponsorde links

vinTage - 27/11/2012 20:59
Nieuw lid		Om te beginnen kun je je code al 5000miljoen keer leesbaarder maken, door gewoon css te gebruiken ipv al die inline meuk in je 'code' te frotten. Wat er fout gaat bij je weet (zie) ik niet wegens gebrek aan foutmeldingen en leesbare code Een live voorbeeld scheelt ook al

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten