Avatar billede TumseMM Nybegynder
24. juli 2011 - 11:14 Der er 12 kommentarer og
1 løsning

Styling variabler

Hej Eksperten.dk

Hvordan får man teksten til at være rød når der er en variabel?
F.eks her:

    $error = "De 2 kodeord er ikke ens!";

Kunne godt tænke mig en rød error.

Hvordan gør man det?
Avatar billede Slettet bruger
24. juli 2011 - 11:40 #1
En "sexet" måde er at ændre baggrundsfarven på det tekst-felt der er galt.

Lidt hurtigt og utestet:
function valider()
  {
  var fejl = false
  if (document.loginForm.navn == "")
    {
    fejl = "\nDu glemte navn"
    document.getElementById("NAVN").style.backgroundColor="#F88" // lyserød
    }
  if (document.loginForm.pw1.value != document.loginForm.pw2.value)
    {
    fejl = "\nDe 2 kodeord er ikke ens"
    document.getElementById("PW1").style.backgroundColor="#F88"
    document.getElementById("PW2").style.backgroundColor="#F88"
    }
  if (fejl != "")
    {
    alert("Fejl:"+fejl)
    return false
    }
  return true
  }

<form name="loginForm" action="login.php" onsubmit="return valider()">
<input type="text" name="navn" id="NAVN" onfocus="this.style.backgroundColor='#FFF'">
<input type="password" name="pw1" id="PW1" onfocus="this.style.backgroundColor='#FFF'">
<input type="password" name="pw2" id="PW2" onfocus="this.style.backgroundColor='#FFF'">
</form>
Avatar billede olsensweb.dk Ekspert
24. juli 2011 - 17:21 #2
Som TOM skriver er JS en oplagt løsning, men skulle det være PHP er her et bud:
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
    .ErrorBgColor{
        background-color: yellow;
    }
    .DefaultBgColor{
        background-color: white;
    }   
    </style>   
</head>
<body>
<?php
$pwcolor="DefaultBgColor";
$usernamecolor="DefaultBgColor";

$submit= $_POST['register'];
if($submit=="Registrer"){
    $username = $_POST['username'];   
    $pw1 = $_POST['password1'];
    $pw2 = $_POST['password2'];
    $error=0;
   
    if($pw1 != $pw2){
        echo "De 2 kodeord er ikke ens!";
        $pwcolor = "ErrorBgColor";
        $error=1;
    }
    if($pw1 == ""){
        echo "De har ikke indtasted et kodeord!";
        $pwcolor = "ErrorBgColor";
        $error=1;
    }
    if($username == ""){   
        echo "De har ikke indtasted et brugernavn!";
        $usernamecolor="ErrorBgColor";
        $error=1;
    }   
}
?>

<form action='<?php echo $_SERVER['PHP_SELF']?>' method='post'>
<table>
    <tr>
        <td>Brugernavn: </td>
        <td><input type="text" name="username" class="<?php echo $usernamecolor; ?>" value="<?php echo $username; ?>" ><br></td>
    </tr>
    <tr>
        <td>Password: </td>
        <td><input type="password" name="password1" class="<?php echo $pwcolor; ?>" value="<?php echo $pw1; ?>"><br></td>
    </tr>
    <tr>
        <td>Gentag password: </td>
        <td><input type="password" name="password2" class=" <?php echo $pwcolor; ?>" value="<?php echo $pw2; ?>"><br></td>
    </tr>
    <tr>
        <td><input name="register" type="submit" value="Registrer"></td>
        <td></td>
    </tr>
</table>
</form>
</body>
</html>
Avatar billede TumseMM Nybegynder
24. juli 2011 - 18:17 #3
Mange tak for hjælpen. Men jeg fandt en meget mere enkel løsning :)

  {
    echo '<text style="color:red";>'."De 2 kodeord er ikke ens!".'</text>';
    $error=1;
    }
Avatar billede Slettet bruger
24. juli 2011 - 21:12 #4
Enklere for dig, ikke for brugeren som skal vente på at svaret kommer tilbage fra serveren, og derefter bakke, og taste forfra.
- med js får hun at vide hvad der er galt med det samme, uden at forlade formen.

Men ronols version kan også klare de tilfælde hvor fejlen ikke kan afsløres "på forhånd" (med js)
- ideelt set skal du bruge begge løsninger : )
Avatar billede TumseMM Nybegynder
24. juli 2011 - 21:35 #5
Kunne godt lyde rigtigt. Gav det et forsøg og endte ud med:


<?php

$submit= $_POST['register'];
if($submit=="Registrer")
{
    include('connect.php');
    $username = mysql_real_escape_string(strip_tags(htmlspecialchars($_POST['username'])));
    $password1 = md5($_POST['password1']);
    $pw1 = $_POST['password1'];
    $pw2 = $_POST['password2'];
    $error=0;
?>
<script type="text/javascript>
    function valider()
      {
      var fejl = false
      if (document.loginForm.navn == "")
        {
        fejl = "\nDu glemte navn"
        document.getElementById("NAVN").style.backgroundColor="#F88" // lyserød
        }
      if (document.loginForm.pw1.value != document.loginForm.pw2.value)
        {
        fejl = "\nDe 2 kodeord er ikke ens"
        document.getElementById("PW1").style.backgroundColor="#F88"
        document.getElementById("PW2").style.backgroundColor="#F88"
        }
      if (fejl != "")
        {
        alert("Fejl:"+fejl)
        return false
        }
      return true
      }

    <form name="loginForm" action="login.php" onsubmit="return valider()">
    <input type="text" name="navn" id="NAVN" onfocus="this.style.backgroundColor='#FFF'">
    <input type="password" name="pw1" id="PW1" onfocus="this.style.backgroundColor='#FFF'">
    <input type="password" name="pw2" id="PW2" onfocus="this.style.backgroundColor='#FFF'">
    </form>
    </script>

<?php
    $sql = "SELECT id FROM users WHERE username LIKE '".$username."'";
    $rs  = mysql_query($sql);
    if($rs)
    {
        if (mysql_num_rows($rs) == 1)
        {   
            echo  '<p style="color:red";>'."Brugernavnet er optaget!".'</p>';
        }   
    }
    if(!$error)
    {       
        $sql="INSERT INTO `users` (`username`,`password`) VALUES ('".$username."','".$password1."')";
        mysql_query($sql) or die(mysql_error());
        echo "Tillykke! Du er nu klar til at afslutte sætninger!";   

        echo "</body></html>";
        exit;
    }
}
?>

Det fungerer altså ikke. Når jeg ikke skriver noget i formen, skriver den bare "Tillykke! Du er nu klar til at afslutte sætninger!";  . Og jeg bliver redirectet til en ny hvid side. Var det meningen at jeg skulle blive i facebox formen? :)
Avatar billede Slettet bruger
24. juli 2011 - 22:15 #6
Feltnavnene er helt hen i vejret.
Formen ligger inden i script-blokken.
- til at begynde med : )
Avatar billede webweaver Praktikant
25. juli 2011 - 00:10 #7
#4 Man kan jo bare kode det, så man ikke skal "bakke". :)
Det vil sige, ved at lave det i 1 fil. Jeg laver altid min validering med PHP og outputtet heraf via CSS, som så meget andet styles med, istedet for JavaScript, da det ikke er nogen garanti, at det kører :)
Avatar billede olebole Juniormester
25. juli 2011 - 01:14 #8
<ole>

Brug JavaScript for brugerens skyld og PHP for din og din servers sikkerheds skyld. Er der en klient, der tilgår en af dine sider, og klienten ikke understøtter JavaScript, er der 99% sikkerhed for, det er en robot.

Det kan dog også være en af nettes 48 brugere, som slår JavaScript fra, men odds er næppe gode  *o)

/mvh
</bole>
Avatar billede TumseMM Nybegynder
25. juli 2011 - 09:52 #9
Kan ikke finde ud af om jeg skal bruge PHP eller Javascript ?

Har prøvet begge ting, men ingen af delene ser ud til at virke.
<div style="display:none" id="register">
    <form action='<?php echo $_SERVER['PHP_SELF']?>' method='POST'>
        <table>
            <tr>
                <td>Brugernavn: </td>
                <td><input type="text" name="username" class="<?php echo $usernamecolor; ?>" value="<?php echo $username; ?>" ><br></td>
            </tr>
            <tr>
                <td>Password: </td>
                <td><input type="password" name="password1" class="<?php echo $pwcolor; ?>" value="<?php echo $pw1; ?>"><br></td>
            </tr>
            <tr>
                <td>Gentag password: </td>
                <td><input type="password" name="password2" class=" <?php echo $pwcolor; ?>" value="<?php echo $pw2; ?>"><br></td>
            </tr>
            <tr>
                <td><input name="register" type="submit" value="Registrer"></td>
                <td></td>
            </tr>
        </table>
        </form>
    <?php
        echo $error;
    ?>
</div>
<?php

$submit= $_POST['register'];
if($submit=="Registrer")
{
    include('connect.php');
    $username = mysql_real_escape_string(strip_tags(htmlspecialchars($_POST['username'])));
    $password1 = md5($_POST['password1']);
    $pw1 = $_POST['password1'];
    $pw2 = $_POST['password2'];
    $pwcolor="DefaultBgColor";
    $usernamecolor="DefaultBgColor";
    $error=0;

    if($pw1 != $pw2)
    {
    echo "De 2 kodeord er ikke ens!";
    $pwcolor = "ErrorBgColor";
    $error=1;
    }
    if($pw1 == "")
    {
      echo "Du har ikke indtastet et kodeord!";
    $pwcolor = "ErrorBgColor";
    $error=1;
    }
    if($username == "")
    {
      echo "Du har ikke indtastet et brugernavn!";
    $usernamecolor="ErrorBgColor";
    $error=1;
    }
    $sql = "SELECT id FROM users WHERE username LIKE '".$username."'";
    $rs  = mysql_query($sql);
    if($rs)
    {
        if (mysql_num_rows($rs) == 1)
        {   
            echo  "Brugernavnet er optaget!";
        }   
    }
    if(!$error)
    {       
        $sql="INSERT INTO `users` (`username`,`password`) VALUES ('".$username."','".$password1."')";
        mysql_query($sql) or die(mysql_error());
        echo "Tillykke! Du er nu klar til at afslutte sætninger!";   

        echo "</body></html>";
        exit;
    }
}
?>

Der er ingen rød/gul error nu. Samtidig bliver man redirectet over til en ny hvid side hvor der står "Tillykke! Du er nu klar til at afslutte sætninger!";?

//TumseMM
Avatar billede TumseMM Nybegynder
25. juli 2011 - 09:53 #10
Og ja, jeg har sat css'en ind :) no worries ^^
Avatar billede olsensweb.dk Ekspert
25. juli 2011 - 12:39 #11
det der skriger i mine øjne er :
du starter med at angive du ikke vil vise siden (<div style="display:none" id="register">)
du udskriver din html code, før du begynder at teste om der er fejl.

så start med at fjerne din style, og bytte om på test blokken og html blokken


nb: dine indlæg vl blive nemmere at læse / overskue, hvis du indrammer din code i en blå box
(div)(pre)
her ville alting stå i en blå box, med en scroll bar i bunden, hvis der er behov for det, forudsat jeg havde brugt firkant paranteser istedet for runde paranteser
jeg har her kun smidt det ind i en div for at få en blå box
læs denne guide om bb tags på E http://www.eksperten.dk/guide/1325
(/pre)(/div)
Avatar billede TumseMM Nybegynder
13. oktober 2011 - 22:01 #12
lukker
Avatar billede olebole Juniormester
13. oktober 2011 - 22:11 #13
- bare sådan helt uden kommentarer af nogen art?
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