Hej! Hej Hassan ifall du skulle ha gjort insättningen rätt (dvs. enligt standard, du är ju ändå halvvägs där med createElement) så skulle det ha funkat "alla" relativt nya browsers, nu funkar det bara i IE. Hej det är fel jo, antagligen är det inte ens tillåtet att pilla in spans mellan tr:s, för att inte tala om att det inte funkar, som du märkte.. Hej! Skickar med ett exempel.Onchange, ny fält
Jag har tex detta:
<code>
<select name="kategori">
<option value='4' id='cat4' >Bilar</option>
<option value='5' id='cat5' >Bildelar & Biltillbehör</option>
<option value='36' id='cat36' >Bilstereo</option>
</select>
</code>
Jag vill att ifall man tex anger Bilar, så skall en ny fält visas nedan.
Dvs, nya koden skall se ut såhär.
<code>
<select name="kategori">
<option value='4' id='cat4' >Bilar</option>
<option value='5' id='cat5' >Bildelar & Biltillbehör</option>
<option value='36' id='cat36' >Bilstereo</option>
</select>
<br>
<input name="bilmodell" type="text" id="epost" size="40">
</code>
Tacksam för svar.Sv: Onchange, ny fält
Det finns flera olika alternativ du kan välja, för att lösa detta problem.
Exvis kan du, i förväg, lägga ut de fält som skall vara synliga beroende på vilket val som görs.
Annars kan du lägga ut fältet dynamiskt.
Här är ett exempel på att lägga ut det dynamiskt:
Javascript:
var input = document.createElement("input");
input.name = "bilmodell";
input.type = "text";
input.id = "epost";
input.size = "40";
document.all["field"].insertAdjacentElement("AfterBegin", input);
Och lagret field:
<span id="field"></span>
---
Ovanstående lägger alltså ut ett inmatningsfält "input", i lagret "field".
Du kan även lägga in det som ren HTML direkt med metoden "insertAdjacentHTML". Som sagt finns det flera olika alternativ. Vad som funkar i vilka webläsare, är en annan sak, men dessa fungerar i IE (också kanske även i FireFox, är inte säker).
/ Peter
Sv:Onchange, ny fält
resten är samma, men byt ut document.all raden till
document.getElementById("field").appendChild(input);
(sen ifall input är ett bra namn på variabeln är en annan fråga, IE har (i alla fall haft) en viss tendens att tro sej veta vad man *egentligen* menat...)
Sv:Onchange, ny fält
Kännde att jag kunde fortsätta på denna tråd med en följdfråga i ämnet. Jag har en table sen skulle jag vilja skjuta till en tr i samband med vissa händelser som jag vill styra.
Men när jag använder samma modell som Ni tipsat om tidigare här så får jag inte in tr på rätt plats, utan den kommer in ovanför table. Jag har lagt in ett span mellan två tidigare rader (tr) och hoppades på att den nya raden skulle komma in där. Naturligtvis så har jag kopplat den nya raden till det id som jag lagt till i span...
Är det fel tillvägagångssätt för det som jag vill uppnå?
//StefanSv: Onchange, ny fält
Titta på <b>insertRow</b> samt <b>insertCell</b> istället. (http://www.w3schools.com/htmldom/met_table_insertrow.asp resp. http://www.w3schools.com/htmldom/met_tablerow_insertcell.asp)Sv: Onchange, ny fält
Ursäkta mig men jag förstår faktiskt inget av det tidigare.
Jag skall visa min kod:
Det är en sökmotor.
<code>
<form name="form" method="post" action="sok.asp">
<input type="text" name="sokord">
<select name="kategori">
<!-- #include file="kategori.asp" -->
</select>
<select name="kategori">
<!-- #include file="stad.asp" -->
</select>
<input type="submit" name="Submit" value="<%= Sok %>">
</form>
</code>
I kategori väljer jag tex bilar.
Då skall den nya koden se ut såhär:
<code>
<form name="form" method="post" action="sok.asp">
<input type="text" name="sokord">
<select name="kategori">
<!-- #include file="kategori.asp" -->
</select>
<select name="kategori">
<!-- #include file="stad.asp" -->
</select>
<input type="text" name="arsmodell">
<input type="submit" name="Submit" value="<%= Sok %>">
</form>
</code>
Tacksam för svar.Sv:Onchange, ny fält
<html>
<head>
<title></title>
<script language="javascript">
function categoryChanged(obj) {
// Create reference to tag.
var dynField = document.getElementById("dynFields");
// Remove all tags.
for(var i=0; i<dynFields.childNodes.length; i++)
dynField.removeChild(dynField.childNodes[i]);
// Insert new HTML tag(s).
switch(obj.options[obj.selectedIndex].text) {
case "bilar":
var field = document.createElement("input");
field.type = "text";
field.name = "arsmodell";
dynField.appendChild(field);
break;
case "annat":
var field = document.createElement("input");
field.type = "button";
field.name = "minknapp";
field.text = "Knapp!";
dynField.appendChild(field);
break;
}
}
</script>
</head>
<body>
<form name="form" method="post" action="sok.asp">
<input type="text" name="sokord">
<select name="kategori" onchange="javascript:categoryChanged(this);">
<option>bilar</option>
<option>annat</option>
</select>
<br>
<span id="dynFields"></span>
<br>
<input type="submit" name="Submit" value="Sok">
</form>
</body>
</html>