php - Fremvise fejl i php - jquery - Udvikleren.dk - Programmering, webdesign og grafik

Tags: jquery php

<< < 1 2 > >>

Bruger #17136 @ 30.07.13 10:04

Hej Udvikleren.dk

det er sådan at jeg har fået hjælp en af god ven til noget jquery.

Det som jeg tænker at den skal gøre det er at klik man på submit knappen så hvis tekst indhold via post er tomt så skal den komme frem med en fejl og efter noget tid gå væk igen altså det er ligemeget med tiden lige nu bare sådan at jeg kan se det virker.

Jeg har tilføj:

JScript kode

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

CSS kode

 .fejlError {
     display: none;
     clear: both;
     text-align: center;
 }

JScript kode

 <script type="text/javascript">
 $(function() {
     var form = $('.tekstStatus'),
         required = form.find('.required'),
         button = form.find('.statusBox');
     
     button.on('click', function(e) {
         e.preventDefault();
         var container = $(this).parent(),
             status = true;
         
         container.find('.input').each(function() {
         var input = $(this),
             section = input.parent(),
             value = input.val(),
             error = section.find('.error')
         
             error.hide();
             
             if(value.length <= 0) {
                 error.fadeIn();
                 status = false;
             }
         });
         
         return status;
     });
 });
 </script>

PHP kode

 <div class="tekstStatus">
     <div class="container">
         <div class="section">
         <form name="loginOK" action="#" method="post">
             <?php
             if(isset($_POST["send"]))
             {
                 if($_POST["tekst"] != "")
                 {
                     echo "ligger ind i databasen";
                 }
                 else
                 {
                     echo "<span class=\"fejlError\">Du skal skrive noget tekst til status</span>";    
                 }
             }
             ?>
             <textarea name="tekst" class="input" cols="75" rows="7"></textarea>
             <input type="submit" name="send" value="Slå op" class="statusBox">
         </form>
         </div>
     </div>
 </div>

dog skal det lige siges at .tekstStatus gå længere nede af hvor der er noget mere kode til resten af siden. men det ikke så vigtigt.

Når jeg klik på submit så hvis tekst er tom skal den kom frem med fejlen.
Der sker intet overhovedet. der sker kun noget når jeg ligger det ind i databasen men det er ikke det jeg ønsker lige nu. jeg vil bare gerne have "fejlError" frem og fortælle brugeren at der er fejl i indhold.

Håber at du kan hjælp mig frem til hvad problemet er og hvor det ligge henne?

11 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 1 karma

Sorter efter stemmer Sorter efter dato

Bruger #17081 @ 30.07.13 16:54

1.258

JScript kode

 error = section.find('.error')
 
 // laves om til 
 
 error = section.find('.fejlError');

Så virker det hvis

Jeg har lavet en opdatering af koden:

HTML kode

 <!DOCTYPE html>
 <html>
 <head>
     <title>Jquery</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <style>
 .fejlError {
     display: none;
     clear: both;
     text-align: center;
 }
 
 
 </style>
 
 
 
 <script type="text/javascript">
 $(function() {
     var $form = $('.form'),
         $button = $form.find('.statusBox');
 
     $button.on('click', function(e) {
         var status = true;
 
         $form.find('.input.required').each(function() {
             var $input = $(this),
                 $section = $input.parent(),
                 $value = $input.val(),
                 $error = $section.find('.fejlError');
 
             $error.hide();
 
             if($value.length <= 0) {
                 $error.fadeIn();
                 status = false;
                 setTimeout(function() {
                         $error.fadeOut();
                 }, 8000);
             }
         });
 
         return status;
     });
 });
 </script>
 </head>
 <body>
 <div class="tekstStatus ">
     <div class="container">
         <div class="section">
         <form class="form" name="loginOK" action="#" method="post">
             <ul>
                 <li class="section">
                     <div class="fejlError">Hello World1</div>
                     <textarea name="tekst" class="input required" cols="75" rows="7"></textarea>
                 </li>
 
                  <li class="section">
                     <div class="fejlError">Hello World2</div>
                     <textarea name="tekst" class="input" cols="75" rows="7"></textarea>
                 </li>
             </ul>
             <input type="submit" name="send" value="Slå op" class="statusBox">
         </form>
         </div>
     </div>
 </div>
 
 </body>
 </html>

Indlæg senest redigeret d. 30.07.2013 17:20 af Bruger #17081

Bruger #17081 @ 30.07.13 10:30

1.258

lad være med, at sætte display:none på .fejlError class'en ...

Indlæg senest redigeret d. 30.07.2013 10:31 af Bruger #17081

Bruger #17136 @ 30.07.13 11:44

lad være med, at sætte display:none på .fejlError class'en ...

Hej Dan.

det hjælper ikke

jeg har selv prøve at sæt den til/fra.

Hvis jeg tag den her væk

JScript kode

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

så kan den godt komme frem men den gider så bare ikke gå væk

Indlæg senest redigeret d. 30.07.2013 11:47 af Bruger #17136

Bruger #17081 @ 30.07.13 13:08

1.258

meget nemmere hvis du har et link til siden hvor det er. Ud fra det du har vist. Bliver .fejlError skjult når du trykker submit. Men når du trykker submit bliver siden også genindlæst og så skulle knappen gerne blive vist igen hvis du fjerner css'en som gemmer den ...

Bruger #16742 @ 30.07.13 13:17

JScript kode

 $(function() {
      var form = $('.tekstStatus'),
          required = form.find('.required'),
          button = form.find('.statusBox');
      
      button.on('click', function(e) {
          e.preventDefault();
          var container = $(this).parent(),
              status = true;
          
          $("form[name='loginOK']").find('.input').each(function() {
          var input = $(this),
              section = input.parent(),
              value = input.val(),
              error = section.find('.fejlError');
          
              error.hide();
              
              if(value.length <= 0) {
                  error.fadeIn();
                  status = false;
              }else{
                  error.hide();
              }
          });
          
          return status;
      });
  });

Er det noget ligesom dette?

Bruger #16075 @ 30.07.13 13:22

1.223

Hvis jeg tag den her væk
Kode
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
så kan den godt komme frem men den gider så bare ikke gå væk

det er da klart, da det er hele jquery fortolkeren du så ikke indlæser, og det der måtte blive læst/vist/skjult via jquey bliver ikke fortolket

som dan skriver kom med et link

Bruger #17136 @ 30.07.13 13:45

Link

PHP kode

 <div class="tekstStatus">
     <div class="container">
         <div class="section">
         <form name="loginOK" action="#" method="post">
             <?php
             if(isset($_POST["send"]))
             {
                 if($_POST["tekst"] != "")
                 {
                     echo "Det er i databasen nu";
                 }
                 else
                 {
                     echo "<span class=\"fejlError\">Du skal skrive noget tekst til status</span>";    
                 }
             }
             ?>
             <textarea name="tekst" class="input" cols="75" rows="7"></textarea>
             <input type="submit" name="send" value="Slå op" class="statusBox">
         </form>
         </div>
     </div>
 </div>

JScript kode

 <script type="text/javascript">
 $(function() {
     var form = $('.tekstStatus'),
         required = form.find('.required'),
         button = form.find('.statusBox');
     
     button.on('click', function(e) {
         e.preventDefault();
         var container = $(this).parent(),
             status = true;
         
         container.find('.input').each(function() {
         var input = $(this),
             section = input.parent(),
             value = input.val(),
             error = section.find('.error')
         
             error.hide();
             
             if(value.length <= 0) {
                 error.fadeIn();
                 status = false;
             }
         });
         
         return status;
     });
 });
 </script>

CSS kode

 .fejlError {
     clear: both;
     text-align: center;
 }

den her er hvor jeg har tilføj bare

JScript kode

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Men du kan se hvad der sker her

spørger hvis i gerne vil have mere eller andre spørgsmål. jeg har dog give alt hvad jeg har af kode.

Bruger #17081 @ 30.07.13 13:49

1.258

jah... du behøver jo ikke jquery til det... hvis du alligevel ikke gør brug af AJAX til, at sende formen afsted med.

men prøv at fjerne "e.preventDefault();" ... det gør, at formen ikke reagere overhovedet. og det bruger du jo allerede status til.

Bruger #17136 @ 30.07.13 13:54

jah... du behøver jo ikke jquery til det... hvis du alligevel ikke gør brug af AJAX til, at sende formen afsted med.

men prøv at fjerne "e.preventDefault();" ... det gør, at formen ikke reagere overhovedet. og det bruger du jo allerede status til.

det er væk nu, altså linket til jquery,

Hvad mener du helt med "hvis du alligevel ikke gør brug af AJAX til, at sende formen afsted med."

så den skulle se sådan her ud:

JScript kode

 <script type="text/javascript">
 $(function() {
     var form = $('.tekstStatus'),
         required = form.find('.required'),
         button = form.find('.statusBox');
     
     button.on('click', function(e) {
         var container = $(this).parent(),
             status = true;
         
         container.find('.input').each(function() {
         var input = $(this),
             section = input.parent(),
             value = input.val(),
             error = section.find('.error')
         
             error.hide();
             
             if(value.length <= 0) {
                 error.fadeIn();
                 status = false;
                 setTimeout(function() {
                         error.fadeOut();
                     }, 1000);
             }
         });
         
         return status;
     });
 });
 </script>

Bruger #17081 @ 30.07.13 14:07

1.258

du skal stadig have linket til jquery ellers vil din javascript ikke fungere som den står der.

Men dit javascript og dit html passer heller ikke helt sammen. Din ven har lavet det meget dynamisk på den måde han har lavet det på. hvor du kan bruge flere input felter og hvor hver input felt skal pakkes ind i en div. og det har du ikke lavet i dit eksempel.

<< < 1 2 > >>

Fremvise fejl i php - jquery

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler