Keskustelu: Nettisivujen teko: Lomakerivin näyttämisen triggaus radio-buttoniin

Erkkimon [08.01.2012 17:12:12]

Yritän tässä tehdä dynaamista lomaketta JQueryllä. Löysin parikin hyvää opasta, mutten saa hommaa toimimaan... Yritän nyt ensin saada testilomakkeen toimimaan, jossa radio-buttonin valinnasta riippuu, näytetäänkö eräs lomakkeen rivi.

Onnistun ainoastaan piilottamaan lomakkeen elementtejä CSS:llä, mutten saa niitä enää näkymään JavaScriptillä.

<html><head>

<style type="text/css">
#piilotettava {display: none}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
    $("input[name=piilotetaanko]").change(function() {
        if ($this).val() == "show") {
            $("#piilotettava").slideDown('fast');
        }
        else {
            $("#piilotettava").hide('fast');
        }
    })
})
</script>

<title>Rivinpiilotustesti</title></head>
<body>

<form id="lomake" name="lomake" method="post" action="#">
<table>
	<tr>
		<td>Haluatko, ett&auml; seuraavat rivit n&auml;kyv&auml;t?</td>
		<td>
			<input name="piilotetaanko" id="piilotetaanko" type="radio" id="hide" value="hide" />Piilota.
			<input name="piilotetaanko" id="piilotetaanko" type="radio" id="show" value="show" />N&auml;yt&auml;.
		</td>
	</tr>
	<tr id="piilotettava">
		<td>T&auml;m&auml;n pitaisi n&auml;ky&auml; ja kadota.</td>
		<td><input type="text" name="piilotettava1" id="piilotettava1" size="28" /><br />
		<input type="text" name="piilotettava2" id="piilotettava2" size="28" />
		</td>
	</tr>
</form>

</body>
</html>

Yucca [08.01.2012 17:46:10]

Perusideassa on ainakin se ongelma, että kun CSS on käytössä mutta JavaScript ei, rivit ovat piilossa ja pysyvät. Luotettavampi tapa on, että teet CSS-asetuksen dynaamisesti JavaScriptissä.

Ehto

$this).val() == "show"

on useammallakin tavalla virheellinen (kannattaa käyttää esim. JSHintiä ja katsoa selaimen konsolilokia); toimiva olisi

this.value == "show"

makumaku [08.01.2012 18:30:46]

Kuten huomaat niin sulkujen määrä ei täsmää

if ($this).val() == "show")

Korvaa vaikka tuo

$this).val()

koodilla

$("input[name=piilotetaanko]:checked").val()

niin pitäisi toimia.

Myöskin miksi noilla radioilla on kummallakin kaksi id-kenttää?

Erkkimon [09.01.2012 01:17:06]

Tuo ID oli tosiaan määritelty kaksi kertaa ihan vahingossa. Aikansa kun semplaa koodinsa kanssa, niin noita pyhäinjäännöksiä tuppaa jäämään koodiin. :S

Otin neuvoista vaarin, ja sain homman pelaamaan. Lopullisesta, käyttötarkotukseensa istutetusta koodista tuli seuraavanlainen.

$(document).ready(function(){
    $(".verkkomaksutiedot").css("display","none");
    $(".maksajan_sahkoposti").css("display","none");
    $(".maksajan_postiosoite").css("display","none");
        $(".lahetystapa").click(function(){
        if ($('input[name=lahetystapa]:checked').val() == "Sahkoisesti" ) {
            $(".maksajan_sahkoposti").slideDown("fast");
            $(".maksajan_postiosoite").slideUp("fast");
            $(".verkkomaksutiedot").slideUp("fast"); }
        if ($('input[name=lahetystapa]:checked').val() == "Postitse" ) {
            $(".maksajan_postiosoite").slideDown("fast");
            $(".maksajan_sahkoposti").slideUp("fast");
            $(".verkkomaksutiedot").slideUp("fast"); }
        if ($('input[name=lahetystapa]:checked').val() == "Verkkolaskuna" ) {
            $(".verkkomaksutiedot").slideDown("fast");
            $(".maksajan_sahkoposti").slideUp("fast");
            $(".maksajan_postiosoite").slideUp("fast");
        } else {
            $(".verkkomaksutiedot").slideUp("fast");
        }
     });
});

Skriptin vastapelurina siis on HTML-elementit, jotka on luokissa "verkkomaksutiedot", "maksajan_sahkoposti" sekä "maksajan_postiosoite". Ehkä tuosta pätkästä on jollekulle apua.

Kiitos kaikille koodin kanssa jeesanneille!

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen