Notifikationer

Markér alle som læst Log ud

Calle5463 Forsker

24. marts 2012 - 12:13 Der er 16 kommentarer og
1 løsning

onChange i formular med mange felter

Haves: Form med "mange" felter.
Ønske: Ved ændring af data i et (tilfældigt) felt, ønskes visning af knap for "Gem data".
Kan det gøres uden at skulle indsætte "onChange" på samtlige felter i formen?

Synes godt om

olsensweb.dk Ekspert

24. marts 2012 - 12:43 #1

træder først i kræft når du forlader det felt du skriver i


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title></title>
    <style type="text/css">
    </style>
    <script type="text/javascript">    
    function EnableSend(){
        alert("ændret");
        document.getElementById("send").disabled=false;
    }
    </script>
</head>
<body>
<form name="jette" action="#" onchange ="EnableSend();" >
  Tlf:              <input type="text" name="tlf">
  Navn:              <input type="text" name="navn">
  PostNummer:    <input type="text" name="postnummer">
  By:            <input type="text" name="bynavn">
  <input type="button" name="send" id="send" value="Gem Data" disabled="disable">
</form>
</body>
</html>

Synes godt om

Calle5463 Forsker

24. marts 2012 - 12:59 #2

#1 Det virker.
Tillægsspørgsmål: Jeg har et par af felterne den ikke skal reagere på - kan man disable den på de felter eller er jeg nødt til alligevel at implementere onchange på felt-niveau?

Synes godt om

olsensweb.dk Ekspert

24. marts 2012 - 13:08 #3

grupper dine felter det skal reagerer på
her pakket ind i span


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title></title>
    <style type="text/css">
    </style>
    <script type="text/javascript">    
    function EnableSend(){
        alert("ændret");
        document.getElementById("send").disabled=false;
    }
    </script>
</head>
<body>
<form name="jette" action="#">
  <span id="test" onchange ="EnableSend();">
  Tlf:              <input type="text" name="tlf">
  Navn:              <input type="text" name="navn">
  PostNummer:    <input type="text" name="postnummer">
  </span>
  By:            <input type="text" name="bynavn">
  <input type="button" name="send" id="send" value="Gem Data" disabled="disable">
</form>
</body>
</html>

ovenstående reagerer ikke på ændringer i bynavn men ellers det sammen som #1

Synes godt om

olsensweb.dk Ekspert

24. marts 2012 - 13:26 #4

onchange="EnableSend();
bør måske rettes til
[b]onkeyup[b]="EnableSend();
så får du ændringen med det sammen og ikke først når feltet forlades

Synes godt om

olsensweb.dk Ekspert

24. marts 2012 - 13:27 #5

onchange="EnableSend();
bør måske rettes til
onkeyup="EnableSend();
så får du ændringen med det sammen og ikke først når feltet forlades

Synes godt om

olebole Juniormester

24. marts 2012 - 13:42 #6

<ole>

onchange på et FORM element er kun valid under HTML5.

Derudover forstår jeg slet ikke meningen med ønsket. Brugeren kan jo bare aktivere backspace i et felt - så kan formen submittes. Et alm. valideringsscript ville være mere logisk

/mvh
</bole>

Synes godt om

Calle5463 Forsker

24. marts 2012 - 13:59 #7

Der er kun een bruger (mig) af netop denne form.

Jeg arbejder ofte i et andet system, hvor de har lavet det sådan, at når man forlader et felt, gemmer den hvis der er sket ændringer - lidt irriterende ja, hvis man uforvarende har ændret noget.

Jeg fik i øvrigt ikke grupperingen med <span> til at virke.

Er det til at have med at gøre, at lave script der håndtere -
- tilladelse til at ændre i nogle felter
- forbud mod at ændre i alle øvrige felter (den skal bare ignorere ændringer)
- besked om, at der er ændret i tilladte felter og man skal huske at trykke gem inden man forlader den pågældende record (slår en ny op, forlader siden)

Synes godt om

olebole Juniormester

24. marts 2012 - 14:03 #8

Jeg er hermed blevet bestyrket i min opfattelse af, at et elm. valideringsscript ville give mere mening =)

Synes godt om

Calle5463 Forsker

24. marts 2012 - 14:45 #9

Det her er - stort set - mit første rigtige slagsmål med at lave noget formular der kan bruges til noget.
Ønsker om mange af funktionerne har det med at opstå i små bidder efterhånden som jeg finder ud af hvad jeg egentlig selv - måske - kan lave (med en hel del hjælp fra dette forum).

Formular for håndtering af kunder og ordrer samt formular med tilfredshedsskema

Pt een kunde, een ordre, men potentielt een kunde, flere ordrer

Tabel med kundeoplysninger (kundenr (unikt), navn, adresse-oplysninger, email, tlf, cvr-nr, firmanavn)
Som kundenr bruges cvr-nr for erhvervskunder, tlf for privatkunder (hænger sammen med mit kundekart. i mit økonomisystem)

Tabel med ordreoplysninger (kundenr, ordrenr, ordrestatus, oplysninger for fakturering (navn og adresse), opgave-adressen, opgave-indholdet)

Ved upload vises alle felter tomme og der fokuseres på et tomt felt for indtastning af kundenr. Når der indtastes et kundenr og feltet forlades (onchange), hentes og vises kunde- og ordreoplysninger. (Det virker :-) ) Hvis kundenr ikke er oprettet, er det meningen den skal bede om data, og efter indtastning af data bede om at de gemmes.

Hvis der er kunde/ordredata, må der ikke kunne rettes vigtige felter uden en ekstra advarsel (burde være beskyttet med PW, men da det kun er mig selv ...)

Nogle felter må rettes uden speciel advarsel.

Ved ændring af status - fx. til "Færdig", skal der sendes en email til kunden med et link til en tilfredshedsundersøgelse. (Linket skal medbringe ordrenummer og tilfredshedsskemaet skal bede om postnummer for opgaveadressen)

Synes godt om

Calle5463 Forsker

24. marts 2012 - 14:49 #10

- i øvrigt kan jeg ikke starte min diesel-traktor, der kommer ikke lys i lamperne når jeg drejer nøglen (batteriet er fuldt opladet og der komer lys i lygterne når de tændes).
Men det kan jeg nok ikke få hjælp til her :-D
Men solen skinner!

Synes godt om

olebole Juniormester

24. marts 2012 - 15:28 #11

Jeg skal lige forstå, hvad du mener med:

"Ved upload vises alle felter tomme og der fokuseres på et tomt felt for indtastning af kundenr. Når der indtastes et kundenr og feltet forlades (onchange), hentes og vises kunde- og ordreoplysninger. (Det virker :-) ) Hvis kundenr ikke er oprettet, er det meningen den skal bede om data, og efter indtastning af data bede om at de gemmes."

Synes godt om

Calle5463 Forsker

24. marts 2012 - 16:17 #12

- lidt i tvivl om hvad du vil have uddybet, men:
"ved upload" = når jeg starter med at vise siden

Hvis kunde og ordre ikke findes, kommer pt. en popup (alert) med besked om at kunde/ordre ikke findes. Her skal jeg have mulighed for at vælge at indtaste et andet nummer eller at oprette en kunde og ordre. Ved valg af opret, er det måske nemmest at få en ny formular, med de nødvendige felter, men det vil "se godt ud" hvis det er den samme formular jeg bruger til det hele.

Forskellen på "opret" og "opdater" er (sålænge jeg har en-til-en kunde/ordre), at den ved opret skal give et ordrenummer til ordren.

Hjælper det eller ... ?

Synes godt om

olsensweb.dk Ekspert

24. marts 2012 - 19:48 #13

#7 Jeg fik i øvrigt ikke grupperingen med <span> til at virke.
det virker på min localhost i nyeste FF og IE under win7

#8 vi er enige om at man bør lave en form-validation onsubmit, samt selvføgelig validering af bruger input serverside, men jeg kan da godt se ide'en med man først skal kunne trykke på kanppen når der er lavet ændring i formen

@Calle5463 at bygge er komplet CRM (Customer Relationship Management) system helt fra bunden er nok lidt optimistisk med din nuværende viden om HTML, JS, CSS, PHP
hvis du anvender et Content Management system (CMS) kan du sikkert også finde nogle add-on's til dette

prøv at google
php crm
php crm open source
php ajax crm
1 link http://sourceforge.net/projects/epesi/ ser interessant

Synes godt om

mireigi Novice

02. april 2012 - 00:58 #14

Det her kan gøre hvad du søger:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script type="text/javascript">
var formOldValues = new Array();

function enableValidation()
{
var myForm = document.getElementById("myForm");
var fields = myForm.getElementsByTagName("input");
for (var i = 0; i < fields.length; i++)
{
var field = fields.item(i);
if (field.type == "text" && field.className.indexOf("NoValidate") < 0)
{
field.onkeyup = function () { toggleButtons(this); };
formOldValues[field.name] = field.value;
}
}
}

function toggleButtons(caller)
{
if (formOldValues[caller.name] != caller.value)
{
var myButtons = document.getElementById("FormButtons");
myButtons.style.display = "";
}
}
</script>
</head>
<body onload="enableValidation();">
<form id="myForm" action="">
<table border="0">
<tr>
<td>
First name:
</td>
<td>
<input type="text" name="FirstName" class="InputField" />
</td>
</tr>
<tr>
<td>
Last name:
</td>
<td>
<input type="text" name="LastName" class="InputField" />
</td>
</tr>
<tr>
<td>
Age:
</td>
<td>
<input type="text" name="Age" class="InputField NoValidate" />
</td>
</tr>
<tr id="FormButtons" style="display: none;">
<td colspan="2">
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>
</body>
</html>

De felter du ikke vil have valideret, giver/tilføjer du "NoValidate" i [/i]class[/i] attributten (uden "").

OleBole har sikkert nogle indspark til ovenstående.. Han er lidt hård til det der Web 2.0 :)

Synes godt om

Calle5463 Forsker

02. april 2012 - 16:23 #15

#14 mireigi, smid et svar - det ligner RIGTIG MEGET det jeg havde i tankerne

Synes godt om

mireigi Novice

02. april 2012 - 16:52 #16

Det var så lidt.

Som sagt skal det måske finpudses lidt, så vil lige vente med at afgive et svar førend Ole har givet lidt feedback :)

Synes godt om

mireigi Novice

04. april 2012 - 09:34 #17

Det lader til at Ole ikke har nogle indspark, så jeg smider et svar, så du kan få lukket :)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS