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

Verfraaien van script

Door Johan Goezinnen op 08-11-2012 18:28
2.679 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
B
Bo Ter Ham
10-11-2012 09:58
Johan Goezinnen op 10/11/2012 09:43:48

Eddy, ik krijg een symtaxisfoutmelding in regel 10


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


je moet ff dubbele quotes veranderen in enkele quotes:


<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>
J
Johan Goezinnen
10-11-2012 10:09
Thanks, foutmelding is weg, maar ik krijg geen nieuwe file indien ik op de button klik
B
Bo Ter Ham
10-11-2012 10:11
Heb je jQuery ingeladen?
J
Johan Goezinnen
10-11-2012 11:15
Oeps, vergeten.

Het werkt en ik benr er zeer blij mee. Nu kan ik het formulier aanpassen.
Ik wil een ieder enorm bedanken.
Eddy E
10-11-2012 11:37
Graag gedaan.
Excuses voor de enkele haakjes. Ik echo deze PHP-code, dus had de " geëscaped met \.
Mooi dat het nu wel werkt.

Nog wel 1 tip: je formulier is wel heel ingewikkeld. Dat kan logischer/eenvoudiger. Wie gaat dit invullen? Als het mensen zijn, kan het wel wat eenvoudiger hoor. Kost je wel meer ruimte.
J
Johan Goezinnen
10-11-2012 13:50
Eddy, zoals je wel hebt gemerkt ben ik een beginneling op het gebied van programmeren. Ik ben heel blij met de tips welke door jullie gegeven worden en sta altijd open voor commentaar.
Je geeft aan dat het logischer/eenvoudiger kan, kan je aangeven hoe en wat?

Alvast bedankt,
Eddy E
10-11-2012 13:56
Tabel eruit gooien en dan maar alles onder elkaar.
Maak stukken (met <section>) en geef die een redelijke omschrijving. Liefst nog een <h2> of <h3> bovenaan.

En dan steeds links het label (met <label for=""> dus) en rechts de input (<input type="....">) steeds.
Wel zo overzichtelijk. En voor het snel invullen hoef je het niet te doen, want daarvoor is dit te veel informatie.

[size=xsmall]Toevoeging op 10/11/2012 14:23:25:[/size]

Dus zoiets:

<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Language" content="en-us">
		<charset="iso-8859-1">
			<title>Nuonrichtlijninformatie formulier</title>
			<link rel="stylesheet" href="nuontest04.css">
			<script src="nuontest04.js"></script>
	</head>
	<body>
		<h1>Richtlijn informatievoorziening Nuon Warmte</h1>

		<form method="post" action="nuontest04.php" enctype="multipart/form-data" name="phmailer" onsubmit="return Checkit(this);">

			<section class="aanvrager">
				<h2>Gegevens Aanvrager</h2>

				<!-- emailadres -->
				<label for="yourEmail">E-mailadres:</label>
				<input type="text" name="yourEmail">

				<!-- adres -->
				<label for="perceel_adres">Straatnaam:</label>
				<input type="text" name="perceel_adres">

				<!-- huisnummer -->
				<label for="perceel_huisnummer">Huisnummer:</label>
				<input type="text" name="perceel_huisnummer" maxlength="5">

				<!-- bedrijfsnaam -->
				<label for="bedrijfsnaam">Bedrijfsnaam:</label>
				<input type="text" name="bedrijfsnaam" maxlength="100">

				<!-- hier de rest van je aanvrager-gegevens
				en hier
				en hier
				en hier
				-->
			</section>

			<section class="opdracht">
				<h2>Opdracht</h2>

				<!-- projectomschrijving -->
				<label for="projectomschrijving">Projectomschrijving:</label>
				<input type="text" name="projectomschrijving" maxlength="50">

				<!-- projectnummer -->
				<label for="projectnummer">Projectnummer:</label>
				<input type="text" name="projectnummer" maxlength="50">

				<!-- meer hier
				en hier
				en hier
				en hier
				-->
			</section>

			<section class="berekening">
				<h2>Warmte- en Leidingverliesberekening</h2>

				<!-- transmissieverlies -->
				<label for="transmissieverlies">Transmissieverlies Phi T [Watt]:</label>
				<input type="text" name="transmissieverlies" maxlength="50">

				<!-- meer hier
				en hier
				en hier
				en hier
				-->
			</section>

			<section class="attachments">
				<h2>Eventuele bijlagen</h2>
				<label for="attachment">Uw bijlagen
					<br>
					<b>Toegestane file types:</b> zip, rar, txt, doc, jpg, png, gif, odt, xml, pdf, xls, dwg, docx, xlsx
					<br>
					<b>Max grote per file:</b> 8192kb.
					<br>
					<b>Max totale grote van de bijlages:</b> 8192kb.</label>
				<fieldset id="attachment_placing">
					<input name="attachment[]" type="file">
					<input name="attachment[]" type="file">
					<input name="attachment[]" type="file">
				</fieldset>

				<input type="button" id="add_attachments" value="Voeg meer bijlagen toe...">
			</section>

			<section class="submitting">
				<h2>Verzenden van formulier</h2>
				<input type="hidden" name="submit" value="true">
				<input type="submit" value="Verzenden">
			</section>
		</form>
	</body>
</html>


Let wel dat ik niet alle velden erin heb gezet.
Uiteraard de Javascript in een los bestand (kijk even naar de <head>).
En de opmaak (de CSS) ook.

De <span>*</span> zet je steeds na elke <input>.
Prima, maar aangezien je die toch met Javascript gaat bewerken, zet die dan ook neer via Javascript.
Gewoon iedere <input> een <span class="errormessage">*</span> aan appenden.
Zie de jQuery-code die ik je gaf.

Reageren

Inloggen om te reageren