ugrás a tartalomhoz

text box értéke

Bera · 2014. Már. 10. (H), 10.34
Sziasztok!

Van egy formom amiben egy text box van.
<input id="t3" type="text" name="te3"/>
Az szeretném valahogyan megoldani, lehetőleg javascripttel vagy php-val, hogy az oldal újratöltése nélkül letudjak cserélni egy képet a beírt szövegtől függően.

pl: ha beírom a text boxba azt hogy "megoldas" akkor az első számú kép jelenjen meg de ha mást írok be akkor egy másik kép jelenjen meg.

A képek megjelenítését így oldottam meg a radio gomboknál:

<script>
					function hidde8() {
					document.getElementById("hide8").style.visibility = "visible";
					}

					
					function hidded8() {
					document.getElementById("hided8").style.visibility = "visible";
					}
					</script>
ezután egy onclick-el meghívtam a funkciót.
‹ Tábla gép álló nézet letiltása Képfájl ellenőrzése javascriptel ›
 ■
1

Részletek

Poetro · 2014. Már. 10. (H), 11.07
Tudnál kicsit több információt adni? Az input elem onchange illetve onkeypress eseményére kellene ráakaszkodni, és megváltoztatni a kép elérési útját a mező aktuális tartalma alapján, amit a value tulajdonsággal tudsz lekérdezni, illetve módosítani.
2

<input id="m10" type="radio"

Bera · 2014. Már. 10. (H), 11.51
<div id="hide8" style="position:absolute; visibility:hidden;">
				<img class="correct1" src="Image/correct.png">
				</div>
				
				<div id="hided8" style="position:absolute; visibility:hidden;">
				<img class="wrong1" src="Image/wrong.png">
				</div>
<input id="m10" type="radio" name="mc4" value="correct"  OnClick="hidde8()"> Correct
					<input id="m11" type="radio" name="mc4" value="wrong" OnClick="hidded8()"> Wrong
					<input id="m12" type="radio" name="mc4" value="wrong" OnClick="hidded8()"> Wrong
					</input>
De ha a text-nek megadok value-t akkor az az oldal megnyitásakor látszódni fog a tex boxban és azt nem szeretném.
3

.

Bera · 2014. Már. 10. (H), 12.36
.
4

Mit?

Poetro · 2014. Már. 10. (H), 14.19
Mit nem szeretnél? Hogy a mezőbe írt érték látszódjon? Akkor használj hidden típusú input mezőt a text helyett, viszont akkor csak JavaScripttel illetve szerever oldalon tudod változtatni az értékét.
5

Nekem van egy olyan

Karvaly84 · 2014. Már. 10. (H), 16.03
Nekem van egy olyan megérzésem, hogy a koncepció ami alapján meg szeretnél oldani valamit nem jó. Tudnánk segíteni a helyes megoldásban, ha kicsit pontosabban meghatároznád azt a valamit, amit meg szeretnél oldani.
6

Van egy textbox amibe a

Bera · 2014. Már. 11. (K), 12.06
Van egy textbox amibe a látogató beír valamit. És azt kéne leellenőrizni hogy mit írt oda be. Ha a megfelelő szót írta be akkor megjelenik egy kép ha nem a megfelelőt írta be akkor egy másik kép jelenik meg. Mindezt úgy hogy az oldal ne töltődjön újra.

Addig megvan hogy a képet eltudom rejteni és megjeleníteni de csak gomboknál működik a dolog. Arra nem sikerült rájönnöm hogyan tudnám leellenőrizni azt hogy mit írtak be a textboxba.
7

Említettem

Poetro · 2014. Már. 11. (K), 14.09
Ahogy korábban említettem, az onchange illetve onkeypress stb. eseményt kell figyelned a meződön, majd a value-t ellenőrízve betölteni illetve megjeleníteni egy másik képet.
8

Egy egyszerű példa 3 féle

Karvaly84 · 2014. Már. 11. (K), 16.59
Egy egyszerű példa 3 féle ikonnal a szövegmező mellet:

<label for="q1">Melyik évben bocsátották ki az Aranybullát?</label>
<input type="text" id="q1" name="q1" class="respond">
<img id="q1-icon" width="24" height="24" src="question.png">
<script type="text/javascript">
	var responds = {
		q1: "1222"
	}
	
	var inputs = document.querySelectorAll(".respond");
	
	for (var i = 0; i < inputs.length; i++) {
		inputs[i].addEventListener("blur", validateField, false);
		inputs[i].addEventListener("focus", initField, false);
	}
	
	function validateField() {
		var r = this.value;
		var id = this.id;
		var icon = responds[id] === r ? "true.png" : "false.png";
		document.getElementById(id + "-icon").src = icon;
	}
	
	function initField() {
		document.getElementById(this.id + "-icon").src = "question.png";
	}
</script>
Egyébként nem biztos, hogy ez a fajta operáció a megfelelő. Persze ez alkalmazás jellegtől függ (és nem tudom milyen az űrlap felépítése amit használsz), de jobb ha az űrlapot szerver oldalon ellenőrzöd, hogy a válaszokat ne lehessen kiolvasni kliens oldalon pl. Firebug-al. Ez esetben tovább mennék, AJAX-on keresztül érdemes a választ ellenőrizni.
9

Köszi az infokat.Végül

Bera · 2014. Már. 14. (P), 13.19
Köszi az infokat.
Végül sikerült megoldanom a problémát kissé másként.

itt a kód ha esetleg valakit érdekel:
<HTML>
<HEAD>
<link rel="stylesheet" href="css/style2.css" type="text/css" />
<SCRIPT LANGUAGE="JavaScript">

function hiddedp9() {
document.getElementById("hidedp9").style.visibility = "hidden";
					}
					
function uresCheck(mezo){
  if (mezo.value != "megoldas") {
	document.getElementById("hided8").style.visibility = "visible";
	return true;
  
  
  }
  else{
    document.getElementById("hide8").style.visibility = "visible";
    return false;
  }
}

</SCRIPT>
</HEAD>

<BODY>
<div class="mainContent3">
		<div class="content3">
			<article class="topcontent3">
				<div id="hide8" style="position:absolute; visibility:hidden;">
				<img class="correct1" src="Image/correct.png">
				</div>
				<div id="hided8" style="position:absolute; visibility:hidden;">
				<img class="wrong1" src="Image/wrong.png">
				</div>
				<div id="hidedp9" style="position:absolute; visibility:visible;">
				<img class="pontok2" src="Image/pont3.png" onClick="hiddedp9()">
				</div>
<content>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<b><i>Type your text here!</b></i><br>
<FORM NAME="form_text1">
 <INPUT TYPE="text" NAME="text1" SIZE="20">
 <INPUT TYPE="button" 
  VALUE="Ellenőrizd" onClick="uresCheck(form_text1.text1)">
</FORM>
</content>
</article>
</div>
</div>
</BODY>
</HTML>