html - Form deaktiveret når select - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

<< < 1 2 > >>

Bruger #5708 @ 04.08.04 22:21

Jeg har denne kode:

<tr>
<td>
<select name="category" class="form">
<option value="none">Ikke angivet</option>
<option value="noget">noget</option>
<option value="nogetandet">nogetandet</option>
</select>
</td>
</tr>
<tr>
<td>
<p class="text">
<input type="text" name="category2" maxlength="30" class="form" size="30">
</p>
</td>
</tr>

Så er det jeg gerne vil spørge om en lille ting...selvfølig

...

Kunne det lade sig gøre: At når man har valgt en ting (en option) i select-"menuen", at tekst-formularen nede under, så bliver deaktiveret så man ikke kan skrive noget i den... Forstået??

Altså man skal kun kunne skrive i tekstformularen nedunder hvis man ikke har valgt noget i select-feeltet... Eller det kan jo ikke lade sig gøre ikke at vælge noget, men når feltet: Ikke angivet er valgt, skal formularen nedenunder være, og når noget andet end Ikke angivet er valgt skal den være deaktiveret så man ikke kan skrive i den!!!

Jeg er idiot til Javascript...så hvis man kan skære det HELT ud i pap, ville det være dejligt

Bruger #5426 @ 04.08.04 22:47

430

Det burde kunne lade sig gøre med noget JavaScript der aktivere en readonly hvis et felt er valgt..
Er dog ikk selv så skarp til det..

//Emilbp

Bruger #5708 @ 04.08.04 22:56

Jeg fik dette link.. me det kunne ikke lige det med select
http://www.codetoad.com/javascript/enable_disable_form_element.asp

Bruger #2086 @ 05.08.04 12:28

126

Jeg fik dette link.. me det kunne ikke lige det med select
http://www.codetoad.com/javascript/enable_disable_form_element.asp

Bruger #2086 @ 05.08.04 12:33

126

Jeg fik dette link.. me det kunne ikke lige det med select
http://www.codetoad.com/javascript/enable_disable_form_element.asp

Dit problem er at du ikke har et form element i din html.
derfor kan du ikke referere til dine input og select elementer fordi, at du ikke navngiver formen.
Jeg har brugt kode ekssemplet fra dit link og tilrettet det lidt og det virker fint.
jeg har også tilføjet et form element og navngivet det "form1"

her er koden:

<html>
<head>
<title> new document </title>
<script language="javascript">

function enableField()
{
document.form1.category2.disabled=true;
}

</script>

</head>

<body>
<table>
<form name="form1">
<tr>
<td>
<select name="category" onChange="enableField()">
<option value="none">Ikke angivet</option>
<option value="noget">noget</option>
<option value="nogetandet">nogetandet</option>
</select>
</td>
</tr>
<tr>
<td>
<p class="text">
<input type="text" name="category2" maxlength="30" class="form" size="30">
</p>
</td>
</tr>
</form>
</table>
</body>
</html>

MVH
Claus Pryds
http://www.cws-webservice.dk

for at gøre koden lidt mere korrekt skal du nok ændre funktionens navn til disableField()

;o)

MVH
Claus Pryds
http://www.cws-webservice.dk

Bruger #5708 @ 05.08.04 20:51

Det burde jeg hnok have sagt, men det er kun et udklip af koden

Prøver lige med det!

Bruger #5708 @ 08.08.04 18:45

Dit problem er at du ikke har et form element i din html.
derfor kan du ikke referere til dine input og select elementer fordi, at du ikke navngiver formen.
Jeg har brugt kode ekssemplet fra dit link og tilrettet det lidt og det virker fint.
jeg har også tilføjet et form element og navngivet det "form1"

her er koden:

<html>
<head>
<title> new document </title>
<script language="javascript">

function enableField()
{
document.form1.category2.disabled=true;
}

</script>

</head>

<body>
<table>
<form name="form1">
<tr>
<td>
<select name="category" onChange="enableField()">
<option value="none">Ikke angivet</option>
<option value="noget">noget</option>
<option value="nogetandet">nogetandet</option>
</select>
</td>
</tr>
<tr>
<td>
<p class="text">
<input type="text" name="category2" maxlength="30" class="form" size="30">
</p>
</td>
</tr>
</form>
</table>
</body>
</html>

MVH
Claus Pryds
http://www.cws-webservice.dk

for at gøre koden lidt mere korrekt skal du nok ændre funktionens navn til disableField()

;o)

MVH
Claus Pryds
http://www.cws-webservice.dk

Det virker NÆSTEN fint... bortset fra Èn lille ting. Når man først har valgt ngoet i select-boksen og så vælger ikke angivet igen, kan man stadig ikke skrive i den.

Der skal være en eller anden kommando ved den der <option value="none"..... der slår formen under til. Jeg er jo en amatør til javascripts, så... den kan jeg ikke lige selv fikse, men jeg har da udtænkt ideen

til at det skal være i den option hvoor der skal være en eller andet: OnChoice="disableField()" (choice er bare noget jeg har fundet på)...

[Redigeret d. 08/08-04 18:50:52 af AdvancedWeb.dk]

Bruger #2086 @ 09.08.04 14:15

126

Det virker NÆSTEN fint... bortset fra Èn lille ting. Når man først har valgt ngoet i select-boksen og så vælger ikke angivet igen, kan man stadig ikke skrive i den.

Der skal være en eller anden kommando ved den der <option value="none"..... der slår formen under til. Jeg er jo en amatør til javascripts, så... den kan jeg ikke lige selv fikse, men jeg har da udtænkt ideen til at det skal være i den option hvoor der skal være en eller andet: OnChoice="disableField()" (choice er bare noget jeg har fundet på)...

[Redigeret d. 08/08-04 18:50:52 af AdvancedWeb.dk]

Ikke noget problem.

Jeg har ændret lidt i funktionen og i funktions kaldet sender man så en parameter med der indeholder value egenskaben for den valgte option.

Koden står her under:

<html>
<head>
<script language="javascript">

function enableField(sel_opt)
{
if (sel_opt == "noget" || "nogetandet")
{
document.form1.category2.disabled=true;
}
if (sel_opt == "none")
{
document.form1.category2.disabled=false;
}
}

</script>

</head>

<body>
<table>
<form name="form1">
<tr>
<td>
<select name="category" onChange="enableField(this.options[this.selectedIndex].value)">
<option value="none">Ikke angivet</option>
<option value="noget">noget</option>
<option value="nogetandet">nogetandet</option>
</select>
</td>
</tr>
<tr>
<td>
<p class="text">
<input type="text" name="category2" maxlength="30" class="form" size="30">
</p>
</td>
</tr>
</form>
</table>
</body>
</html>

der er sikkert andre måde at gøre det på men denne her virker som jeg tror du have den til.

MVH
Claus Pryds
http://www.cws-webservice.dk

Bruger #5708 @ 09.08.04 19:10

Ikke noget problem.

Jeg har ændret lidt i funktionen og i funktions kaldet sender man så en parameter med der indeholder value egenskaben for den valgte option.

Koden står her under:

<html>
<head>
<script language="javascript">

function enableField(sel_opt)
{
if (sel_opt == "noget" || "nogetandet")
{
document.form1.category2.disabled=true;
}
if (sel_opt == "none")
{
document.form1.category2.disabled=false;
}
}

</script>

</head>

<body>
<table>
<form name="form1">
<tr>
<td>
<select name="category" onChange="enableField(this.options[this.selectedIndex].value)">
<option value="none">Ikke angivet</option>
<option value="noget">noget</option>
<option value="nogetandet">nogetandet</option>
</select>
</td>
</tr>
<tr>
<td>
<p class="text">
<input type="text" name="category2" maxlength="30" class="form" size="30">
</p>
</td>
</tr>
</form>
</table>
</body>
</html>

der er sikkert andre måde at gøre det på men denne her virker som jeg tror du have den til.

MVH
Claus Pryds
http://www.cws-webservice.dk

Det virker lige som det skal. Tusind tak for hjælpen. Jeg har tænkt mig at gå i gang med at lære lidt grundlæggende JavaScript, men det her var lidt "akut"

Men Tak :-p
www.advancedweb.dk

Bruger #5708 @ 09.08.04 22:21

Det virkede ikke hlet alligevel

Jeg havde kunne lige testet det i én fil, hvor der KUN stod overstående kode, og dervirkede det fint.
MEN jg skal have sat det ind i en anden fil, der bruger PHP, og henter ned fra databaser og alt muligt.

1. Her er et udklip af koden

Kode

    <form action="index.php?site=links-ok" name="new_link" method="post">
    <tr>
     <td>
     <p class="text"><b>Titel:</b></p>
     </td>
    </tr>
    <tr>
     <td>
     <p class="text">
     <input type="text" name="title" maxlength="55" class="form" size="30">
     </p>
     </td>
    </tr>
    <tr>
     <td>
     <p class="text"><b>Beskrivelse:</b></p>
     </td>
    </tr>
    <tr>
     <td>
     <p class="text">
     <input type="text" name="description" maxlength="255" class="form" size="30">
     </p>
     </td>
    </tr>
    <tr>
     <td>
     <p class="text"><b>URL:</b></p>
     </td>
    </tr>
    <tr>
     <td>
     <p class="text">
     <input type="text" name="url" value="http://" maxlength="255" class="form" size="30">
     </p>
     </td>
    </tr>
    <tr>
     <td>
     <p class="text"><b>Kategori:</b></p>
     </td>
    </tr>
    <tr>
     <td>
     <select name="category" class="form" onChange="enableField(this.options[this.selectedIndex].value)">
      <option value="">Ikke angivet</option>
<?
 while($row_cat = mysql_fetch_array($result_cat)) {

  $category = $row[category];
?>
      <option value="<?$category?>"><?$category?></option>
<?
 }
?>
     </select>
     </td>
    </tr>
    <tr>
     <td>
     <p class="text">
     <input type="text" name="category2" maxlength="30" class="form" size="30">
     </p>
     </td>
    </tr>
    <tr>
     <td> </td>
    </tr>
    <tr>
     <td>
     <p class="text">
     <input type="submit" name="link" value="Tilføj Link" class="button">
     </p>
     </td>
    </tr>
    </form>

Og scriptet i headeren ser således ud:

Kode

<script language="javascript"> 

function enableField(sel_opt) 
{ 
if (sel_opt == "noget" || "nogetandet") 
{ 
document.new_link.category2.disabled=true; 
} 
if (sel_opt == "") 
{ 
document.new_link.category2.disabled=false; 
} 
} 

</script>

¨
I linie 5 (JavaScriptet), skal der stå en liste med alle de forskellige "option'er"... men den henter den ned fra en database nede ved selve select-koden, så det er ikke så smaret t man skal skrive alle option'erne i javascriptet

Bruger #2086 @ 10.08.04 14:38

126

Det virkede ikke hlet alligevel

Kode

    <form action="index.php?site=links-ok" name="new_link" method="post">
    <tr>
     <td>
     <p class="text">[b]Titel:[/b]</p>
     </td>
    </tr>
    <tr>
     <td>
     <p class="text">
     <input type="text" name="title" maxlength="55" class="form" size="30">
     </p>
     </td>
    </tr>
    <tr>
     <td>
     <p class="text">[b]Beskrivelse:[/b]</p>
     </td>
    </tr>
    <tr>
     <td>
     <p class="text">
     <input type="text" name="description" maxlength="255" class="form" size="30">
     </p>
     </td>
    </tr>
    <tr>
     <td>
     <p class="text">[b]URL:[/b]</p>
     </td>
    </tr>
    <tr>
     <td>
     <p class="text">
     <input type="text" name="url" value="http://" maxlength="255" class="form" size="30">
     </p>
     </td>
    </tr>
    <tr>
     <td>
     <p class="text">[b]Kategori:[/b]</p>
     </td>
    </tr>
    <tr>
     <td>
     <select name="category" class="form" onChange="enableField(this.options[this.selectedIndex].value)">
      <option value="">Ikke angivet</option>
<?
 while($row_cat = mysql_fetch_array($result_cat)) {

  $category = $row[category];
?>
      <option value="<?$category?>"><?$category?></option>
<?
 }
?>
     </select>
     </td>
    </tr>
    <tr>
     <td>
     <p class="text">
     <input type="text" name="category2" maxlength="30" class="form" size="30">
     </p>
     </td>
    </tr>
    <tr>
     <td> </td>
    </tr>
    <tr>
     <td>
     <p class="text">
     <input type="submit" name="link" value="Tilføj Link" class="button">
     </p>
     </td>
    </tr>
    </form>

Og scriptet i headeren ser således ud:

Kode

<script language="javascript"> 

function enableField(sel_opt) 
{ 
if (sel_opt == "noget" || "nogetandet") 
{ 
document.new_link.category2.disabled=true; 
} 
if (sel_opt == "") 
{ 
document.new_link.category2.disabled=false; 
} 
} 

</script>

Først kommer du med en stump af noget html kode.
Derefter lidt mere html kode.
Tilsidst kommer du så med nogle oplysninger om dit PHP script.

Hvorfor i alverden fortæller du ikke hele historien med det samme ???????????

Så havde jeg sikkert sluppet for at side og scripte i blinde !!

Det er undskyld udtrykket sgu da for dumt !!!

Men i Javascript opfattes de options der er indeholdt i et select element som et array det vil sige at:

det navn du giver select elementet i dette tilfælde "category" kan du bruge til at finde den valgte option med.

Det array der retuneres vil derfor indeholde dine options på denne måde : category[0] for den første option category[1] for nummer 2 option osv.

prøv dig lidt frem med denne ide.

MVH
Claus Pryds
http://www.cws-webservice.dk

<< < 1 2 > >>

Form deaktiveret når select

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler