/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Vis form-felt hvis checkbox = true
Fra : Neuhafen @ Neuhafen.~


Dato : 07-10-06 18:16

Hej NG,


Jeg har lavet et spørgeskema på min hjemmeside.
En af valgmulighederne er ANDET.

Jeg vil gerne lave en funktion, som viser et text-felt hvis der sættes hak i
checkboxen.
Feltet skal fjernes igen, hvis man fjerner hakket...

Jeg kan ikke umiddelbart lige finde en løsning på denne opgaver...

Er der en i dette forum som har en smart måde at gøre det på ?


Neuhafen



 
 
Bertel Lund Hansen (07-10-2006)
Kommentar
Fra : Bertel Lund Hansen


Dato : 07-10-06 22:52

Neuhafen @ Neuhafen.dk skrev:

> Jeg vil gerne lave en funktion, som viser et text-felt hvis der sættes hak i
> checkboxen.
> Feltet skal fjernes igen, hvis man fjerner hakket...

Det er det der kaldes en dynamisk side, og det kan ikke laves i
HTML.

Det fikseste er at lave det i JavaScript. Det virker med det
samme. Det kan også laves med serversidescript, men så går der et
sekund med at genhente siden.

Jeg kan ikke hjælpe med JavaScript, men du kan spørge om det i
dk.edb.internet.webdesign.clientside.

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

Thrane (08-10-2006)
Kommentar
Fra : Thrane


Dato : 08-10-06 20:48


"Neuhafen @ Neuhafen.dk" <neuhafen@neuhafen.dk> wrote in message
news:4527e0dc$0$3453$edfadb0f@dread11.news.tele.dk...
> Hej NG,
>
>
> Jeg har lavet et spørgeskema på min hjemmeside.
> En af valgmulighederne er ANDET.
>
> Jeg vil gerne lave en funktion, som viser et text-felt hvis der sættes hak
> i checkboxen.
> Feltet skal fjernes igen, hvis man fjerner hakket...
>
> Jeg kan ikke umiddelbart lige finde en løsning på denne opgaver...
>
> Er der en i dette forum som har en smart måde at gøre det på ?
>
>
> Neuhafen
>
>


Ikke helt det du søger:

Tekstboxen er der hele tiden, men der kan ikke skrives i den før checkboxen
er "vinget af"...
http://www.mcfedries.com/JavaScript/DisablingControls.asp

Er sikker på det virker, dog gør den ikke i IE7

Ellers er der her noget længere kode:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<head>
<title>Javascript</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript">
<!--

var containerTag = 'TR';

var compatible = (
document.getElementById && document.getElementsByTagName &&
document.createElement
&&
!(navigator.userAgent.indexOf('MSIE 5') != -1 &&
navigator.userAgent.indexOf('Mac') != -1)
);

if (compatible)
{
document.write('<style>.accessibility{display: none}</style>');
var waitingRoom = document.createElement('div');
}

var hiddenFormFieldsPointers = new Object();

function prepareForm()
{
if (!compatible) return;
var marker = document.createElement(containerTag);
marker.style.display = 'none';

var x = document.getElementsByTagName('select');
for (var i=0;i<x.length;i++)
addEvent(x[i],'change',showHideFields)

var x = document.getElementsByTagName(containerTag);
var hiddenFields = new Array;
for (var i=0;i<x.length;i++)
{
if (x[i].getAttribute('rel'))
{
var y = getAllFormFields(x[i]);
x[i].nestedRels = new Array();
for (var j=0;j<y.length;j++)
{
var rel = y[j].getAttribute('rel');
if (!rel || rel == 'none') continue;
x[i].nestedRels.push(rel);
}
if (!x[i].nestedRels.length) x[i].nestedRels = null;
hiddenFields.push(x[i]);
}
}

while (hiddenFields.length)
{
var rel = hiddenFields[0].getAttribute('rel');
if (!hiddenFormFieldsPointers[rel])
hiddenFormFieldsPointers[rel] = new Array();
var relIndex = hiddenFormFieldsPointers[rel].length;
hiddenFormFieldsPointers[rel][relIndex] = hiddenFields[0];
var newMarker = marker.cloneNode(true);
newMarker.id = rel + relIndex;
hiddenFields[0].parentNode.replaceChild(newMarker,hiddenFields[0]);
waitingRoom.appendChild(hiddenFields.shift());
}

setDefaults();
addEvent(document,'click',showHideFields);
}

function setDefaults()
{
var y = document.getElementsByTagName('input');
for (var i=0;i<y.length;i++)
{
if (y[i].checked && y[i].getAttribute('rel'))
intoMainForm(y[i].getAttribute('rel'))
}

var z = document.getElementsByTagName('select');
for (var i=0;i<z.length;i++)
{
if (z[i].options[z[i].selectedIndex].getAttribute('rel'))
intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('rel'))
}

}

function showHideFields(e)
{
if (!e) var e = window.event;
var tg = e.target || e.srcElement;

if (tg.nodeName == 'LABEL')
{
var relatedFieldName = tg.getAttribute('for') ||
tg.getAttribute('htmlFor');
tg = document.getElementById(relatedFieldName);
}

if (
!(tg.nodeName == 'SELECT' && e.type == 'change')
&&
!(tg.nodeName == 'INPUT' && tg.getAttribute('rel'))
) return;

var fieldsToBeInserted = tg.getAttribute('rel');

if (tg.type == 'checkbox')
{
if (tg.checked)
intoMainForm(fieldsToBeInserted);
else
intoWaitingRoom(fieldsToBeInserted);
}
else if (tg.type == 'radio')
{
removeOthers(tg.form[tg.name],fieldsToBeInserted)
intoMainForm(fieldsToBeInserted);
}
else if (tg.type == 'select-one')
{
fieldsToBeInserted = tg.options[tg.selectedIndex].getAttribute('rel');
removeOthers(tg.options,fieldsToBeInserted);
intoMainForm(fieldsToBeInserted);
}
}



function intoWaitingRoom(relation)
{
if (relation == 'none') return;
var Elements = hiddenFormFieldsPointers[relation];
for (var i=0;i<Elements.length;i++)
{
waitingRoom.appendChild(Elements[i]);
if (Elements[i].nestedRels)
for (var j=0;j<Elements[i].nestedRels.length;j++)
intoWaitingRoom(Elements[i].nestedRels[j]);
}
}

function intoMainForm(relation)
{
if (relation == 'none') return;
var Elements = hiddenFormFieldsPointers[relation];
for (var i=0;i<Elements.length;i++)
{
var insertPoint = document.getElementById(relation+i);
insertPoint.parentNode.insertBefore(Elements[i],insertPoint);
if (Elements[i].nestedRels)
{
var fields = getAllFormFields(Elements[i]);
for (var j=0;j<fields.length;j++)
{
if (!fields[j].getAttribute('rel')) continue;
if (fields[j].checked || fields[j].selected)
intoMainForm(fields[j].getAttribute('rel'));
}
}
}
}

function getAllFormFields(node)
{
var allFormFields = new Array;
var x = node.getElementsByTagName('input');
for (var i=0;i<x.length;i++)
allFormFields.push(x[i]);
var y = node.getElementsByTagName('option');
for (var i=0;i<y.length;i++)
allFormFields.push(y[i]);
return allFormFields;
}

/** ULTRA-SIMPLE EVENT ADDING **/

function addEvent(obj,type,fn)
{
if (obj.addEventListener)
obj.addEventListener(type,fn,false);
else if (obj.attachEvent)
obj.attachEvent("on"+type,fn);
}

addEvent(window,"load",prepareForm);



//-->
</script>



</head>

<body bgcolor="#ffffff">


<form action="">
<table class="example"><tbody><!-- Safari requires TBODY -->

<tr>
<td class="question">&nbsp;</td>
<td>
<input type="checkbox" name="country_other" id="country_other"
rel="other_country" /></td>
</tr>

<tr rel="other_country">
<td class="question">&nbsp;</td>
<td><input name="other_country" id="other_country" /></td>
</tr>

</tbody></table>
</form>

</body>
</html>





/Thrane



Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408847
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste