Lenny'tje
13 January 2012, 02:10
Hoy,
Ik heb een formulier gebouwd met ong 30 input velden met verschillende types.
Nu wil ik een script die elke input appart aanspreekt en controlleerd...
Ik heb een jQuery script gemaakt die dit doet maar die past alleen alles toe op het eerste input veld, hoe krijg ik dit werkend dat dit alles appart aanspreekt?
hier is de jQuery code: (was maar een probeersel)
function isBlur(){
var i = $('input');
var v = i.val().length;
var p = i.attr('placeholder');
var n = i.attr('name');
var s = $('span#'+n);
var e = $('span#'+n+'Error');
var g = $('span#'+n+'Good');
if(v<=0 || v == p){
g.css({'visibility':'hidden'});
s.css('color', 'red');
e.css('visibility', 'visible');
}
};
function validateText(){
var i = $('input');
var v = i.val().length;
var p = i.attr('placeholder');
var n = i.attr('name');
var s = $('span#'+n);
var e = $('span#'+n+'Error');
var g = $('span#'+n+'Good');
if (i.attr('type') == 'text') {
if(v >=1 || v != p){
e.css('visibility', 'hidden');
s.css('color', 'green');
g.css({'visibility':'visible','margin-left':'-15px'});
}
}
};
en hier is men html code:
<!DOCTYPE HTML>
<html lang="nl_NL">
<head>
<title>Offerte Aanvraag</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="Stylesheet" type="text/css" href="css/stylesheet.css">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon_webcreations.ico">
<script src="js/engine.js" charset="UTF-8"></script>
<script src="js/jQueryFunctions.js" charset="UTF-8"></script>
<script src="js/jQueryPlaceholder.js" charset="UTF-8"></script>
<script src="js/jQueryColorPicker.js" charset="UTF-8"></script>
<script src="js/jQueryColorPickerMin.js" charset="UTF-8"></script>
<!--[if lt IE 9]>
<link rel="Stylesheet" type="text/css" href="css/iesheet.css">
<script type="text/JavaScript" src="js/JavaScriptResetV3.js" charset="UTF-8"></script>
<script type="text/JavaScript" src="js/JavaScriptResetV3Print.js" charset="UTF-8"></script>
<![endif]-->
<script src="js/JavaScriptFunctions.js" charset="UTF-8"></script>
</head>
<body>
<header id="mainHeader">
<section id="logo">
</section>
<section id="headerText">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.planet-earth.nl%2Fwebcreations%2Fservice%2Fofferte.php&se nd=false&layout=button_count&width=50&show_faces=f alse&action=like&colorscheme=dark&font=segoe+ui&he ight=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
<p>Offerte aanvraag</p>
</section>
</header>
<div class="clearBoth">
</div>
<section id="mainContent">
<section id="contentHeader">
<p>Klik op de balken om de vragen in te vullen</p>
</section>
<section id="questions">
<form action="" method="POST" enctype="multipart/form-data" accept-charset="UTF8">
<div class="pew_question">
<span class="redStar">*</span>Uw contact gegevens?
</div>
<div class="pew_answer">
<div>
<ul>
<li>
<span id="companyName">
<p>
Bedrijfsnaam:
<span id="companyNameError" style="visibility:hidden;overflow:hidden;position:relativ e;">
<img src="images/error.png" title="dit veld is fout of niet ingevuld!">
</span>
<span id="companyNameGood" style="visibility:hidden;overflow:hidden;position:relativ e;">
<img src="images/check.png" title="dit veld is fout of niet ingevuld!">
</span>
</p>
</span>
<p>
<input type="text" title="Klik om uw bedrijfsnaam in te vullen" placeholder="Bedrijfsnaam..." name="companyName" onchange="validateText()" onBlur="isBlur()" tabindex="1" id="input_1">
</p>
</li>
<li>
<p>
Aanhef:
</p>
<p>
<input type="radio" title="Klik om uw aanhef in te stellen als de heer." name="salutation" value="dhr" tabindex="2"> Dhr.
<input type="radio" title="Klik om uw aanhef in te stellen als mevrouw." name="salutation" value="mvr" tabindex="3"> Mevr.
</p>
</li>
<li>
<p>
Telefoonnummer:
</p>
<p>
<input type="tel" title="Klik hier om uw telefoonnummer in te vullen." placeholder="Telefoonnummer..." name="telephone" onChange="validateTel()" tabindex="4">
</p>
</li>
<li>
<span id="name">
<p>
Naam:
<span id="nameError" style="visibility:hidden;overflow:hidden;position:relativ e;">
<img src="images/error.png" title="dit veld is fout of niet ingevuld!">
</span>
<span id="nameGood" style="visibility:hidden;overflow:hidden;position:relativ e;">
<img src="images/check.png" title="dit veld is fout of niet ingevuld!">
</span>
</p>
</span>
<p>
<input type="text" title="Klik hier om uw naam in te vullen." placeholder="Naam..." name="name" onchange="validateText()" onBlur="isBlur()" tabindex="5" id="input_2">
</p>
</li>
<li>
<p>
Achternaam:
</p>
<p>
<input type="text" title="Klik hier om uw achternaam in te vullen." placeholder="Achternaam..." name="lastName" tabindex="6">
<p>
</li>
<li>
<p>
E-mail:
</p>
<p>
<input type="email" title="Klik hier om uw e-mail adres in te vullen." placeholder="E-mail..." name="email" tabindex="7">
</p>
</li>
<li>
<p>
Adres:
</p>
<p>
<input type="text" title="Klik hier om uw adres in te vullen." placeholder="Adres..." name="address" tabindex="8">
</p>
</li>
<li>
<p>
Postcode:
</p>
<p>
<input type="text" title="Klik hier om uw postcode in te vullen." placeholder="Postcode..." name="postal" tabindex="9">
</p>
</li>
<li>
<p>
Woonplaats:
</p>
<p>
<input type="text" title="Klink hier om uw woonplaats in te vullen." placeholder="Woonplaats..." name="place" tabindex="10">
</p>
</li>
<li>
<p>
Website:
</p>
<p>
<input type="url" title="Klik hier om de url van uw website in te vullen" placeholder="Webadres..." name="url" tabindex="11">
</p>
</li>
</ul>
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStar">*</span>In wat voor branche is het bedrijf actief?
</div>
<div class="pew_answer">
<div>
<p>Omschrijf in het kort:</p>
<br>
<textarea class="textarea" name="compDesc" placeholder="Typ hier je text..."></textarea>
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStarH">*</span>Heeft uw bedrijf een slogan?
</div>
<div class="pew_answer">
<div>
<p>Vul uw bedrijf slogan in:</p>
<br>
<input type="text" class="textField" name="compSlogan" placeholder="Typ hier je text">
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStarH">*</span>Heeft uw bedrijf een logo?
</div>
<div class="pew_answer">
<div>
<p>Upload hier uw bedrijfs-logo:</p>
<br>
<input type="file" name="compLogo" class="uploader">
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStar">*</span>Hoeveel webpagina's heeft u nodig?
</div>
<div class="pew_answer">
<div>
<div class="links">
<p>
Geef hieronder de gewenste pagina namen op, maak per pagina een nieuw tekstveld aan door op de + knop te klikken.
</p>
<br>
<span class="add">
<img src="images/add.png" width="18" height="18" title="Een veld toevoegen.">
</span>
<span class="remove">
<img src="images/remove.png" width="18" height="18" title="Een veld verwijderen.">
</span>
<span class="reset">
<img src="images/reset.png" width="18" height="18" title="Alles herstellen">
</span>
</div>
<div id="inputs">
<div class="genInput">
<input type="text" placeholder="Pagina naam..." name="compPage" id="input" class="textField">
</div>
</div>
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStar">*</span>Is er al een domeinnaam geregistreerd?
</div>
<div class="pew_answer">
<div>
<div class="radio">
<p><input type="radio" name="domain" class="domYes">
Ja, er is al een domeinnaam.</p>
<p><input type="radio" name="domain" class="domNo">
Nee, er is nog geen domeinnaam geregistreerd.</p>
</div>
<div id="inputs2">
<div class="dom" id="yes">
<div class="dom_content" id="contentYes">
<div class="dom_content_holder">
<p>Genaamd:</p>
<br>
<input type="text" name="domYes" placeholder="Vul je domeinnaam in..." class="textField">
</div>
</div>
</div>
<div class="dom" id="no">
<div class="dom_content" id="contentNo">
<div class="dom_content_holder">
<p><input type="checkbox" name="domNo">
Wilt u uw domeinnaam bij Planet-Earth Webcreations laten registreren?
<br>
Gelieve dan het selectie vakje aan te vinken.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStar">*</span>Is er al een hosting ruimte of een server?
</div>
<div class="pew_answer">
<div>
<div class="radio">
<p><input type="radio" name="hosting" class="radio" id="hostingYes">
Er is al een hosting ruimte.</p>
<p><input type="radio" name="hosting" class="radio" id="serverYes">
Wij hebben onze eigen server(s).</p>
<p><input type="radio" name="hosting" class="radio" id="hostingNo">
Er is geen hosting ruimte of eigen server.</p>
</div>
<div id="inputs3">
<div class="dom" id="noHosting">
<div class="dom_content" id="noHost">
<div class="dom_content_holder">
<p><input type="checkbox" name="hostNo">
Wilt u uw hosting pakket bij Planet-Earth Webcreations afsluiten?
<br>
Gelieve dan het selectie vakje aan te vinken.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStar">*</span>Hoe moet je website er uit zien?
</div>
<div class="pew_answer">
<div>
<div class="links">
<p>
Vul in het onderste tekstvak de weblink in van een website die u het meest aanspreekt.
<br>
U kan meerdere weblinks invullen door op de
<img src="images/add.png" width="18" height="18" title="Veld toevoegen.">
te klikken.
</p>
<br>
<span class="addWeblink">
<img src="images/add.png" width="18" height="18" title="Veld toevoegen.">
</span>
<span class="removeWeblink">
<img src="images/remove.png" width="18" height="18" title="Veld verwijderen.">
</span>
<span class="resetWeblink">
<img src="images/reset.png" width="18" height="18" title="Alles herstellen">
</span>
</div>
<div class="weblinks">
<div class="weblink">
<input type="text" placeholder="Weblink..." name="weblink" id="weblink" class="textField">
</div>
</div>
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStar">*</span>Welke kleuren moeten er gebruikt worden voor de website?
</div>
<div class="pew_answer">
<div>
<p>Vul in het kort uw huis styl in of de kleuren die op uw website moeten.</p>
<br>
<br>
<p>Kies uw hoofdkleur:</p>
<p class="color_1">
<input type="text" value="#3A3A3A" hex="true" id="color_1" class="mColorPicker" style="background-color: rgb(58, 58, 58); color: black; ">
<span id="mcp_color_1" class="mColorPickerTrigger" style="display: inline-block; cursor: pointer; ">
<img src="images/color.png" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 3px; vertical-align: text-bottom; ">
</span>
</p>
<br>
<p>Kies uw 2de kleur:</p>
<p class="example_2">
<input type="text" value="#3A3A3A" hex="true" id="color_2" class="mColorPicker" style="background-color: rgb(58, 58, 58); color: black; ">
<span id="mcp_color_2" class="mColorPickerTrigger" style="display: inline-block; cursor: pointer; ">
<img src="images/color.png" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 3px; vertical-align: text-bottom; ">
</span>
</p>
<br>
<p>Kies uw tekst kleur:</p>
<p class="example_3">
<input type="text" value="#3A3A3A" hex="true" id="color_3" class="mColorPicker" style="background-color: rgb(58, 58, 58); color: black; ">
<span id="mcp_color_3" class="mColorPickerTrigger" style="display: inline-block; cursor: pointer; ">
<img src="images/color.png" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 3px; vertical-align: text-bottom; ">
</span>
</p>
<br>
<p>Kies uw link kleur:</p>
<p class="example_4">
<input type="text" value="#3A3A3A" hex="true" id="color_4" class="mColorPicker" style="background-color: rgb(58, 58, 58); color: black; ">
<span id="mcp_color_4" class="mColorPickerTrigger" style="display: inline-block; cursor: pointer; ">
<img src="images/color.png" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 3px; vertical-align: text-bottom; ">
</span>
</p>
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStar">*</span>Wil u een favicon als kenteken van uw website?
</div>
<div class="pew_answer">
<div>
<p>
Een favicon is het icoon dat in het tabblad komt te staan wanneer u uw website bezoekt.
<br>
De voordelen van een favicon zijn dat deze altijd zichtbaar is in de tabbladen van een browser
en de gebruiker ziet deze keer op keer, ook in de favorieten word deze mee in opgeslagen.
Het favicon word dus het grote kenmerk van uw website!
<br>
<br>
Een favicon ziet er als volgd uit.
</p>
<br>
<img title="Planet-Earth Webcreations favicon" src="images/favicon_webcreations.ico">
<br>
<br>
<p>
En zo word deze in de tabbladen van de browser zichtbaar.
</p>
<br>
<p>
Het favicon in Google Chrome:
</p>
<img title="favicon in Google Chrome" src="images/favex1.jpg">
<br>
<br>
<p>
Het favicon in FireFox:
</p>
<img title="favicon in FireFox" src="images/favex2.jpg">
<br>
<br>
<p>
Het favicon in Internet Explorer:
</p>
<img title="favicon in FireFox" src="images/favex3.jpg">
<br>
<br>
<p>
Wil u een favicon voor uw website?
<br>
Vink dan de checkbox aan.
<input type="checkbox" name="favicon" value="favicon">
</p>
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStar">*</span>Wil u uw website optimaliseren voor zoekmashines?
</div>
<div class="pew_answer">
<div>
<p>
SEO of Search Engine Optimisation is je website optimaliseren om deze zo hoog
mogelijk in zoekmachienes te laten verschijnen bij een zoekopdracht.
Hoe hoger uw website in bijvoorbeeld Google staat, hoe meer gebruikers op uw
website terecht komen.
<br>
<br>
Het is steeds aan te raden om je website te optimaliseren voor zoekmashienes.
<br>
Zo word uw website altijd zichtbaar in zoekresultaten van zoekmachienes.
</p>
<br>
<br>
<p>
<input type="checkbox" name="seo" value="seo">
Website optimaliseren voor zoekmashines.
</p>
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStar">*</span>Zijn er nog opmerkingen?
</div>
<div class="pew_answer">
<div>
<p>
Hebt u nog opmerkingen of vragen voor uw website?
<br>
<br>
</p>
<p>
<textarea name="cmts" placeholder="Opmerkingen..."></textarea>
</p>
</div>
</div>
<div class="clearBoth">
</div>
<section class="formActionButtons">
<section class="ActionButtons">
<p>
Offerte opsturen
<input type="button" title="Klik hier om het offerte formulier op te sturen." name="sendOffer" value="Offerte opsturen">
</p>
</section>
</section>
<div class="clearBoth">
</div>
</form>
<script>
$('input[placeholder], textarea[placeholder]').placeholder();
</script>
</section>
</section>
<div class="clearBoth">
</div>
<footer id="mainFooter">
<section id="copyrightText">
<p>Designed & Created by
<a href="http://www.planet-earth.nl/webcreations/" title="Ga naar Planet-Earth Webcreations">Planet-Earth Webcreations</a> |
Planet-Earth Webcreations © 2011 - 2012 All Rights Reserved
<br>
<br>
<a href="#" title="Lees het privacystatement van Planet-Earth Webcreations.">Privacy</a> |
<a href="#" title="Vind je weg terug in onze sitemap.">Sitemap</a> |
<a href="#" title="Neem contact op met Planet-Earth Webcreations.">Contact</a>
</p>
</section>
</footer>
</body>
</html>
Ik hoop dat je er iets mee kan...
Eerst even wat uitleg.
Ik wil dat de velden realtime gecontrolleerd worden.
Dus dat als iemand in het veld klikt en er weer uit gaat het script kijkt of er iets is in gevuld, zo niet word de tekst rood en komt er een kruisje als pictogram en anders word die groen met een check pictogram.
Zo word elke input aangesproken en gecontrolleerd.
Ik wou uit gemak dat ik niet voor elk veldje een script moet gaan maken dat gebaseerd is op een specifiek input met een ID, ik wil gewoon dat die de inputs een index geeft en dat die die dan ook appart behandeld.
Nu slaagt alles op alles en alleen de tekst van het eerste input veld word rood of groen...
input[0] en input.get(0) had ik ook al probeersels op gemaakt maar dat werkt ook niet...
Hoe doe ik dit dan?
Ik heb een formulier gebouwd met ong 30 input velden met verschillende types.
Nu wil ik een script die elke input appart aanspreekt en controlleerd...
Ik heb een jQuery script gemaakt die dit doet maar die past alleen alles toe op het eerste input veld, hoe krijg ik dit werkend dat dit alles appart aanspreekt?
hier is de jQuery code: (was maar een probeersel)
function isBlur(){
var i = $('input');
var v = i.val().length;
var p = i.attr('placeholder');
var n = i.attr('name');
var s = $('span#'+n);
var e = $('span#'+n+'Error');
var g = $('span#'+n+'Good');
if(v<=0 || v == p){
g.css({'visibility':'hidden'});
s.css('color', 'red');
e.css('visibility', 'visible');
}
};
function validateText(){
var i = $('input');
var v = i.val().length;
var p = i.attr('placeholder');
var n = i.attr('name');
var s = $('span#'+n);
var e = $('span#'+n+'Error');
var g = $('span#'+n+'Good');
if (i.attr('type') == 'text') {
if(v >=1 || v != p){
e.css('visibility', 'hidden');
s.css('color', 'green');
g.css({'visibility':'visible','margin-left':'-15px'});
}
}
};
en hier is men html code:
<!DOCTYPE HTML>
<html lang="nl_NL">
<head>
<title>Offerte Aanvraag</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="Stylesheet" type="text/css" href="css/stylesheet.css">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon_webcreations.ico">
<script src="js/engine.js" charset="UTF-8"></script>
<script src="js/jQueryFunctions.js" charset="UTF-8"></script>
<script src="js/jQueryPlaceholder.js" charset="UTF-8"></script>
<script src="js/jQueryColorPicker.js" charset="UTF-8"></script>
<script src="js/jQueryColorPickerMin.js" charset="UTF-8"></script>
<!--[if lt IE 9]>
<link rel="Stylesheet" type="text/css" href="css/iesheet.css">
<script type="text/JavaScript" src="js/JavaScriptResetV3.js" charset="UTF-8"></script>
<script type="text/JavaScript" src="js/JavaScriptResetV3Print.js" charset="UTF-8"></script>
<![endif]-->
<script src="js/JavaScriptFunctions.js" charset="UTF-8"></script>
</head>
<body>
<header id="mainHeader">
<section id="logo">
</section>
<section id="headerText">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.planet-earth.nl%2Fwebcreations%2Fservice%2Fofferte.php&se nd=false&layout=button_count&width=50&show_faces=f alse&action=like&colorscheme=dark&font=segoe+ui&he ight=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>
<p>Offerte aanvraag</p>
</section>
</header>
<div class="clearBoth">
</div>
<section id="mainContent">
<section id="contentHeader">
<p>Klik op de balken om de vragen in te vullen</p>
</section>
<section id="questions">
<form action="" method="POST" enctype="multipart/form-data" accept-charset="UTF8">
<div class="pew_question">
<span class="redStar">*</span>Uw contact gegevens?
</div>
<div class="pew_answer">
<div>
<ul>
<li>
<span id="companyName">
<p>
Bedrijfsnaam:
<span id="companyNameError" style="visibility:hidden;overflow:hidden;position:relativ e;">
<img src="images/error.png" title="dit veld is fout of niet ingevuld!">
</span>
<span id="companyNameGood" style="visibility:hidden;overflow:hidden;position:relativ e;">
<img src="images/check.png" title="dit veld is fout of niet ingevuld!">
</span>
</p>
</span>
<p>
<input type="text" title="Klik om uw bedrijfsnaam in te vullen" placeholder="Bedrijfsnaam..." name="companyName" onchange="validateText()" onBlur="isBlur()" tabindex="1" id="input_1">
</p>
</li>
<li>
<p>
Aanhef:
</p>
<p>
<input type="radio" title="Klik om uw aanhef in te stellen als de heer." name="salutation" value="dhr" tabindex="2"> Dhr.
<input type="radio" title="Klik om uw aanhef in te stellen als mevrouw." name="salutation" value="mvr" tabindex="3"> Mevr.
</p>
</li>
<li>
<p>
Telefoonnummer:
</p>
<p>
<input type="tel" title="Klik hier om uw telefoonnummer in te vullen." placeholder="Telefoonnummer..." name="telephone" onChange="validateTel()" tabindex="4">
</p>
</li>
<li>
<span id="name">
<p>
Naam:
<span id="nameError" style="visibility:hidden;overflow:hidden;position:relativ e;">
<img src="images/error.png" title="dit veld is fout of niet ingevuld!">
</span>
<span id="nameGood" style="visibility:hidden;overflow:hidden;position:relativ e;">
<img src="images/check.png" title="dit veld is fout of niet ingevuld!">
</span>
</p>
</span>
<p>
<input type="text" title="Klik hier om uw naam in te vullen." placeholder="Naam..." name="name" onchange="validateText()" onBlur="isBlur()" tabindex="5" id="input_2">
</p>
</li>
<li>
<p>
Achternaam:
</p>
<p>
<input type="text" title="Klik hier om uw achternaam in te vullen." placeholder="Achternaam..." name="lastName" tabindex="6">
<p>
</li>
<li>
<p>
E-mail:
</p>
<p>
<input type="email" title="Klik hier om uw e-mail adres in te vullen." placeholder="E-mail..." name="email" tabindex="7">
</p>
</li>
<li>
<p>
Adres:
</p>
<p>
<input type="text" title="Klik hier om uw adres in te vullen." placeholder="Adres..." name="address" tabindex="8">
</p>
</li>
<li>
<p>
Postcode:
</p>
<p>
<input type="text" title="Klik hier om uw postcode in te vullen." placeholder="Postcode..." name="postal" tabindex="9">
</p>
</li>
<li>
<p>
Woonplaats:
</p>
<p>
<input type="text" title="Klink hier om uw woonplaats in te vullen." placeholder="Woonplaats..." name="place" tabindex="10">
</p>
</li>
<li>
<p>
Website:
</p>
<p>
<input type="url" title="Klik hier om de url van uw website in te vullen" placeholder="Webadres..." name="url" tabindex="11">
</p>
</li>
</ul>
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStar">*</span>In wat voor branche is het bedrijf actief?
</div>
<div class="pew_answer">
<div>
<p>Omschrijf in het kort:</p>
<br>
<textarea class="textarea" name="compDesc" placeholder="Typ hier je text..."></textarea>
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStarH">*</span>Heeft uw bedrijf een slogan?
</div>
<div class="pew_answer">
<div>
<p>Vul uw bedrijf slogan in:</p>
<br>
<input type="text" class="textField" name="compSlogan" placeholder="Typ hier je text">
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStarH">*</span>Heeft uw bedrijf een logo?
</div>
<div class="pew_answer">
<div>
<p>Upload hier uw bedrijfs-logo:</p>
<br>
<input type="file" name="compLogo" class="uploader">
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStar">*</span>Hoeveel webpagina's heeft u nodig?
</div>
<div class="pew_answer">
<div>
<div class="links">
<p>
Geef hieronder de gewenste pagina namen op, maak per pagina een nieuw tekstveld aan door op de + knop te klikken.
</p>
<br>
<span class="add">
<img src="images/add.png" width="18" height="18" title="Een veld toevoegen.">
</span>
<span class="remove">
<img src="images/remove.png" width="18" height="18" title="Een veld verwijderen.">
</span>
<span class="reset">
<img src="images/reset.png" width="18" height="18" title="Alles herstellen">
</span>
</div>
<div id="inputs">
<div class="genInput">
<input type="text" placeholder="Pagina naam..." name="compPage" id="input" class="textField">
</div>
</div>
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStar">*</span>Is er al een domeinnaam geregistreerd?
</div>
<div class="pew_answer">
<div>
<div class="radio">
<p><input type="radio" name="domain" class="domYes">
Ja, er is al een domeinnaam.</p>
<p><input type="radio" name="domain" class="domNo">
Nee, er is nog geen domeinnaam geregistreerd.</p>
</div>
<div id="inputs2">
<div class="dom" id="yes">
<div class="dom_content" id="contentYes">
<div class="dom_content_holder">
<p>Genaamd:</p>
<br>
<input type="text" name="domYes" placeholder="Vul je domeinnaam in..." class="textField">
</div>
</div>
</div>
<div class="dom" id="no">
<div class="dom_content" id="contentNo">
<div class="dom_content_holder">
<p><input type="checkbox" name="domNo">
Wilt u uw domeinnaam bij Planet-Earth Webcreations laten registreren?
<br>
Gelieve dan het selectie vakje aan te vinken.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStar">*</span>Is er al een hosting ruimte of een server?
</div>
<div class="pew_answer">
<div>
<div class="radio">
<p><input type="radio" name="hosting" class="radio" id="hostingYes">
Er is al een hosting ruimte.</p>
<p><input type="radio" name="hosting" class="radio" id="serverYes">
Wij hebben onze eigen server(s).</p>
<p><input type="radio" name="hosting" class="radio" id="hostingNo">
Er is geen hosting ruimte of eigen server.</p>
</div>
<div id="inputs3">
<div class="dom" id="noHosting">
<div class="dom_content" id="noHost">
<div class="dom_content_holder">
<p><input type="checkbox" name="hostNo">
Wilt u uw hosting pakket bij Planet-Earth Webcreations afsluiten?
<br>
Gelieve dan het selectie vakje aan te vinken.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStar">*</span>Hoe moet je website er uit zien?
</div>
<div class="pew_answer">
<div>
<div class="links">
<p>
Vul in het onderste tekstvak de weblink in van een website die u het meest aanspreekt.
<br>
U kan meerdere weblinks invullen door op de
<img src="images/add.png" width="18" height="18" title="Veld toevoegen.">
te klikken.
</p>
<br>
<span class="addWeblink">
<img src="images/add.png" width="18" height="18" title="Veld toevoegen.">
</span>
<span class="removeWeblink">
<img src="images/remove.png" width="18" height="18" title="Veld verwijderen.">
</span>
<span class="resetWeblink">
<img src="images/reset.png" width="18" height="18" title="Alles herstellen">
</span>
</div>
<div class="weblinks">
<div class="weblink">
<input type="text" placeholder="Weblink..." name="weblink" id="weblink" class="textField">
</div>
</div>
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStar">*</span>Welke kleuren moeten er gebruikt worden voor de website?
</div>
<div class="pew_answer">
<div>
<p>Vul in het kort uw huis styl in of de kleuren die op uw website moeten.</p>
<br>
<br>
<p>Kies uw hoofdkleur:</p>
<p class="color_1">
<input type="text" value="#3A3A3A" hex="true" id="color_1" class="mColorPicker" style="background-color: rgb(58, 58, 58); color: black; ">
<span id="mcp_color_1" class="mColorPickerTrigger" style="display: inline-block; cursor: pointer; ">
<img src="images/color.png" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 3px; vertical-align: text-bottom; ">
</span>
</p>
<br>
<p>Kies uw 2de kleur:</p>
<p class="example_2">
<input type="text" value="#3A3A3A" hex="true" id="color_2" class="mColorPicker" style="background-color: rgb(58, 58, 58); color: black; ">
<span id="mcp_color_2" class="mColorPickerTrigger" style="display: inline-block; cursor: pointer; ">
<img src="images/color.png" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 3px; vertical-align: text-bottom; ">
</span>
</p>
<br>
<p>Kies uw tekst kleur:</p>
<p class="example_3">
<input type="text" value="#3A3A3A" hex="true" id="color_3" class="mColorPicker" style="background-color: rgb(58, 58, 58); color: black; ">
<span id="mcp_color_3" class="mColorPickerTrigger" style="display: inline-block; cursor: pointer; ">
<img src="images/color.png" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 3px; vertical-align: text-bottom; ">
</span>
</p>
<br>
<p>Kies uw link kleur:</p>
<p class="example_4">
<input type="text" value="#3A3A3A" hex="true" id="color_4" class="mColorPicker" style="background-color: rgb(58, 58, 58); color: black; ">
<span id="mcp_color_4" class="mColorPickerTrigger" style="display: inline-block; cursor: pointer; ">
<img src="images/color.png" style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 3px; vertical-align: text-bottom; ">
</span>
</p>
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStar">*</span>Wil u een favicon als kenteken van uw website?
</div>
<div class="pew_answer">
<div>
<p>
Een favicon is het icoon dat in het tabblad komt te staan wanneer u uw website bezoekt.
<br>
De voordelen van een favicon zijn dat deze altijd zichtbaar is in de tabbladen van een browser
en de gebruiker ziet deze keer op keer, ook in de favorieten word deze mee in opgeslagen.
Het favicon word dus het grote kenmerk van uw website!
<br>
<br>
Een favicon ziet er als volgd uit.
</p>
<br>
<img title="Planet-Earth Webcreations favicon" src="images/favicon_webcreations.ico">
<br>
<br>
<p>
En zo word deze in de tabbladen van de browser zichtbaar.
</p>
<br>
<p>
Het favicon in Google Chrome:
</p>
<img title="favicon in Google Chrome" src="images/favex1.jpg">
<br>
<br>
<p>
Het favicon in FireFox:
</p>
<img title="favicon in FireFox" src="images/favex2.jpg">
<br>
<br>
<p>
Het favicon in Internet Explorer:
</p>
<img title="favicon in FireFox" src="images/favex3.jpg">
<br>
<br>
<p>
Wil u een favicon voor uw website?
<br>
Vink dan de checkbox aan.
<input type="checkbox" name="favicon" value="favicon">
</p>
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStar">*</span>Wil u uw website optimaliseren voor zoekmashines?
</div>
<div class="pew_answer">
<div>
<p>
SEO of Search Engine Optimisation is je website optimaliseren om deze zo hoog
mogelijk in zoekmachienes te laten verschijnen bij een zoekopdracht.
Hoe hoger uw website in bijvoorbeeld Google staat, hoe meer gebruikers op uw
website terecht komen.
<br>
<br>
Het is steeds aan te raden om je website te optimaliseren voor zoekmashienes.
<br>
Zo word uw website altijd zichtbaar in zoekresultaten van zoekmachienes.
</p>
<br>
<br>
<p>
<input type="checkbox" name="seo" value="seo">
Website optimaliseren voor zoekmashines.
</p>
</div>
</div>
<div class="clearBoth">
</div>
<div class="pew_question">
<span class="redStar">*</span>Zijn er nog opmerkingen?
</div>
<div class="pew_answer">
<div>
<p>
Hebt u nog opmerkingen of vragen voor uw website?
<br>
<br>
</p>
<p>
<textarea name="cmts" placeholder="Opmerkingen..."></textarea>
</p>
</div>
</div>
<div class="clearBoth">
</div>
<section class="formActionButtons">
<section class="ActionButtons">
<p>
Offerte opsturen
<input type="button" title="Klik hier om het offerte formulier op te sturen." name="sendOffer" value="Offerte opsturen">
</p>
</section>
</section>
<div class="clearBoth">
</div>
</form>
<script>
$('input[placeholder], textarea[placeholder]').placeholder();
</script>
</section>
</section>
<div class="clearBoth">
</div>
<footer id="mainFooter">
<section id="copyrightText">
<p>Designed & Created by
<a href="http://www.planet-earth.nl/webcreations/" title="Ga naar Planet-Earth Webcreations">Planet-Earth Webcreations</a> |
Planet-Earth Webcreations © 2011 - 2012 All Rights Reserved
<br>
<br>
<a href="#" title="Lees het privacystatement van Planet-Earth Webcreations.">Privacy</a> |
<a href="#" title="Vind je weg terug in onze sitemap.">Sitemap</a> |
<a href="#" title="Neem contact op met Planet-Earth Webcreations.">Contact</a>
</p>
</section>
</footer>
</body>
</html>
Ik hoop dat je er iets mee kan...
Eerst even wat uitleg.
Ik wil dat de velden realtime gecontrolleerd worden.
Dus dat als iemand in het veld klikt en er weer uit gaat het script kijkt of er iets is in gevuld, zo niet word de tekst rood en komt er een kruisje als pictogram en anders word die groen met een check pictogram.
Zo word elke input aangesproken en gecontrolleerd.
Ik wou uit gemak dat ik niet voor elk veldje een script moet gaan maken dat gebaseerd is op een specifiek input met een ID, ik wil gewoon dat die de inputs een index geeft en dat die die dan ook appart behandeld.
Nu slaagt alles op alles en alleen de tekst van het eerste input veld word rood of groen...
input[0] en input.get(0) had ik ook al probeersels op gemaakt maar dat werkt ook niet...
Hoe doe ik dit dan?