PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
J

Verfraaien van script

Door Johan Goezinnen op 08-11-2012 18:28
2.683 views
Ik heb een script gemaakt, wat goed werkt, echter is wel bewerkelijk. Het moet makkelijker kunnen. Kan iemand mijn een tip geven om dit anders aan te pakken, of kan iemand mijn script zo aanpassen dat het qua werking identiek is. Alsvast enorm bedankt.

<script>
<!--
function install () {
var selectWat = ['bijlage1', 'bijlage2', 'bijlage3', 'bijlage4', 'bijlage5', 'bijlage6', 'bijlage7', 'bijlage8', 'bijlage9']; // id's+values van de elementen die in de select staan.
var selectCur;
for (x in selectWat) { // eerst allemaal hiden d.m.v. JS (als je dat via CSS doet, kunnen mensen die geen JS aanhebben je formulier niet invullen.
document.getElementById(selectWat[x]).style.display = 'none';
}
document.getElementById('wat').onchange = function (evt) {
if (selectCur !== undefined) { // als een element al word 'ge-showd', deze dan weer 'hiden'
document.getElementById(selectCur).style.display = 'none';
}
try {
document.getElementById(this.value).style.display = 'block'; // show een element
selectCur = this.value; // onthoud dat dit element geshowd word, zodat deze weer word ge-hide bij een andere keuze.
}
catch (e) { } // Stel dit element bestond niet, dan krijgen we nu geen error ;)
}
document.getElementById('wat').onchange(); // voor het geval er al één staat geselecteerd.
}
-->
</script>
<tr>Hoeveel bijlages toevoegen</tr>
<body onLoad="install();">
<select id="wat">
<option value="NULL"></option>
<option value="bijlage1">1x bijlage</option>
<option value="bijlage2">2x bijlage</option>
<option value="bijlage3">3x bijlage</option>
<option value="bijlage4">4x bijlage</option>
<option value="bijlage5">5x bijlage</option>
<option value="bijlage6">6x bijlage</option>
<option value="bijlage7">7x bijlage</option>
<option value="bijlage8">8x bijlage</option>
<option value="bijlage9">9x bijlage</option>
</select>
<div id="bijlage1">
<noscript>Vul dit in, als je wilt dansen:<br /></noscript>
<table><tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
</table>
</div>
<div id="bijlage2">
<noscript>Vul dit in, als je wilt zingen:<br /></noscript>
<table><tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
</table>
</div>
<div id="bijlage3">
<noscript>Vul dit in, als je iets anders wilt:<br /></noscript>
<table><tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
</table></div>
<div id="bijlage4">
<noscript>Vul dit in, als je iets anders wilt:<br /></noscript>
<table><tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
</table></div>
<div id="bijlage5">
<noscript>Vul dit in, als je iets anders wilt:<br /></noscript>
<table><tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
</table></div>
<div id="bijlage6">
<noscript>Vul dit in, als je iets anders wilt:<br /></noscript>
<table><tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
</table></div>
<div id="bijlage7">
<noscript>Vul dit in, als je iets anders wilt:<br /></noscript>
<table><tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
</table></div>
<div id="bijlage8">
<noscript>Vul dit in, als je iets anders wilt:<br /></noscript>
<table><tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
</table></div>
<div id="bijlage9">
<noscript>Vul dit in, als je iets anders wilt:<br /></noscript>
<table><tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
<tr>
<td width="123" class="tablebody">Bijlage:</td>
<td width="855" class="tablebody"><input name="attachment[]" type="file" size="30" /></td>
</tr>
</table></div>
</body>

Met vriendelijke groet,

Johan
R
Roy -
08-11-2012 19:25
Zet je code even tussen code tags.
Om een setje de juiste richting op te geven:

<select id="wat">
<option value="NULL"></option>
<?php
$aantal_bijlages = 9;
for ($i = 1; $i <= $aantal_bijlages; $i++) { ?>
    <option value="bijlage<?=$i;?>"><?=$i;?>x bijlage</option>
<? } ?>
</select>
Eddy E
08-11-2012 20:53
1: verwijder die tabel
2: verwijder de overbodige dingen
3: gebruik nieuwe elementen als <input type="number"> en correct html-elementen als <label>
4: gebruik PHP om dit te tonen (zoals Roy ook zegt).

Nu nog 3 regels Javascript erbij die automatisch een bepaalde tag kopieert als die erboven niet meer leg is:
(tag <fieldset> of zo?)

En dan krijg je ongeveer dit:

<?php

	// define default
	$aantal = 1;
	if(isset($_POST['wat']) AND is_int($_POST['wat']))
	{
		$aantal = intval($_POST['wat']);
	}
?>
<!doctype html>
<html>
	<head>
		<title>Testpagina, met refresh</title>
	</head>

	<body>
		<form action="" method="POST">
			<label for="wat">Hoeveel bijlages toevoegen</label>
			<input type="number" name="wat" min="1" max="9" value="<?php echo $aantal; ?>">
			<input type="submit" name="wijzig_aantal" value="&raquo;">

			<?php
				// make the input-fields
				for($i = 1; $i <= $aantal; $i++)
				{
					echo '<fieldset>
								<label for="attachment_' . $i . '[]">Bijlage #' . $i . ':</label>
								<input name="attachment' . $i . '[]" type="file" size="30">
							</fieldset>';
				}
			?>
			<input type="submit" name="start_upload">
		</form>
	</body>
</html>


Let wel dat dit dus een goede pagina is, inclusief alles wat je nodig hebt.
Enige wat nog mist is een link naar je CSS.

J
Johan Goezinnen
09-11-2012 09:47
Eddy Erkelens op 08/11/2012 20:53:45

1: verwijder die tabel
2: verwijder de overbodige dingen
3: gebruik nieuwe elementen als <input type="number"> en correct html-elementen als <label>
4: gebruik PHP om dit te tonen (zoals Roy ook zegt).

Nu nog 3 regels Javascript erbij die automatisch een bepaalde tag kopieert als die erboven niet meer leg is:
(tag <fieldset> of zo?)

En dan krijg je ongeveer dit:

<?php

	// define default
	$aantal = 1;
	if(isset($_POST['wat']) AND is_int($_POST['wat']))
	{
		$aantal = intval($_POST['wat']);
	}
?>
<!doctype html>
<html>
	<head>
		<title>Testpagina, met refresh</title>
	</head>

	<body>
		<form action="" method="POST">
			<label for="wat">Hoeveel bijlages toevoegen</label>
			<input type="number" name="wat" min="1" max="9" value="<?php echo $aantal; ?>">
			<input type="submit" name="wijzig_aantal" value="&raquo;">

			<?php
				// make the input-fields
				for($i = 1; $i <= $aantal; $i++)
				{
					echo '<fieldset>
								<label for="attachment_' . $i . '[]">Bijlage #' . $i . ':</label>
								<input name="attachment' . $i . '[]" type="file" size="30">
							</fieldset>';
				}
			?>
			<input type="submit" name="start_upload">
		</form>
	</body>
</html>


Let wel dat dit dus een goede pagina is, inclusief alles wat je nodig hebt.
Enige wat nog mist is een link naar je CSS.




Bedankt voor het meedenken, misschien was ik niet duidelijk genoeg geweest?
Het aantal bijlages mag niet wijzigen op basis van "Post". Het probleem is dat de reeds ingevulde waarde verdwijnen, vandaar dat ik het in JS wil. Misschien een nieuwe uitdaging?

Johan
Kris Peeters
09-11-2012 11:29
Je wil met javascript het aantal <input type="file"> kunnen aanpassen. Ja?

Ik denk, wat traditioneel is, is om 1 zo'n element te hebben. Daaronder een knop/link "nog een bijlage toevoegen".
Een klik daarop voegt een nieuwe <input type="file"> toe, van onder. De gebruiker kan er zoveel bijmaken als gewenst.

Interesseert dit je?
Eddy E
09-11-2012 19:55 gewijzigd op 09-11-2012 20:23
Dat heb ik ook inderdaad.
Maar dat is iets heel anders inderdaad.

Je zou ook altijd een lege kunnen toevoegen: dus zodra er eentje in gebruik wordt genomen, maak je er eentje extra aan.
Uiteraard start je standaard met 3 (of 5) input-velden.

Ergens een knopje maken:

		// voeg rij toe EN voeg daarna (voor alle inputs) nogmaals de datepicker toe
		$(".add_datum").live("click", function() {
				$("#tabel").append("<input  type=\"text\" name=\"datum[]\" value=\"\" class=\"datepicker\"><input type=\"button\" class=\"add_datum\" value=\"+\">");
				add_datepickers();
		});


Is jQuery, maar wellicht gebruik je dat al. Zo niet, is dit aardig goed te herschrijven naar plain-js.
J
Johan Goezinnen
09-11-2012 20:28
Ik heb mijn formulier op http://goezinnen.eu/nuontest04.php staan, bovenstaand script is een deel hiervan.
Waar het mij om gaat is dat ik mijn formulier zo eenvoudig en zo kort mogelijk opbouw, wat resulteert in een overzichtelijk geheel. Ik ben niet zo thuis met JS, vandaar jullie hulp.
Ik sta open voor elke suggestie, alvast enorm bedankt
Eddy E
09-11-2012 21:19 gewijzigd op 10-11-2012 08:52
Als je wilt limiteren tot 9 bijlagen, waarom dan niet gewoon (heel statisch) 9 input-velden weergeven? Mensen gaan ze echt niet allemaal aanvullen tot ze allemaal vol zijn hoor.

Zet eens dit neer (op de plek waar je inputvelden net geweest zijn):


<div id="bijlagen">
	<input name="attachment[]" type="file" size="30">
	<input name="attachment[]" type="file" size="30">
	<input name="attachment[]" type="file" size="30">
</div>
<input type="button" id="extra_bijlage">

<script>     
        $("#extra_bijlage").live("click", function() {
                $("#bijlagen").append("<input name="attachment[]" type="file" size="30">");
        });
</script>

Let wel: jQuery nodig.

Ik zie nu dat je vaak tabellen in tabellen zet: dat is niet de manier. Probeer dat te voorkomen.
J
Johan Goezinnen
10-11-2012 08:19
Kris Peeters op 09/11/2012 11:29:37

Je wil met javascript het aantal <input type="file"> kunnen aanpassen. Ja?

Ik denk, wat traditioneel is, is om 1 zo'n element te hebben. Daaronder een knop/link "nog een bijlage toevoegen".
Een klik daarop voegt een nieuwe <input type="file"> toe, van onder. De gebruiker kan er zoveel bijmaken als gewenst.

Interesseert dit je?



JA, dat is wat ik bedoel, kan je voor mij een opzetje maken, alvast bedankt.
Eddy E
10-11-2012 08:51
Kijk even naar mijn vorige post.... Dat doet exact wat je wilt. Alleen even inbouwen.
Omdat je geen duidelijke structuur hebt in je formulier kon ik het niet 1-2-3 voor je erin zetten.
J
Johan Goezinnen
10-11-2012 09:43
Eddy, ik krijg een symtaxisfoutmelding in regel 10

Reageren

Inloggen om te reageren