Keskustelu: Nettisivujen teko: Kenttien lisäys javascriptillä

JimProfit [23.08.2010 19:08:19]

Terve !

Osaisiko joku hieman auttaa minua alkuun tossa javascriptissä? Alla olevaa koodia pitäs muuttaa sillä tavalla että se lisäis aina ADD-nappia painamalla uudet kentät kerralla; esim. tekstikenttä, radio-nappi ja nappi tulisivat aina kerralla, eikä yksitellen niin kuin se nyt toimii.
Tuon valinta tiputusvalikon voi poistaa, ainoastaan ADD-nappi riittää.

Alla koodi:

<HTML>

<HEAD>

<TITLE>Sivut</TITLE>

<SCRIPT language="javascript">

function add(type) {



   //Create an input type dynamically.

    var element = document.createElement("input");




     //Assign different attributes to the element.

     element.setAttribute("type", type);

     element.setAttribute("value", type);

     element.setAttribute("name", type);



    var foo = document.getElementById("fooBar");


     //Append the element in page (in span).

    foo.appendChild(element);



 }
</SCRIPT>

</HEAD>

<BODY>

<FORM>

 <H2>Dynamically add element in form.</H2>

 Select the element and hit Add to add it in form.

 <BR/>

 <SELECT name="element">

   <OPTION value="button">Button</OPTION>

    <OPTION value="text">Textbox</OPTION>

   <OPTION value="radio">Radio</OPTION>

</SELECT>



 <INPUT type="button" value="Add" onclick="add(document.forms[0].element.value)"/>



<span id="fooBar">&nbsp;</span>



</FORM>

</BODY>

</HTML>

Teuro [23.08.2010 19:10:20]

Lisäät nuo kaikki kolme tyyppiä kerralla, etkä pakota käyttäjää valitsemaan niitä pudotusvalikosta?

JimProfit [23.08.2010 19:17:30]

Jos voisit näyttää sen miten esim. muuttaisit tota koodia niin pääsisin helpommin kiinni siihen.

Teuro [23.08.2010 19:34:14]

Sido tuohon onclick eventtiin oma funktio, joka kutsuu kolme kertaa tuota lisäysfunktiota esimerkiksi seuraavasti. Karkeahko esimerkki, mutta idea selvinnee.

<html>
<head>
<title>Sivut</title>
<script type="text/javascript">
function add(type, value, name) {
	var element = document.createElement("input");

	element.setAttribute("type", type);
	element.setAttribute("value", value);
	element.setAttribute("name", name);

	var form = document.getElementsByTagName("form")[0];

    form.appendChild(element);
}

function lisaa() {
    add("text", "", "Etunimi");
    add("radio", "1", "joo");
    add("button", "Laske", "summa");
}
</script>
</head>
<body>
	<h2>Dynamically add element in form.</h2>
	<p>Select the element and hit Add to add it in form.</p>
	<form>
		<input type="button" value="Add" onclick="lisaa()"/>
	</form>
</body>
</html>

JimProfit [23.08.2010 19:55:39]

Joo, eiköhän se nyt tuolla avautunut tarpeeksi, että ymmärrän sen rakenteen. Kiitos.

Vastaus

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

Kirjautuminen

Haku