Gå til innhold

Trenger hjelp med et form-script

Thimmis

Av Thimmis
i Programmering og webutvikling

Anbefalte innlegg

Thimmis

Thimmis

Skrevet
Skrevet

Hei!

 

Jeg er veldig grønn på javascript området, og må lage et søkefelt som kan modifiseres. Det jeg vil gjøre er å ha muligheten til å legge til søkefelt, som sammen utgjør det som skal søkes etter. Det skal da bestå av både et <select> felt og et text felt. Men skal ha to knapper ved siden av, "legg til felt" og "fjern felt", så man skal kunne legge til maksimum 5 felt.

 

-T

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
LostOblivion

LostOblivion

Skrevet
Skrevet (endret)

Hei, dette kan gjøres ved bruk av noduler. Med noduler, så kan du sette inn nye HTML-elementer, ta bort gamle, og forandre på de bare ved bruk av JS. Det kan virke litt tricky i starten, men det er den mest dynamiske måten å gjøre det på.

 

Eksempel på et bildeopplastingsscript:

 

<?xml version="1.0" encoding="UTF-8"?>
<!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">
<head>
<title>
Noduleksempel
</title>
<script type="text/javascript">
var container, nodeCount = 0, min = 1, maks = 5;
function addImage(n)
{
for (i = 0; i < n; i++)
{
	if (container.childNodes.length >= maks)
	 return;

	div = document.createElement("div");
	div.setAttribute("id", "image" + nodeCount);

	text = document.createTextNode("Velg bilde:");
	div.appendChild(text);

	br = document.createElement("br");
	div.appendChild(br);

	image = document.createElement("input");
	image.setAttribute("name", "imageFile[]");
	image.setAttribute("type", "file");
	div.appendChild(image);

	space = document.createTextNode(" ");
	div.appendChild(space);

	del_link = document.createElement("a");
	del_link.setAttribute("href", "java script: delImage('image" + nodeCount + "');");
	del_link.appendChild(document.createTextNode("Fjern"));
	div.appendChild(del_link);

	br = document.createElement("br");
	div.appendChild(br);

	text = document.createTextNode("Beskrivelse:");
	div.appendChild(text);

	br = document.createElement("br");
	div.appendChild(br);

	description = document.createElement("textarea");
	description.setAttribute("cols", "30");
	description.setAttribute("rows", "5");
	description.setAttribute("name", "imageDescription[]");
	div.appendChild(description);

	container.appendChild(div);
	nodeCount++;
}
}
function delImage(id)
{
if (container.childNodes.length > 1)
	container.removeChild(document.getElementById(id));
}
window.onload = function()
{
container = document.getElementById("container");
addImage(min);
}
</script>
</head>
<body>
<div id="container"></div>
<a href="java script: addImage(1);">Legg til</a>
</body>
</html>

 

Som du sikkert ser, så blir det mye pirking for å få det som man vil, men husk at alt er noduler, til og med mellomrom og tabs.

 

(Legg merke til 3. siste linje, hvor Diskusjon.no gjør om javascript i ett ord til java script for å hindre misbruk + de andre stedene. Fiks dette i koden din.)

Endret av LostOblivion
Lenke til kommentar
Thimmis

Thimmis

Skrevet
  • Forfatter
Skrevet

Tusen takk for svaret, men dessverre var det ikke helt det jeg letet etter. Beklager hvis jeg formulerte meg dårlig, jeg skal prøve med et eksempel.

 

<form name="search" action="" method="POST">
    <select name="searchType">
         <option value="all">All</option>
         <option value="titles">Titles</option>
         <option value="names">Names</option>
         <option value="companies">Companies</option>
         <option value="keywords">Keywords</option>
         </select>
         <input size="40" type="text" name="searchField" id="search1" />
         <a href="#" onclick='addLine()'>add</a>
         <a href="#" onclick='removeLine()'>remove</a>
         <br />
         <input type="submit" value="Search the database">
    </form>

 

Noe sånt var det jeg tenkte meg.

Lenke til kommentar
Thimmis

Thimmis

Skrevet
  • Forfatter
Skrevet

Hvordan får jeg til å sette flere verdier inn i dropdown boksen min da?

Dette fungerer jo tydligvis ikke...

 

		var selections = new Array()
	selections[0] = "All"
	selections[1] = "Titles"
	selections[2] = "Names"

	select = document.createElement("select");
	select.setAttribute("name", "select[]");
	option = document.createElement("option");
	for (i=0; i<selections.length; i++) {
		selection = document.createTextNode("selections[i]");
		}
	option.appendChild(selection);
	select.appendChild(option);
	div.appendChild(select);

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...