Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: Dynaaminen lomake

Pikkupiipertäjä [10.02.2009 08:48:41]

#

Pyydän nyt apua, kun useamman päivän yrittelyn jälkeen en saa vaivaista pientä koodin pätkää toimimaan.
Olen siis tekemässä ilmoittautumislomaketta, jossa ensin radiobutton-valikosta valitaan osallistujien määrä (0-4) ja sen mukaan mitä nappia ollaan painettu, niin tulisi viereen ilmestyä tekstikentät nimien täyttämistä varten (myös nolla-tapauksessa ilmoitetaan, kuka ei ole tulossa). En siis tahdo saada tätä toimimaan oikein. Lomake on tehty tähän tyyliin:

<input type="radio" name="lkm" value="0" onclick="get_radio_value(this.value)">0<br>

if-lauseilla saan ne tekstikentät tehtyä tuossa get_radio_value()-funktiossa, mutta en saa niitä tulostumaan samalle sivulle, vaan nappia painettaessa tekstikentät tulee näkyviin uudella sivulla :( Eilen jo luulin keksineeni ratkaisun innerHTML:llä, mutta ei toimikaan Mozillalla. Enkä kyllä vielä keksinyt miten sen olisi saanut toimimaan tällaisen lauseen kanssa:

for (var i=0; i<value; i++){
		document.write("Osallistuja nro."+(i+1)+'<input type="text" name="nimi" id='+(i+1)+'></br>');}

Jos joku voisi auttaa jotenkin pääsemään tästä eteenpäin, niin olisin hyvin kiitollinen.

reca [10.02.2009 09:31:33]

#

En ole asiantuntija Javascript / Ajax -jutuissa, mutta käsittääkseni yrität Javascriptilla, kun homma pitäis suorittaa Ajaxin avulla. Eli Javascriptia ei kuitenkaan voi kesken sivua muutella (?) vaan se pitäisi toteuttaa Ajaxilla.

Viksummat korjaa jos olen väärässä.

Lebe80 [10.02.2009 10:04:39]

#

reca kirjoitti:

Viksummat korjaa jos olen väärässä.

joo, eli korjataan. olet väärässä.

Juuri javascriptillä voi muuttaa sivua kesken kaiken. Ajax on vain nimitys javascriptillä toteutettavasta (osittaisesta)sivulatauksesta ja taidetaan sitä viljellä myös nykyään kaikenlaisessa muussakin dynaamisessa toiminnassa.

edit:

Pikkupiipertäjä kirjoitti:

Eilen jo luulin keksineeni ratkaisun innerHTML:llä, mutta ei toimikaan Mozillalla.

Mozillalla? Tarkoitatko ihan _Mozillaa_ vaiko esim. Firefoxeja?

Itsellä ainakin innerHTML toimii kaikissa yleisimmissä moderneissa selaimissa. Kannattaa testata myös jotain javascript-kirjastoa, missä on valmiina toiminnot eri selaimille, jolloin itse ei tarvitse kaikkia versioita kirjoitella.

tsuriga [10.02.2009 11:01:05]

#

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>JavaScript test: Selected amount of participants</title>
  <script type="text/javascript">/*<![CDATA[*/

window.onload = function() {
  var p = document.getElementById('count');
  if (p) {
    p.onchange = function() {

var form = document.getElementById('attendance');
var count = parseInt(this.options[this.selectedIndex].text);

var atn = document.getElementById('attendees');
var inputs = atn.getElementsByTagName('input');

// Reset inputs
for (var i = inputs.length - 1; i > 0; i--) {
  atn.removeChild(inputs[i]);
}

// Create new ones if requested
for (var i = 1; i < count; i++) {
  var newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.name = 'p[]';
  newInput.id = 'p[]';
  atn.appendChild(newInput);
}

    }


  }
}

  /*]]>*/</script>
 </head>
 <body>
  <form action="" method="post" id="attendance">
   <fieldset id="attendees">
    <legend>Osallistujat:</legend>
    <select id="count">
     <option>0</option>
     <option>1</option>
     <option>2</option>
     <option>3</option>
     <option>4</option>
    </select>
    <input type="text" name="p[]" id="p[]" />
   </fieldset>
   <input type="submit" name="submit" id="submit" />
  </form>
 </body>
</html>

Siitäpä muokkaamaan. InsertBeforella en saanut heti toimimaan, joten vaihdoin appendChildiin. Merrille kiitos hyvästä pohjasta toisessa viestiketjussa.

EDIT: Noniin, nyt on väritkin kohillaan. Aiheeseen liittymättä: clienttipuolen värjäys olis niin nannaa, <code type="text/html"... tmv.
EDIT2: Noh, ei noita QB-värejä jaksa itsekään pitkään katsella :).

Vastaus

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

Tietoa sivustosta