Keskustelu: Nettisivujen teko: checkbox checked tuo lisää sisältöä

Ongelma on siis sen verta yksinkertainen, että käyttäjä laittaa raksin ruutuun niin alle ilmestyy pudotusvalikko tekstin kanssa ja raksi pois niin se taas katoaa.

PHP:llä tämä ei varmaan kovin yksinkertaisesti onnistu, joten se on kai tehtävä JavaScriptillä? Kokeilin laittaa checkboxin sisään onclick:iä tähän tapaan:

Kuollut: <input type="checkbox" name="dead" value="yes" onClick="dead()" /><br />
	<script type="text/javascript">
	function dead() {
		if(document.lomake.dead.checked) {
			document.write("Tekstiä, joka pitaisi tulostua, kun checkbox on valittu.");
		}
	}
	</script>

Funktio ei näköjään suostu tulostamaan tuota vaan heittää käyttäjän tyhjälle sivulle (jossa tosin lähdekoodi näyttäisi olevan kohdillaan).

Kokeilin myös ihan yksinkertaisella if:llä..

Kuollut: <input type="checkbox" name="dead" value="yes" /><br />
	<script type="text/javascript">
		if(document.lomake.dead.checked) {
			document.write("Tekstiä, joka pitaisi tulostua, kun checkbox on valittu.");
		}
	</script>

mutta tuo käsitellään lomakkeen lähetyksen yhteydessä eli teksti ei tule näkyviin heti checkboxia valittaessa.

Mikähän olisi se oikea tapa toteuttaa tämä?

Toteuttaisin tuon alle ilmestyvän pudotusvalikon PHP:llä, joten voiko PHP:tä käyttää JavaScriptin sisällä?

	<script type="text/javascript">
		if(document.lomake.dead.checked) {
			document.write("<select name=\"birthday\"><?php pudotusvalikko(0); ?></select>");
		}
	</script>

<script type="text/javascript">
	function check() {
		if(document.getElementById('chk').checked) document.getElementById('asd').style.display = "inline";
		else document.getElementById('asd').style.display = "none";
	}
</script>
<input type="checkbox" id="chk" name="aasdasdasdsd" onchange="check()" /> valitse<br/>
<select name="asd" id="asd" style="display: none"><option value="asd">asd</option></select>

Menee turhaksi kikkailuksi jos elementti yritetään aina kirjoittaa / poistaa sitämukaan kun sitä ei tarvita (document.write). Helpointa on vaan togglettaa elementin näkyvyyden kanssa.

Huomioithan myös, että PHP:n tulostamat lainausmerkit pitää escapettaa javascriptille. Helpoin on toki käyttää javascriptissä '-lainausta ja PHP:n tulostuksessa "-lainausta, niin ei tarvitse escapettaa mitään. PHP:ta voi siis toki tulostaa sinne JavaScriptin sekaan.

Suosittelen ehdottomasti kertaamaan PHP:n ja selaimessa suoritettavan koodin toimintamalleja.

Ratkaisuhan olikin yksinkertaisempi kuin oletinkaan eikä tarvinnut edes tulostaa PHP:tä JavaScriptin sisällä. Olen kyllä aikaisemminkin piilottanut tekstiä tuolla getElementById:llä, mutta jostain syystä en vain hoksannut, että sama toimii tässäkin. Kiitos!

punppis kirjoitti:

Huomioithan myös, että PHP:n tulostamat lainausmerkit pitää escapettaa javascriptille.

Tuota en tiennytkään, vaikka olisihan se ollut pääteltävissä. Laitan muistiin, kun seuraavan kerran tarvitsee PHP:tä tulostaa JavaScriptin sisällä.

JavaScriptillä PHP:n tulostaminen on liian myöhäistä, serveri ei enää tuossa vaiheessa käsittele PHP-koodia. PHP suoritetaan palvelimella (poikkeuksia on, mutta sitten puhutaan jo käyttäjän asentamista lisäosista), minkä jälkeen käyttäjälle lähetetään vaikkapa se (X)(HT)ML(5)-sivu, jossa on JavaScriptiä. JavaScriptin suorittamisen hoitaa käyttäjän selaimen JavaScript-moottori.

tsuriga kirjoitti:

JavaScriptillä PHP:n tulostaminen on liian myöhäistä, serveri ei enää tuossa vaiheessa käsittele PHP-koodia.

Tässä nyt ei varmaankaan tarkoitettu, että html:ään lisättisiin php-koodia document-writellä, vaan JavaScriptin "sekaan" PHP:lla tulostamista.

Ah. Siinä tapauksessa parempi ilmaisu voisi olla "JavaScriptin tulostaminen PHP:llä" tmv. Toivottavasti yllä oleva sepostus selkeyttää edes hieman JavaScriptin ja PHP:n roolitusta ja niiden mahdollisuuksia.