Avatar billede jdjensen Juniormester
09. november 2011 - 20:31 Der er 11 kommentarer og
1 løsning

Samme formular flere gange på samme side skaber problemer

Hej,

Jeg har en php-side hvor jeg skal bruge den præcis samme formular flere forskellige steder på siden. Da det er den samme formular jeg skal genbruge har alle formularerne også samme labels, names, id'er og classes og det skaber nogle problemer. F.eks. virker min jquery validering ikke og før kunne man klikke på labels navnene og så hoppede markøren ned i det relateret formfelt. Dette virker ikke så snart formularen findes flere gange på siden.

Formularen ser således ud:

--------------------------------------------------------------

<form id="form" action="process.php" method="post">
<fieldset>

<div id="RegisterErrors" style="display:none"></div>

<label for="firstname">Fornavn <span class="dark-red bold">*</span></label>
<input type="text" name="firstname" id="firstname" class="text">

<label for="lastname">Efternavn <span class="dark-red bold">*</span></label>
<input type="text" name="lastname" id="lastname" class="text">

<label for="emailaddress">Email <span class="dark-red bold">*</span></label>
<input type="text" name="emailaddress" id="emailaddress" class="text">

<label for="answer">Svar <span class="dark-red bold">*</span></label>
<select name="answer" id="answer" class="select">
    <option value="">Vælg... </option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

<input type="submit" name="submit" class="button" value="Send" /><span class="dark-red bold">*</span> <small>skal udfyldes</small>

</fieldset>
</form>

--------------------------------------------------------------

Er der nogen nem måde at løse problemet på?
Avatar billede heinzdmx Nybegynder
09. november 2011 - 20:39 #1
Du må ikke have flere elementer med samme ID, ellers er det slet ikke valid HTML.

Den måde du kan løse det på er at genere formen med et bestemt tal efter hvert element. F.eks ville den første form blive:

<form id="form1" action="process.php" method="post">
<fieldset>

<div id="RegisterErrors1" style="display:none"></div>

<label for="firstname1">Fornavn <span class="dark-red bold">*</span></label>
<input type="text" name="firstname1" id="firstname1" class="text">
<!-- ... osv. ... -->
</fieldset>
</form>


jQuery har en selector der fanger alt der starter med noget bestemt.

http://api.jquery.com/attribute-starts-with-selector/
Avatar billede olebole Juniormester
09. november 2011 - 21:10 #2
<ole>

- men prøv at undgå at bruge den slags komplekse jQuery selectors, når det overhovedet er muligt. De performer temmelig skidt, så god, velovervejet struktur er stadig ligeså vigtig, som det altid har været  =)

/mvh
</bole>
Avatar billede jdjensen Juniormester
09. november 2011 - 21:22 #3
Ok det var det jeg frygtede jeg ville blive nød til.

Jeg kan dog lave disse 2 om til classes istedet (og dermed slippe for at skulle ændre dem):
id="form" > class="form"
id="RegisterErrors" > class="RegisterErrors"

Ang. labels kunne jeg nok undvære dem hvis der ikke er andre løsninger.

Der er dog stadig problemer med jquery validate plug-in'en: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Når jeg trykker på submit validerer den ikke felterne (når der er flere formularer på siden) og værdierne ryger bare direkte videre til min process.php fil.
Avatar billede olebole Juniormester
09. november 2011 - 22:16 #4
Du behøver ikke ID'er til labels:

<label>Noget tekst<input name="foo" type="text"></label>
Avatar billede olebole Juniormester
09. november 2011 - 22:19 #5
- og valideringen kan du vel selv skrive med ret få linjer JS(?)
Avatar billede jdjensen Juniormester
09. november 2011 - 22:46 #6
Tak olebole :) <label>Fornavn <span class="dark-red bold">*</span><input type="text" name="firstname" id="firstname" class="text"></label>

Jeg prøver at få lidt luft ind imellem Fornavn og textfield men css'en vil ik rigtig:

.form label {
display: block;
padding-bottom: 5px;
}

Men har fået løst valideringsproblemet så den kan validere på alle forms nu. :)
Avatar billede jdjensen Juniormester
09. november 2011 - 22:49 #7
Nevermind det er også løst nu.

heinzdmx vil du have points (nu olebole ikke samler på dem ;))
Avatar billede heinzdmx Nybegynder
09. november 2011 - 22:53 #8
Jeg smider et svar, omend at ole nok har været den største hjælp :)
Avatar billede olebole Juniormester
09. november 2011 - 22:55 #9
Jeg samler ikke, så det er helt fint  =)

Mit forslag på koden ville være noget i stil med:


<style type="text/css">
body {
    margin: 0;
    padding: 0;
    font: 0.8em verdana, arial, sans-serif;
}
.dark-red {
    color: #c00;
}
.bold {
    font-weight: bold;
}
.form label {
    display: block;
    padding-bottom: 5px;
}
.form label span {
    display: none;
}
</style>

<script type="text/javascript">
function validate(elmForm) {
    var aErr = [],
    elmDispl = document.getElementById("RegisterErrors");
    if (elmForm.firstname.value=="") {
        elmForm.firstname.nextSibling.style.display = "inline";
        aErr.push("dit fornavn");
    }
    else elmForm.firstname.nextSibling.style.display = "none";
    if (elmForm.lastname.value=="") {
        elmForm.lastname.nextSibling.style.display = "inline";
        aErr.push("dit efternavn");
    }
    else elmForm.lastname.nextSibling.style.display = "none";
    if (elmForm.emailaddress.value=="") {
        elmForm.emailaddress.nextSibling.style.display = "inline";
        aErr.push("din e-mail-adresse");
    }
    else elmForm.emailaddress.nextSibling.style.display = "none";
    if (elmForm.answer.value=="") {
        elmForm.answer.nextSibling.style.display = "inline";
        aErr.push("et svar");
    }
    else elmForm.answer.nextSibling.style.display = "none";
    if (aErr.length>0) {
        if (aErr.length>1) {
            var sLast = aErr.pop();
            elmDispl.firstChild.nodeValue = "Husk at angive "+aErr.join(", ")+" og "+sLast;
        } else {
            elmDispl.firstChild.nodeValue = "Husk at angive "+aErr.join(", ");
        }
        elmDispl.style.display = "block";
        return false;
    }
    return true;
}
</script>
<form class="form" action="process.php" method="post" onsubmit="return validate(this)">
<fieldset>

<div id="RegisterErrors" style="display:none">&nbsp;</div>

<label>Fornavn <input type="text" name="firstname" class="text"><span class="dark-red bold">*</span></label>

<label>Efternavn <input type="text" name="lastname" class="text"><span class="dark-red bold">*</span></label>

<label>Email <input type="text" name="emailaddress" class="text"><span class="dark-red bold">*</span></label>

<label>Svar <select name="answer" class="select">
    <option value="">Vælg... </option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select><span class="dark-red bold">*</span></label>

<input type="submit" name="submit" class="button" value="Send" /><span class="dark-red bold">*</span> <small>skal udfyldes</small>

</fieldset>
</form>

Avatar billede olebole Juniormester
09. november 2011 - 22:57 #10
Den kræver et &nbsp; i div'et, der viser fejl - og så, at span'ene ligger lige i måsen på input elementerne
Avatar billede jdjensen Juniormester
09. november 2011 - 23:54 #11
Tak til begge. :) Og tak for valideringsscriptet olebole. Som altid nogle gode løsninger man får fra dig. :)
Avatar billede olebole Juniormester
10. november 2011 - 00:16 #12
Selvtak, men det kan stadig slankes og 'sexes' lidt op ... men det er et udgangspunkt  =)
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