input's toevoegen zonder refresh

Status
Niet open voor verdere reacties.
M

mysql

Gebruiker
Lid geworden
28 jan 2012
Berichten
108
Hallo allemaal,

ik heb een misschien een best moeilijke vraag:

Ik heb op een page een paar <input>'s.
Nu wil ik als je op een bepaalde klik op dergelijke klikt dat er een <input> bijkomt.
Dit wil ik graag zonder dat de page opnieuw wordt geladen.

Het is trouwens wel handig als ik zelf kan bepalen hoeveel er bijkomen.

Alvast heel erg bedankt

Mysql
 
Je moet die andere inputs dan onzichtbaar maken.

Dat kan door <input id="knop2" style="visibility:hidden;" > te gebruiken.

Vervolgens kan je hem dan laten zien door de functie showelement(){document.getElementById("knop2").style.visibility="visible";} aan te roepen zodra de gebruiker op de knop drukt.

Als voorbeeld: http://phpfiddle.org/main/code/hxe-u2y , click Run.
 
Laatst bewerkt:
Is nieteens zo heel moeilijk!
Code: 
var parent = document.getElementById('IDvanParent');
var newInput = document.createElement('input'); //Input kan alles zijn wat je wil, a voor link, div voor div, span voor span...
newInput.type = 'text'; //Hiermee stel je alle attributes in. 
newInput.setAttribute('type', 'text'); //Zo kan het ook,zelfde effect. setAttribute(attributeName, attributeValue);
newInput.className = 'jalalalala';
newInput.ID = 'njwenjn';
newInput.name = 'jdjdjfj'; //Zo stel je dus alles in..
parent.appendChild(newInput); //Nu word die aan de parent toe gevoegd.
Voordeel van de hierboven genoemde manier is dat je onbeperkt kan toevoegen en je dus niet 900miljoen inputs in je html hoeft te zetten :P
Maar als je zeker weet dat niemand meer dan 7 ofzo gebruikt is dat misschien wel makkelijker
info:
http://w3schools.com/js/js_htmldom.asp
 
Laatst bewerkt:
Zo dus:
HTML: 
<div id="IDvanParent" onclick="roep();">rrrr;</div>
<script language="javascript">
function roep(){
var parent = document.getElementById('IDvanParent');
var newInput = document.createElement('input'); //Input kan alles zijn wat je wil, a voor link, div voor div, span voor span...
newInput.type = 'text'; //Hiermee stel je alle attributes in.
newInput.setAttribute('type', 'text'); //Zo kan het ook,zelfde effect. setAttribute(attributeName, attributeValue);
newInput.className = 'jalalalala';
newInput.ID = 'njwenjn';
newInput.name = 'jdjdjfj'; //Zo stel je dus alles in..
parent.appendChild(newInput); //Nu word die aan de parent toe gevoegd.
}
</script>
 
Yep, precies, dan zorgen dat ze een mooie classname krijgen zodat ze allemaal hetzelfde uitziend dmv css.
Ik weet niet voor welke gegevens je het gaat gebruiken, maar je kan dus ook steeds een div aan maken, daarin een <label> en een <input> stoppen (met appendchild), en dan pas appendchild op de parent doen.
Als je dit niet snapt, geef ff een linkje naar hoe het nu uitziet, dan kan ik het beter uitleggen :)
 
Oke,

nu nog een stapje verder:
s1.png
In het plaatje zie je melder, getuige, slachtoffer en pester.

s2.png
Ik wil als je bij 'Melder' getuige kiest dat er bij getuige het woordje 'Jij' komt.
kies ik pester dan komt 'Jij' bij pester.
EN BELANGRIJK: hij gaat bij de andere weg.

DUS:
Getuige: bij getuige
Slachtoffer: bij slachtoffer
Pester: bij pester

Het extra is dat als je GETUIGE (alleen GETUIGE) kiest dat er dan ook een checkbox achter de <select> komt.
Hierbij staat de tekst anoniem.
Als je die aanvinkt, gaat het woordje 'Jij' OOK bij getuige weg.

DUS:
Getuige zonder vink: alleen bij getuige
Getuige met vink: nergens
Slachtoffer: alleen bij slachtoffer
Pester: alleen bij pester

Alvast bedankt

Mysql
 
Hm dat is wat moeilijker omdat je dan de select moet aanpassen.
Je kan het zo proberen:
geef alle <option>s een ID, dus bijv meldgetuige, meldslachtoffer, meldpester, zelfde met alle andere.
Dan maak je een functie die dan kijkt wat is aangeklikt dan document.getelementbyid(id).innerHTML='je tekst';
kun je daar iets mee?
 
http://phpfiddle.org/api/run/itp-76e
Voor een checkbox moet je style="display:none;" gebruiken, niet visibility=hidden.
Code: 
<html>
	<body>
		<title>helpmij.nl input</title>
		<center>
	
			<form  id="form1">
				<input type="button" value="Ik ben getuige" onclick = "showelement()">
			
			
			
				
			<label id="label1" style="display:none;"><input id="form2"  type="checkbox" value="a">Ik wil anoniem blijven</label>
			
			</form>
	      	<script>
				function showelement(){document.getElementById("label1").style.display="block";}
			</script>

		</center>
	</body>
</html>

Voor het verbergen van opties in een dropdown menu kan het style="display:none;" attribuut ook gebruikt worden (ook in een option tag).
 
Laatst bewerkt:
Zo ziet het er ongeveer uit:
PHP: 
<?php
echo("<tr>");
echo("<td>Melder:</td>");
echo("<td><select name=\"reporter_type\" onchange=\"reporter_add(''+this.value+'');\"><option value=\"1\">Selecteer type...</option><option value=\"1\">Getuige</option><option value=\"2\">Slachtoffer</option><option value=\"3\">Pester</option></select></td>");
echo("</tr>");










echo("<tr>");
echo("<td>Getuige(s):</td>");
echo("<td>");
echo("<add id=\"reporter_witness\"></add>");
echo("<a style=\"visibility:hidden;\">(x) </a>");
echo("<select name=\"class_witness[1]\">");
echo("<option value=\"0\">Selecteer klas...</option>");
$classes = mysql_query("SELECT * FROM table_classes WHERE school='".$_GET["s"]."' AND active='1'");
while ($CLASS = mysql_fetch_array($classes)){
   echo("<option value=\"".$CLASS["id"]."\">".$CLASS["name"]."</option>");
}
echo("</select> ");
echo("<input name=\"witness[1]\" type=\"text\" value=\"\">");
echo("<script language=\"javascript\">\n");
# Nieuw file veld toevoegen
echo("var aantal = 1;\n");
echo("function add_witness(){\n");
echo("   aantal++;\n");
echo("   var ouder = document.getElementById('witness');\n");
echo("   var kind = document.createElement('t');\n");
echo("   kind.innerHTML = '");

echo("<br>");
echo("<a href=\"#\" onclick=\"del_witness('+aantal+')\">(x)</a> ");
echo("<select name=\"class_witness['+aantal+']\">");
echo("<option value=\"0\">Selecteer klas...</option>");
$classes = mysql_query("SELECT * FROM table_classes WHERE school='".$_GET["s"]."' AND active='1'");
while ($CLASS = mysql_fetch_array($classes)){
   echo("<option value=\"".$CLASS["id"]."\">".$CLASS["name"]."</option>");
}
echo("</select>");
echo(" <input name=\"witness['+aantal+']\" type=\"text\" value=\"\">");
echo(" <input name=\"count_witness\" type=\"hidden\" value=\"'+aantal+'\">");
echo("';");
echo("   ouder.appendChild(kind);\n");
echo("}\n");
# Veld verwijderen
echo("function del_witness(nr) {\n");
echo("   var ouder = document.getElementById('witness');\n");
echo("   var verwijder = document.getElementById(nr);\n");
echo("   ouder.removeChild(verwijder);\n");
echo("}\n");
echo("</script>\n");
echo("<add id=\"witness\"></add>");
echo(" <a href=\"#\" onclick=\"add_witness()\">(+)</a>");
echo("</td>");
echo("</tr>");
?>
 
Laatst bewerkt:
Gebruik je nou echo om html en javascript code te outputten..?

Dat kan echt niet hoor..schrijf gewoon normale html en javascript.:P
 
Laatst bewerkt:
Jawel,

dit is php.
Dit wordt omgezet door de server.

Dus de php code (<?php echo("<script>");?>) wordt (<script>).

Mysql
 
Waarom als ik vragen mag? Het enige wat dit doet is het vergroten van de laadtijd van je website en een veel grotere strain op je server.
 
Dit is mijn manier...
Ik kan het ook zonder php, zoals je zag doe ik het met.
Er is trouwens voor de rest niks dat lang moet laden (duurt ongeveer nu 0,00001 seconden).

Mysql
 
En trouwens als ik de heletijd <??>html + js<??>html + js<??> moet doen...
Kan het ook <? echo("html+js");?>

Mysql
 
Het is wel een hele domme, inefficiente en omslachtige (en als er anderen na jou met je code moeten werken, ook asociale) manier. Doe het alsjeblieft zonder al die echo() onzin.
 
Alsjeblieft...

Het script voor de mensen die het wel zouden kunnen oplossen zonder echo():
HTML: 
<tr>
<td>Melder:</td>
<td>
<select name="reporter_type" onchange="reporter_add(''+this.value+'');">
<option value="1">Selecteer type...</option>
<option value=\"1\">Getuige</option>
<option value=\"2\">Slachtoffer</option>
<option value=\"3\">Pester</option>
</select>
</td>
</tr>
 
<tr>
<td>Getuige(s):</td>
<td>
<add id="reporter_witness"></add>
<a style="visibility:hidden;">(x) </a>
<select name="class_witness[1]">
<option value="0">Selecteer klas...</option>
<?php
$classes = mysql_query("SELECT * FROM table_classes WHERE school='".$_GET["s"]."' AND active='1'");
while ($CLASS = mysql_fetch_array($classes)){
   echo("<option value=\"".$CLASS["id"]."\">".$CLASS["name"]."</option>");
}
?>
</select>
<input name="witness[1]" type="text" value="">
<script language="javascript">
var aantal = 1;
function add_witness(){
aantal++;
var ouder = document.getElementById('witness');
var kind = document.createElement('t');
kind.innerHTML = '<br><a href="#" onclick="del_witness('+aantal+')">(x)</a><select name="class_witness['+aantal+']"><option value="0">Selecteer klas...</option><?php
$classes = mysql_query("SELECT * FROM table_classes WHERE school='".$_GET["s"]."' AND active='1'");
while ($CLASS = mysql_fetch_array($classes)){
   echo("<option value=\"".$CLASS["id"]."\">".$CLASS["name"]."</option>");
}
?></select><input name="witness['+aantal+']" type="text" value=""><input name="count_witness" type="hidden" value="'+aantal+'">';
ouder.appendChild(kind);
}
function del_witness(nr) {
var ouder = document.getElementById('witness');
var verwijder = document.getElementById(nr);
ouder.removeChild(verwijder);
}
</script>
<add id=\"witness\"></add>
<a href=\"#\" onclick=\"add_witness()\">(+)</a>
</td>");
</tr>");

Mysql
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan