HTML textfield

michiel117 · 16 jul 2011

Hallo Allemaal,

Ik ben op zoek naar een HTML code waarmee je 1 textfield hebt en daaronder een submit en reset button. Stel een persoon typt hier 2434 dan zou hij naar de pagina GROEN moeten worden doorgestuurd als een andere persoon 2433 typt dan moet er ZWART staan (als voorbeeld)

Iemand enig idee hoe dit er eruit ziet in html?

Alvast bedankt:thumb:

grumbkow · 16 jul 2011

Nog één keer en dan een stuk duidelijker...?

michiel117 · 16 jul 2011

Stel iemand typt een modelnr. 215 dan wil ik dat er staat "sonyericson"
als iemand een modelnr. typt die niet bestaat wil ik dat er staat "ongeldig modelnr"

Hopelijk is het nu iets duidelijker, php/html/java maakt niet zoveel uit als het maar werkt.

Frats · 16 jul 2011

Dat is een custom script zo te horen, dat is niet een "even" en ook niet een "copy/paste".

Daarvoor zul je zelf moeten gaan onderzoeken hoe je scripts bouwt en wat in elkaar moeten gaan zetten.

RoboticPro · 16 jul 2011

Je zou een array kunnen maken met de eind link en code, en dan de code laten posten en dan een redirect.
Maar kun je hem niet zelf schrijven omdat je hier om een code vraagt?

grumbkow · 16 jul 2011

generatieherkennen.php bevat geen stylesheet, logisch dat de opmaak verdwijnt.

michiel117 · 16 jul 2011

Bedankt voor uw reactie, zou u misschien een voorbeeldje willen geven hoe ik de stylesheet erin verwerk?. Ik vind het zelf namelijk niet zo logisch

De website heb ik gebouwd met CS cart deze software doet dit namelijk allemaal zelf. Ik heb dus niet egt veel verstand van de scripten.

Alvast bedankt.

grumbkow · 16 jul 2011

... De html bevat een <link> tag met daarin een verwijzing naar een CSS bestand. generatieherkennen.php moet of worden geinclude of je moet daar ook een verwijzing maken. Word toch tijd om even te googelen...

csshunter · 17 jul 2011

Waarom zou je het niet "gewoon met javascript" doen?
Dan hoeft er niet naar een aparte php-resultaatpagina gegaan te worden, maar kan het resultaat meteen op de pagina zelf gepresenteerd worden.

Verder zie ik dat de "A" bij het modelnummer de enige mogelijke letter is. Dan kan deze bij het invullen ook weggelaten worden.

Dan is tegelijkertijd geen verwarring hoofdletter/kleine letter mogelijk (resp. hoeft daar niet iets voor ingebouwd te worden in het script).
Bijvoorbeeld als volgt:

HTML:

<p>Wilt u weten welke generatie uw iPhone/iPod is? Binnen 5 sec weet u het!
Kijk op de achterkant van uw iPhone/iPod. Onderin vind u het Model No.<br /> 
Type het getal in het vakje hieronder en klik op 'bekijk'. Vervolgens ziet u 
of u een iPhone/iPod heeft en welke generatie uw iPhone/iPod is.</p>

<p>Model No.: 
	<input id="deA" type="text" value="A" disabled="disabled" 
	/><input id="userVeld" type="text" />
	<button id="bekijk" onclick="showModel();" style="cursor: pointer;">bekijk</button>
	&gt; U heeft een: <span id="resultaat">.............................</span>
</p>

[JS]<script type="text/javascript">
//<![CDATA[
function showModel(){
var nummer = document.getElementById('userVeld').value;
var resultaat = document.getElementById('resultaat');
var resultaatTxt;
if (nummer == 1203){resultaatTxt='iPhone 2G'}
else if (nummer == 1241){resultaatTxt='iPhone 3G'}
else if (nummer == 1324){resultaatTxt='iPhone 3G'}
else if (nummer == 1303){resultaatTxt='iPhone 3GS'}
else if (nummer == 1325){resultaatTxt='iPhone 3GS'}
else if (nummer == 1332){resultaatTxt='iPhone 4G'}
else if (nummer == 1349){resultaatTxt='iPhone 4G'}
else if (nummer == 1288){resultaatTxt='iPod Touch 2G'}
else if (nummer == 1318){resultaatTxt='iPod Touch 3G'}
else if (nummer == 1367){resultaatTxt='iPod Touch 4G'}
else resultaatTxt='ongeldig nr. ingevuld; probeer svp opnieuw';
resultaat.innerHTML = resultaatTxt;
if (resultaatTxt == 'ongeldig nr. ingevuld; probeer svp opnieuw'){
resultaat.style.fontStyle='italic';
resultaat.style.fontWeight='normal';
resultaat.style.border='1px solid red';
}
else {
resultaat.style.fontStyle='normal';
resultaat.style.fontWeight='bold';
resultaat.style.border='none';
}
}
//]]>
</script>[/JS]
Om de alvast neergezette "A" in het invoerveld te plaatsen (en tegelijk onveranderlijk te maken), zijn er 2 invoervelden gemaakt: eentje voor de "A" en de echte voor het getal.
Met css kunnen die naadloos aan elkaar geplakt worden. Ook de rest kan met css mooi gemaakt worden:

Code:

<style type="text/css">
/* aanvullende styles voor opvragen modelsoort */
#deA {
	width: 1em; 
	margin-right: 0;
	padding: 3px 0 3px 3px; 
	border: solid #7F9DB9; 
	border-width: 1px 0 1px 1px; 
	background: white; 
	color: #56799A; 
	font-weight: bold;
	}
#userVeld {
	width: 5em; 
	margin-left: 0; 
	padding: 3px 3px 3px 0; 
	border: solid #7F9DB9; 
	border-width: 1px 1px 1px 0; 
	letter-spacing: 2px;
	}
#resultaat {
	padding: 2px 5px; 
	}
</style>

Test-resultaat:
www.developerscorner.nl/csshunter/tests/ipod-iphone-generatie-herkennen-nw.html *)

Met vriendelijke groet,
CSShunter
_____________
*) Zonder op- of omzien: naar de rest niet gekeken.
O ja, toch: onderaan de pagina stond nog een zoekveld met dezelfde id; dat heb ik er even uitgehaald.

michiel117 · 17 jul 2011

Hartelijk bedankt voor de tijd die u in het javascript hebt gestoken en uw creativiteit. Op uw test pagina vind ik het er heel gaaf uitzien nu alleen nog op mijn eigen website uploaden :S >

Moet ik het javascript onder het html vermelden? En waar moet ik dan de CSS plaatsten?
Misschien kunt u mij een paar stappen sturen hoe ik het nu in mijn website moet integreren.

alvast bedankt:thumb:

Heb alles in hetzelfde bestand gezet ziet er egt heel gaaf uit, werkt veel eficiënter. Het enige wat ik nu nog jammer vind is dat het invoerveld bij mij net iets te groot is want mensen hoeven maar een paar cijfers in te voeren. Heb ik iets verkeerds gedaan? en een extra enter boven het plaatje zou wel mooier zijn : )

csshunter · 17 jul 2011

Hoi Michel,
Ha, blij dat het van pas komt, heb je er snel in gezet.

Hier komen de tips:

De css mag niet tussendoor in de html van de <body> staan, maar moet als laatste toegevoegd worden vlak voor de </head> (net zoals in de voorbeeld-pagina).
Het javascript staat prima op een goede plaats. Fijnproevers zouden het misschien in de <head> willen zetten, of juist helemaal onderaan vlak voor de </body>, maar hier kan het ook.
In het voorbeeld is de breedte van het invulvakje op 4em gezet: #userVeld {width: 4em;}; bij jou is het 5em, en dat is net wat groter: kan 4em worden.
Om de foto wat lager te krijgen, kan je bv. toevoegen:

HTML:

<p style="text-align: center; margin-top: 20px;">
   <img src="helpfiles/ifoon1241.png" alt="" width="332" height="249" /></p>

Beter zo?
Met vriendelijke groet,
CSShunter

michiel117 · 18 jul 2011

Bedankt voor je reactie, Vakje is nu kleiner en er zit meer ruimte boven de afbeelding :d Ik zit alleen met het probleem dat ik alleen de <body> kan bewerken met de winkelwagen software op mijn site. Het css script staat nu helemaal achteraan het 'lijkt' te werken of zie ik dit verkeerd?

csshunter · 18 jul 2011

Aha, als je niet in de <head> kunt komen, moet het dus anders.
Waarschijnlijk werkt het nu op deze manier wel (browsers zijn wat dit betreft nogal toegeeflijk), maar het beste is om dan deze styles als <style ...>...</style> uit de body te halen, en ze rechtstreeks in de bijbehorende elementen in de html te zetten:

HTML:

<p>Model No.: 
    <input id="deA" type="text" value="A" disabled="disabled" 
    style="width: 1em; margin-right: 0; padding: 3px 0 3px 3px; 
    border: solid #7F9DB9; border-width: 1px 0 1px 1px; 
    background: white; color: #56799A; font-weight: bold;"
    /><input id="userVeld" type="text" 
    style="width: 3.5em; margin-left: 0; padding: 3px 3px 3px 0; 
    border: solid #7F9DB9; border-width: 1px 1px 1px 0; 
    letter-spacing: 2px;" />
    <button id="bekijk" onclick="showModel();" 
    style="cursor: pointer;">bekijk</button> &gt; U heeft een: 
    <span id="resultaat" 
    style="padding: 2px 5px;">.............................</span>
</p>

Met vriendelijke groet,
CSShunter

michiel117 · 18 jul 2011

Gelukt

Bedankt voor al je hulp, het is gelukt!

Voor de geïnteresseerde dit heb ik in de <body> gezet:

<p>Wilt u weten welke generatie uw iPhone/iPod is? Binnen 5 sec weet u het!
Kijk op de achterkant van uw iPhone/iPod. Onderin vind u het Model No.<br />
Type het getal in het vakje hieronder en klik op 'bekijk'. Vervolgens ziet u
of u een iPhone/iPod heeft en welke generatie uw iPhone/iPod is.</p>
<p> </p>
<p>Model No.:
<input id="deA" type="text" value="A" disabled="disabled"
style="width: 1em; margin-right: 0; padding: 3px 0 3px 3px;
border: solid #7F9DB9; border-width: 1px 0 1px 1px;
background: white; color: #56799A; font-weight: bold;"
/><input id="userVeld" type="text"
style="width: 3.5em; margin-left: 0; padding: 3px 3px 3px 0;
border: solid #7F9DB9; border-width: 1px 1px 1px 0;
letter-spacing: 2px;" />
<button id="bekijk" onclick="showModel();"
style="cursor: pointer;">bekijk</button> > U heeft een:
<span id="resultaat"
style="padding: 2px 5px;">.............................</span>
</p>
<script type="text/javascript">
//<![CDATA[
function showModel(){
var nummer = document.getElementById('userVeld').value;
var resultaat = document.getElementById('resultaat');
var resultaatTxt;
if (nummer == 1203){resultaatTxt='iPhone 2G'}
else if (nummer == 1241){resultaatTxt='iPhone 3G'}
else if (nummer == 1324){resultaatTxt='iPhone 3G'}
else if (nummer == 1303){resultaatTxt='iPhone 3GS'}
else if (nummer == 1325){resultaatTxt='iPhone 3GS'}
else if (nummer == 1332){resultaatTxt='iPhone 4G'}
else if (nummer == 1349){resultaatTxt='iPhone 4G'}
else if (nummer == 1288){resultaatTxt='iPod Touch 2G'}
else if (nummer == 1318){resultaatTxt='iPod Touch 3G'}
else if (nummer == 1367){resultaatTxt='iPod Touch 4G'}
else resultaatTxt='ongeldig nr. ingevuld; probeer opnieuw';
resultaat.innerHTML = resultaatTxt;
if (resultaatTxt == 'ongeldig nr. ingevuld; probeer opnieuw'){
resultaat.style.fontStyle='italic';
resultaat.style.fontWeight='normal';
resultaat.style.border='1px solid red';
}
else {
resultaat.style.fontStyle='normal';
resultaat.style.fontWeight='bold';
resultaat.style.border='none';
}
}
//]]>
</script>

<p style="text-align: center; margin-top: 20px;"><img src="helpfiles/ifoon1241.png" alt="" width="332" height="249" /></p>

HTML textfield

michiel117

grumbkow

Gebruiker

michiel117

Frats

Terugkerende gebruiker

RoboticPro

Gebruiker

grumbkow

Gebruiker

michiel117

grumbkow

Gebruiker

csshunter

Meubilair

michiel117

csshunter

Meubilair

michiel117

csshunter

Meubilair

michiel117

Nieuwste berichten

Wij waarderen jouw privacy