Avatar billede mbs- Nybegynder
13. juni 2012 - 13:06 Der er 17 kommentarer og
1 løsning

Kontakt formular med jQuery dialog/popup

Eksperter!

Håber på der er en venlig sjæl derude der kan hjælpe mig med noget kontakt formular. Er ikke så skarp til alt det JavaScript. Vil meget gerne ha en jQuery popup funktion, når man har trykket "Send besked" - Er det muligt?

Mail scriptet er i PHP og er her
http://mbstech.dk/mail_form.php
Lige nu er der blot en sort baggrund der kommer frem når man trykker "Send besked" - det ser ikke ud til jeg lige kan se hvordan man kan modificere det nu værende.

Det jeg så er ude efter, er at når man som sagt trykker "Send besked" (og der kommer en popup/dialog) så skal denne funktion komme frem
http://mbstech.dk/modal-window.html (Klik på sticky note)

Vil blive lykkelig hvis der lige var en der havde tid til at kigge på det, som er skarp til JavaScript og PHP.

På forhånd mange tak
Mvh. Michael Bay Sørensen
Avatar billede olsensweb.dk Ekspert
13. juni 2012 - 23:54 #1
Avatar billede mbs- Nybegynder
14. juni 2012 - 08:51 #2
Igen er du jo min redning :)

Mange tusind tak for hjælpen endnu en gang. Det er lige som jeg vil ha det. Dog kan jeg se at der hele tiden står "Fejl ved afsendelse af mail" - Den giver en fejl lige nu, hvis jeg udfylder alt. (Popup)

Er det muligt at få ind ligesom før? F.eks hvis man mangler at udfylde telefon nr, ja så skriver popuppen det.

Kan heller ikke umiddelbart se hvor henne jeg putter min mail ind, så jeg kan teste det.
Avatar billede olsensweb.dk Ekspert
14. juni 2012 - 13:32 #3
valideringen er lavet rent serverside, men du bør også lave det clientside, og da du har valgt at bruge jquery, vil det være nærliggende at bruge det til dette også
prøv at google jquery form validation
fordelen ved at validere clienside er at data ikke er sendt til serveren, og dermed spare serveren for unødigt arbejde, dog må en clientside validering ikke stå alene, da js kan slåes fra eller der kna være fejl i dit js der bevirker js springes over.

kig feks på disse 2
http://docs.jquery.com/Plugins/Validation
http://www.javascript-coder.com/html-form/javascript-form-validation.phtml

clientside validering er for brugerens skyld, serverside validering er for din sikkerheds skyld.

jeg kan se du bruger meget at skrive inde i et billed, men hvad hvis der ikke er plads i billedet ??
det ville være smart at skrive samtlige fejl med det sammen, frem for at stoppe ved den første
det kræver du kigger på array under PHP og JS

du bør måske kigge lidt på http://jqueryui.com/demos/dialog/#modal-message
måske http://www.1stwebdesigner.com/freebies/ajax-lightbox-modal-dialog-solutions/

du kunne også droppe jquery og laved med rent CSS
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

Kan heller ikke umiddelbart se hvor henne jeg putter min mail ind, så jeg kan teste det.
if($error==0 && $val=="thismail"){
    $status =0;       
    // status er et svar på om din mail er sendt korretk eller ej, så det er her du skal indsætte dit mail kald
    // $status = mail()
    $msg=($status)? "mail sendt korrekt" : "fejl ved afsendelse af mail";       
}


du kan evt kigge på OleBole's function http://www.eksperten.dk/spm/961816 #3

link i #1 er opdateret
Avatar billede mbs- Nybegynder
14. juni 2012 - 15:03 #4
Hmm... Det er altså underligt. Virker slet ikke længere. Har bare taget det direkte fra source

http://mbstech.dk/rono/mail_form.php

Kan se at der er validering på "Comment" også - Det er ikke nødvendigt. Den kan jo godt være tom, hvis ikke man har lyst til at skrive en kommentar.

Forresten så vil det være en rigtig god idé hvis der kun kommer 1 popup frem. Hvor der så står: "Du mangler adresse" "Du mangler navn" "Du mangler telefon" altså alle dem man mangler at udfylde. Præcis som du siger.

Men jeg vil prøve og kigge på CSS funktionen. Fordi nu har jeg brugt halvanden time på at få noget til at virke, som ikke virker :(
Avatar billede mbs- Nybegynder
14. juni 2012 - 15:17 #5
Ja okay. Det ser en del nemmere ud.

http://mbstech.dk/rono/popup.html

Faktisk tror jeg bare jeg vælger den løsning. Er gået i gang med at udskifte mit jQuery, der hvor jeg har det. Det her er meget nemmere, og kører mere smooth faktisk.

Men jeg vil stadigvæk gerne ha hjælp til at implantere det i mail scriptet. Jeg vil meget gerne betale dig for at lave jobbet. Har alligevel givet 200 kroner for mail scriptet fra en bruger på Amino, så lidt mere fra eller til gør ikke noget. Vil bare ha noget der virker.

Altså sådan så der kommer 1 popup når man trykker "Send besked" - og i den popup er der ALLE fejlmeldinger. Præcis som du siger.

Peace, Michael
Avatar billede olsensweb.dk Ekspert
15. juni 2012 - 11:55 #6
her er første udkalst,
jeg droppede det css, og jquery, og lavede en simpel js alertbox, til at vise fejl beskederne i.
jeg har lavet noget js validering på felterne, og implamenteret OleBole's mail-utf8 (utested)

der skal testes for evt ulovlige tegn i de forskællige felter
du skal lave noget spam fælde: her er 3 forslag
1) et skjult felt, er det udfyldt er det en bot
2) et simpelt regne stykke, ved forkert udfyldelse kan det være en bot, eller en der ikke kan regne, manglende ydfyldels en der har overset det
3) anvende captcha

source http://experten.olsensweb.dk/964466/964466.zip
Avatar billede mbs- Nybegynder
15. juni 2012 - 12:08 #7
http://mbstech.dk/popupmail/

Først og fremmest ser det ikke ud til at virke i andet end i Firefox. I Opera, Chrome og IE viser den blot alert boksen. Ingen fade i baggrunden.
I Firefox ser det okay ud. Dog synes jeg den boks er lidt grim, og passer ikke ind i mit design. Synes heller ikke om den grå farve.

Den første test viser at der IKKE kommer nogle alert boks op når man har indtastet alle ting i felterne. Det må der gerne så man ved man har sendt en besked af sted.

Til dit spørgsmål om spam fælde vil det være fedt med et simpelt regnestykke.

Er det helt umuligt at lave scriptet så der kommer den boks op jeg linkede til her? http://mbstech.dk/rono/popup.html - Den kan jeg rigtig godt lide, og jeg kan nemt redigere i den (hvis det bliver implanteret i scriptet). Kan rigtig godt li at "bagsiden" bliver fadet lidt utydelig, og der kommer den sorte baggrund. Det er også pænest hvis man holder sig til en slags popup (synes jeg) og den alert boks passer ikke ind i den anden popup jeg har på siden.

Håber du forstår?

Mvh.
Avatar billede olsensweb.dk Ekspert
15. juni 2012 - 19:18 #8
prøv at se på source fra #6
Avatar billede mbs- Nybegynder
16. juni 2012 - 11:14 #9
#8 For dælen da! Endnu engang er du min redning. Du sikker på du ikke vil skrive en lille regning til mig, så har jeg det bedre med min samvittighed?

Det ser ud til at virke, og jeg er vild med den funktion hvori man IKKE kan trykke send besked, før felterne er udfyldt. Det kanon.

Du har været til en stor hjælp, og det vil jeg  ikke glemme. Tak!

Smid et svar, så får du lidt point.

Peace, Michael
Avatar billede mbs- Nybegynder
16. juni 2012 - 11:41 #10
Jeg mangler lige en enkelt ting fra dig. Hvis det er noget du kan klare.

Når jeg har indtastet alle felterne og trykket "Send besked" - ja så sender den fint mail og alt andet. Men når jeg så trykker "Close" i popuppen, står der stadigvæk Navn, telefon og mail i felterne. Er der mulighed for at det kan blive fjernet hver gang?

Mvh. Michael
Avatar billede mbs- Nybegynder
16. juni 2012 - 12:45 #11
Sorry for lidt spam, men jeg har brugt lidt tid på at teste det, og der er faktisk en enkelt ting der er lidt irreterende hvor jeg igen beder om din hjælp ;)

http://mbstech.dk/index.php
Har jeg hurtig lige lagt scriptet ind i en div for at illustrere hvordan den opfører sig. For den side hvor scriptet skal placeres i, er nemlig også i en div.

Problemet opstår når man har trykket "Send besked" og der kommer popup frem. Popup skærmen kommer kun i den div man har lagt sriptet i - ikke over det hele, som den skal gøre.

(har prøvet både ved hjælp af php include, samt selve html koden)

Desuden kan man også trykke F5, også sender den beskeden igen hvis man bliver ved. Det er lidt træls for at sige det på godt jysk.
Avatar billede olsensweb.dk Ekspert
16. juni 2012 - 14:11 #12
#9 Du sikker på du ikke vil skrive en lille regning til mig, så har jeg det bedre med min samvittighed?
ville kræve jeg drev selvstændig virksomhed, og det gør jeg ikke, men det kan være jeg skulle gører det her når jeg falder for dagpengene, jeg ved jeg ikke kan få kontanthjælp.

#10
der er pga jeg echo værdierne ud her, da jeg gerne ville have værdierne bliver husket, hvis der mangles at udfylde felter (php validering)
<input type="text" id="name" name="name" value="<?php echo $name ?>"><br /><br />
<input type="text" id="mail" name="mail" value="<?php echo $mail ?>"><br /><br />
<input type="text" id="phone" name="phone" value="<?php echo $phone ?>"><br /><br />


løsning 1 er slette værdierne
<input type="text" id="name" name="name" value=""><br /><br />
<input type="text" id="mail" name="mail" value=""><br /><br />
<input type="text" id="phone" name="phone" value=""><br /><br />


løsning 2 slet felterne hvis mailen bliver sendt
if($val=="thismail" && $error === 0){         
        $message=$name." har dette nummer ".$phone."skriver følgende: ".$comment." kontaktes via ".$method;
        $from=$name."<".$mail.">";
        $sent = @mail_utf8("mail@mbstech.dk", "Meddelelse fra hjemmeside", $message, $from);
        $ErrorMsg[]=(!$sent)? "fejl ved afsendelse af mail" : "mail afsendt korrekt";
        $error++;   
}


laves om til 
if($val=="thismail" && $error === 0){         
        $message=$name." har dette nummer ".$phone."skriver følgende: ".$comment." kontaktes via ".$method;
        $from=$name."<".$mail.">";
        $sent = @mail_utf8("mail@mbstech.dk", "Meddelelse fra hjemmeside", $message, $from);
        if (!$sent) {           
            $ErrorMsg[]="fejl ved afsendelse af mail";           
        }
        else{
            $ErrorMsg[]="mail afsendt korrekt";           
            $name="";
            $mail="";
            $phone="";           
        }
        $error++;   
}


#11
Problemet opstår når man har trykket "Send besked" og der kommer popup frem. Popup skærmen kommer kun i den div man har lagt sriptet i - ikke over det hele, som den skal gøre.
kræver en del omskrivningn

Desuden kan man også trykke F5, også sender den beskeden igen
http://www.eksperten.dk/spm/952715
http://www.eksperten.dk/spm/506735
http://www.udvikleren.dk/forum/28643/opdater-side,-sender-fx-mail-igen/
Avatar billede mbs- Nybegynder
16. juni 2012 - 16:32 #13
- ville kræve jeg drev selvstændig virksomhed (...)
(Dumme system...) Men du må jo godt tjene lidt skattefrit om året. What so ever, vil jeg hvert fald gerne betale for din ulejlighed.

- løsning 2 slet felterne hvis mailen bliver sendt (...)
Det gjorde tricket. Der ændres vel heller ikke noget i valideringen så?

- kræver en del omskrivning (...)
Æv bæv. Det var næsten det værste af det hele. Der hvor det skal være, er i en div på 200x290px. Det bliver popup effekten også. Der er slet ikke en nem løsning?

- desuden kan man også trykke F5 (...)
"Løsning 2" hjalp på F5 situationen.
Avatar billede mbs- Nybegynder
16. juni 2012 - 17:08 #14
Ved du hvad. Jeg klarer den.

Laver jo bare en lille popup hvor der står om mail er blevet afsendt. Så dropper jeg det fade in/out halløj og giver bare den samme baggrunds farve i div'en.

Du får mange tusind tak igen. Jeg vil helt klart tænke på dig når jeg har nogle opgaver der rækker ud over min erfaring. Som sagt vil jeg gerne betale.

Peace
Avatar billede olsensweb.dk Ekspert
16. juni 2012 - 17:52 #15
#13 Det gjorde tricket. Der ændres vel heller ikke noget i valideringen så?
nej, det er først efter alt andet er valideret man kigger på mail delen, dvs alle felterne er OK, når man kigger på mail.

#14 >Jeg vil helt klart tænke på dig når jeg har nogle opgaver der rækker ud over min erfaring
lyder godt.
jeg bor i 2700 Brønshøj, har baggrund som it supporter 8 års erfaring, en uddannelse som datamatiker, og en last for PHP, jeg er sags løser ikke dispacher
rutine er godt, men hverdagen må ikke være rutine.
må hellere ligge et svar så tråden kan lukkes
Avatar billede mbs- Nybegynder
16. juni 2012 - 17:59 #16
Ahh okay. Det lyder godt. Jeg har ydermere fået lavet sådan at der står "Indsæt navn her..." i feltet navn (osv.)

Men jeg kan faktisk se at der mangler noget validering på "name" - Har lige prøvet og sende en via scriptet, hvor jeg havde udfyldt det hele. På nær navnet. Hvis man bare går ned i bot feltet og skriver "12", kommer der også kun frem at det er "email og telefon" der mangler at blive udfyldt. Navn er rimelig vigtig :)

Et job som freelancer er jo også der hvor de forskellige jobs ligger, og udfordringerne.
Avatar billede olsensweb.dk Ekspert
16. juni 2012 - 18:53 #17
hvis der står noget i name feltet (value), ja så er det ikke tomt, og det er det du tester på.
der er 2 løsninger på dette:
1) ret op på dit script så det tester på blankt og default text
i js
if (document.formular.name.value == "") {
    ErrorMsg.push("Navn Mangler at blive udfyldt");
    ErrorCount++;
}


laves om til
if ( (document.formular.name.value == "") || (document.formular.name.value == "Indsæt navn her...") ) {
    ErrorMsg.push("Navn Mangler at blive udfyldt");
    ErrorCount++;
}


i PHP
if($name==""){        
    $ErrorMsg[]="navn ikke udfyldt";       
    $error++;
}


laves om til
if( ($name=="") || ($name=="Indsæt navn her...") ){        
    $ErrorMsg[]="navn ikke udfyldt";       
    $error++;
}


2) brug html 5 attributten placeholder
hvis du anvender html < 5 skal du også includerer et javascript
https://github.com/NV/placeholder.js


<input type="text" id="name" name="name" value="<?php echo $name ?>"><br /><br />

laves om til

<input type="text" id="name" name="name" placeholder="indtast dit navn" value="<?php echo $name ?>"><br /><br />


de 2 link fra http://www.eksperten.dk/spm/962685 #1
http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text
http://caniuse.com/input-placeholder
Avatar billede mbs- Nybegynder
16. juni 2012 - 19:10 #18
Ahh ja. Det kan jeg egentlig godt se logikken i.

Tusind tak, endnu en gang :)

Fortsat god weekend og held og lykke med sommerens grill vejr.

Peace, Michael
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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