Anzeige

jQuery -> if else abfrage + neuladen problem

jQuery -> if else abfrage + neuladen problem | PSD-Tutorials.de

Erstellt von puur, 28.04.2010.

  1. puur

    puur Nicht mehr ganz neu hier

    Dabei seit:
    06.10.2007
    Beiträge:
    175
    Geschlecht:
    männlich
    jQuery -> if else abfrage + neuladen problem
    Hi, ich hab hier ein einfaches Formular mit input feld das über jQ - ajax in die Datenbank eingetragen wird. Ich möchte nun bei success den zurückgelieferten wert prüfen und darauf hin meine Nachricht an den User anpassen (war die Eingabe erfolgreich oder nicht). Das klappt, allerdings möchte ich bei einem Fehler die Fehlernachricht anzeigen und nach ca. 10sekunden soll wieder das Formular geladen werden, das bekomm ich nicht hin.

    Dazu hier mein Code:

    INDEX.PHP
    HTML:
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    3.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    4.  
    5. <html xmlns="http://www.w3.org/1999/xhtml">
    6.     <head>
    7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    8.     <title>Portfolio </title>
    9.     <link rel="stylesheet" href="css/template.css" type="text/css" />
    10.     <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    11.  
    12.     <script type="text/javascript">
    13.         $(document).ready(function(){
    14.             $("form#submitform").submit(function() {
    15.             // we want to store the values from the form input box, then send via ajax below
    16.             var fname     = $('#email').attr('value');
    17.  
    18.                 $.ajax({
    19.                     type: "POST",
    20.                     url: "ajax.php",
    21.                     data: "fname="+ fname,
    22.                     success: function(result){
    23.                         $('#formElemWrap').fadeOut('slow', function() {
    24.                             if(result == '1') {
    25.                                 $('#postBack').append('Your email has been stored.');
    26.                             }
    27.                             if(result == '2') {
    28.                                 $('#postBack').append('Oops there was a problem storing your email.');
    29.                             }
    30.                             if(result == '3') {
    31.                                 $('#postBack').append('Please enter a valid email address.');
    32.                             }
    33.                             $('#postBack').fadeIn(1250);
    34.                         });
    35.                     }
    36.                 });
    37.             return false;
    38.             });
    39.         });
    40.     </script>
    41.  
    42. </head>
    43.     <div id="container">
    44.         <div id="header">
    45.             <div id="logo"><img src="Bilder/logo.jpg" alt="Logo P" title="Logo P" /></div><!-- EOF logo -->
    46.             <div id="nav">
    47.                 <div id="border-left">&nbsp;</div><!-- EOF border-left -->
    48.                 <div id="navBg">
    49.                     <ul id="navigation">
    50.                         <li id="home">Home</li>
    51.                         <li id="service">Service</li>
    52.                         <li id="aboutUs">About Us</li>
    53.                         <li id="contact">Contact</li>
    54.                         <li id="faq">FAQ</li>
    55.                     </ul>
    56.                 </div><!-- EOF navBg -->
    57.             </div><!-- EOF nav -->
    58.         </div><!-- EOF header -->
    59.         <div id="preview">
    60.  
    61.  
    62.             <!-- LAUNCHING PAGE -->
    63.  
    64.  
    65.             <div id="mainContentWrap">
    66.                 <div id="launch">
    67.                     <div class="mainBoxLaunchingText">
    68.                         <img src="Bilder/contBoxLaunchText.png" alt="We‘re not quite there yet - but we‘re getting there ! - and really want you to know when we‘re ready. Here‘s how to stay updated:" title="stay updated" />
    69.                         <br />
    70.                     </div>
    71.  
    72.                     <div id="form" style="display: block;">
    73.                         <form id="submitform" method="post" style="display: block;" action="">
    74.                             <div id="formElemWrap">
    75.                                 <div id="email1" style="float: left; margin-top: -4px; margin-right: 10px;"><label for="email" style="margin-top: -4px;"><img src="Bilder/email.png" alt="" /></label></div>
    76.                                 <div id="email2" style="float: left;"><input type="text" id="email" name="email" /></div>
    77.                                 <div id="sub" style="float: left; margin-top: -4px; margin-left: 10px;"><input type="image" src="Bilder/a_subscribe.png" id="submit" /></div>
    78.                             </div>
    79.                             <ul id="success"><li id="postBack" style="display: none">&nbsp;</li></ul>
    80.                         </form>
    81.                     </div>
    82.                 </div>
    83.             </div><!-- EOF mainContentWrap -->
    84.             <div id="sidebarWrap">
    85.                 <div class="sidebarBoxWrap">
    86.                     <div class="sbWhiteBorder">&nbsp;</div>
    87.                     <div class="sidebarTop">&nbsp;</div>
    88.                     <div class="sidebarRep">&nbsp;</div>
    89.                     <div class="sidebarFoot">&nbsp;</div>
    90.                 </div><!-- EOF sidebarBoxWrap -->
    91.             </div><!-- EOF sidebarWrap -->
    92.  
    93.     </div><!-- EOF container -->
    94. </body>
    95. </html>
    96.  
    Ajax.php
    PHP:
    1.  
    2. <?php
    3.     include ("db/database.php");
    4.     $database = new database();
    5.  
    6.     // CLIENT INFORMATION
    7.     $fname        = htmlspecialchars(trim($_POST['fname']));
    8.     $pattern = '/^[^@]+@[a-zA-Z0-9._-]+\.[a-zA-Z]+$/';
    9.  
    10.     if(preg_match($pattern, $fname)) {
    11.         $addClient  = "INSERT INTO launch (email) VALUES ('$fname')";
    12.         $set = $database->setQuery($addClient);
    13.         if($set) {
    14.             $success = 1;
    15.             echo $success;
    16.         } else {
    17.             $success = 2;
    18.             echo $success;
    19.         }
    20.     } else {
    21.         $success = 3;
    22.         echo $success;
    23.     }
    24. ?>
    25.  
    26.  
     
    #1      
  2. Mondfrau

    Mondfrau Nicht mehr ganz neu hier

    Dabei seit:
    24.02.2006
    Beiträge:
    54
    Geschlecht:
    weiblich
    jQuery -> if else abfrage + neuladen problem
    AW: jQuery -> if else abfrage + neuladen problem

    hallöle...

    hab ja nicht ganz so viel ahnung davon... aber ich würde in der index.php bei den 3 if-abfragen stattdessen ein switch case verwenden...

    grüße
    mondfrau
     
    #2      
  3. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    jQuery -> if else abfrage + neuladen problem
    AW: jQuery -> if else abfrage + neuladen problem

    Deine if-Abfragen sind wirklich nicht schön, zumal immer alle durchlaufen werden, auch wenn die erste schon true ist. Also, entweder "else", oder ne "switch-case" (break nicht vergessen) wie schon erwähnt oder gar nichts abfragen. Geht nämlich auch so, erstell ein Array mit deinen Fallantworten:

    HTML:
    1. var message = new Array('Your email has been stored.','Oops there was a problem storing your email.','Please enter a valid email address.');
    und dann gibst du den jeweiligen Text aus:

    HTML:
    1. $('#postBack').append(message[result]);
    musst natürlich schauen, das du dann 0,1 usw. übergibst oder result-1 schreibst.
    Und zu deinem eigentlichen Problem, wie wärs mit dem naheliegenden?

    HTML:
    1. $('#postBack').fadeIn(1250,function(){/*warte 10 sek und mach dann was anderes*/});
    Die function kannst dir ja jetzt selbst schreiben ;)
     
    #3      
  4. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    jQuery -> if else abfrage + neuladen problem
    AW: jQuery -> if else abfrage + neuladen problem

    Das sollte doch mit .delay() gut machbar sein. Formular ausblenden, Fehlermeldung einblenden, Delay von 10s, Fehlermeldung ausblenden, Formular einblenden.


    Duddle
     
    #4      
  5. puur

    puur Nicht mehr ganz neu hier

    Dabei seit:
    06.10.2007
    Beiträge:
    175
    Geschlecht:
    männlich
    jQuery -> if else abfrage + neuladen problem
    AW: jQuery -> if else abfrage + neuladen problem

    ah cool das mit dem Array gefällt mir :) also ist bei jQuery der numArray index: 0,1 : 0,2 : 0,3 usw. ?
     
    #5      
  6. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    jQuery -> if else abfrage + neuladen problem
    AW: jQuery -> if else abfrage + neuladen problem

    warum nicht einfach
    Code (Text):
    1.  
    2. var msg = new Array(
    3. '',
    4. 'Your email has been stored.',
    5. 'Oops there was a problem storing your email.',
    6. 'Please enter a valid email address.'
    7. );
    8.  
    und
    Code (Text):
    1.  
    2. $('#postBack').append(msg[result]);
    3.  
    4.  
     
    #6      
  7. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    jQuery -> if else abfrage + neuladen problem
    AW: jQuery -> if else abfrage + neuladen problem

    Nein alle Arrays (in den mir bekannten Sprachen) werden, sofern nicht anders angegeben so, beginnend mit 0 und dann 1, 2, 3, 4,............,x numeriert.

    Edith sagt, hab ich mich wohl zu undeutlich ausgedrückt oben, habs grad selbst gesehn ;)
     
    Zuletzt bearbeitet: 28.04.2010
    #7      
  8. puur

    puur Nicht mehr ganz neu hier

    Dabei seit:
    06.10.2007
    Beiträge:
    175
    Geschlecht:
    männlich
    jQuery -> if else abfrage + neuladen problem
    AW: jQuery -> if else abfrage + neuladen problem

    ou ja okay.. da hab ich das mit dem 0,1 falsch verstanden :)

    also ich muss jetzt aber leider zugeben das ich das mit dem delay nicht hinbekomme, habs mit delay und setTimeout probiert hat leider beides nicht geklappt. zudem ist mir noch aufgefallen das wenn ich das form nach einer fehlermeldung erneut abesende ich 2 fehlermeldungen hintereinander bekomme. (Please enter a valid email address.Please enter a valid email address.)

    also ich bin noch nicht dahinter gestiegen vielleicht kann mir ja nochmal jemand unter die arme greifen :)

    HTML:
    1.  
    2.  
    3.     <script type="text/javascript">
    4.         $(document).ready(function(){
    5.             $("form#submitform").submit(function() {
    6.             // we want to store the values from the form input box, then send via ajax below
    7.             var fname     = $('#email').attr('value');
    8.             var message      = new Array('Your email have been stored.', 'Oops there was a problem saving your email.', 'Please enter a valid email address.');
    9.                 $.ajax({
    10.                     type: "POST",
    11.                     url: "ajax.php",
    12.                     data: "fname="+ fname,
    13.                     success: function(result){
    14.                         $('#formElemWrap').fadeOut('slow', function() {
    15.                             $('#postBack').append(message[result-1])
    16.                         });
    17.  
    18.                         $('#postBack').fadeIn(1250);
    19.                         $setTimeout(function(){
    20.                             $('#postBack').fadeOut('slow', function(){
    21.                                 $('#formElemWrap').fadeIn('slow');
    22.                             });
    23.                         }, 5000);
    24.                     }
    25.                 });
    26.             return false;
    27.             });
    28.         });
    29.     </script>
    30.  
    *EDIT sorry war falscher code nochma den neuen reingestellt.
     
    Zuletzt bearbeitet: 28.04.2010
    #8      
  9. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    jQuery -> if else abfrage + neuladen problem
    AW: jQuery -> if else abfrage + neuladen problem

    Erstmal, wenn du statt ".append" (zu deutsch "anhängen") ".text" verwendest ;)
    Den Rest muss ich mir grad mal in Ruhe anschauen.
     
    #9      
  10. puur

    puur Nicht mehr ganz neu hier

    Dabei seit:
    06.10.2007
    Beiträge:
    175
    Geschlecht:
    männlich
    jQuery -> if else abfrage + neuladen problem
    AW: jQuery -> if else abfrage + neuladen problem

    hmm cebito erstma danke für deine Hilfe, das mit dem setTimeout habe ich hinbekommen ich musste einfach nur das $ vorm setTimeout entfernen das gehört da garnicht hin :)

    für die doppelte Fehlermeldung brauche ich aber hilfe.

    HTML:
    1.  
    2.                         setTimeout(function(){
    3.                             $('#postBack').fadeOut('slow', function(){
    4.                                 $('#formElemWrap').fadeIn('slow');
    5.                             });
    6.                         }, 5000);
    7.  
    Okay einwandfrei mit .text funktionierts. Vieelen dank für die hilfe das war ganz schön anstrengend fürs erste jquery projekt :)
     
    Zuletzt bearbeitet: 28.04.2010
    #10      
  11. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    jQuery -> if else abfrage + neuladen problem
    AW: jQuery -> if else abfrage + neuladen problem

    Dann ist ja alles in Butter :daumenhoch::lol:
     
    #11      
x
×
×