Threaded Mode | Linear Mode

stefendoza · 05-09-2011 11:45 PM

Pozdrav drugari. Nasao sam jednu formu za unos podataka kao i opciju da klikom na dugme generisem proizvoljan broj labela za unos. Problem je sto meni treba svaki put kada kliknem na dugme Add new option treba da se generise i ova labela za unos i ova lista da kao nesto odaberem. Ne znam kako to da naredim u javascript. Evo cijele forme:

forma.html

Code:

<html> 

<head> 

<SCRIPT type="text/vbscript" src="snow.js">

</SCRIPT>

<style> 

body{

font-size:small;

font-family:Arial;

}

form {background:#f8f8f8;

padding:15px;

border:1px silver solid;

width:650px;

}

</style> 

</head> 

<body> 

<h1>Create new poll</h1> 

<form id="myform" name="myform" method="post"> 

<ul id="options"> 

<li><label for="poll_option1">Option1:</label><input type="text" size="20" id="poll_option1" name="poll_option1"/></li> 

<label class="contact"><strong>Hard disk:</strong></label>

                        <select name="smijer"> 

                        <option value="Racunarstvo i informatika" selected>Procesor

                        <option value="Automatika i elektronika">Monitor

                        <option value="Elektroenergetika">Tastatura

                        </select>

                        <input type="button" value="Add new option" id="add_option" name="add_option"/>

</ul> 

<input type="hidden" name="method" value="post" /> 

<input type="submit" value="Create!" id="create_poll" name="create_poll"/><br /><br /> 

</form> 

<script type="text/javascript"> 

function add_new_option()

{

var form = document.getElementById("options");

var new_number = form.childElementCount+1;

var new_id="poll_option"+new_number;

var poll_label = document.createElement("label");

poll_label.htmlFor=new_id;

var p_label_text="Option"+new_number+":";

poll_label.appendChild(document.createTextNode(p_label_text));

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

new_option.type = "text"; new_option.id = new_id; new_option.name = new_id;

var html_li = document.createElement("li");

html_li.appendChild(poll_label);

html_li.appendChild(new_option);

form.appendChild(html_li);

}

if (document.getElementById) { window.onload = myUnobtrusiveBehavior; }

function myUnobtrusiveBehavior() {

document.getElementById("add_option").onclick=function() {add_new_option();}

}

</script> 

</html> 

</body>

danielvast · 10-09-2011 10:35 PM

Ok znaci ovo je relativno jednostavno koristi samo createElement() funkciju DOM-a za stvaranje select taga i nekoliko option tagova koje ces postaviti unutar napravljenog select box-a postaviti neke jos dodatne parametre poput id-a i vrijednosti opcija select box-a i to je to evo malo sam uredio ovu javascript fukciju koju si postavio:

Code:

<script type="text/javascript"> 

function add_new_option()

{

var form = document.getElementById("options");

var new_number = form.childElementCount+1;

var new_id="poll_option"+new_number;

var poll_label = document.createElement("label");

poll_label.htmlFor=new_id;

var p_label_text="Option"+new_number+":";

poll_label.appendChild(document.createTextNode(p_label_text));

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

var new_select_box = document.createElement("select");

new_select_box.id = "select"+new_number;

new_select_box.name = "select"+new_number;

var option1 = document.createElement("option");

option1.value = "Val1";

option1.innerHTML = "Val1";

var option2 = document.createElement("option");

option2.value = "Val2";

option2.innerHTML = "Val3";

var option3 = document.createElement("option");

option3.value = "Val3";

option3.innerHTML = "Val3";

new_select_box.appendChild(option1);

new_select_box.appendChild(option2);

new_select_box.appendChild(option3);

new_option.type = "text"; new_option.id = new_id; new_option.name = new_id;

var html_li = document.createElement("li");

html_li.appendChild(poll_label);

html_li.appendChild(new_option);

html_li.appendChild(new_select_box);

form.appendChild(html_li);

}

if (document.getElementById) { window.onload = myUnobtrusiveBehavior; }

function myUnobtrusiveBehavior() {

document.getElementById("add_option").onclick=function() {add_new_option();}

}

</script>

Neznam koliko ces ju moci upotrebiti ali generalno ju mozes i sam uređivati nije uopce tesko Namigivanje

Threaded Mode \| Linear Mode forma za unos
Author	Message