[JS]Form post locatie aanpassen

[Reb87]

Ik heb een leuke form gevonden met validatie die ik graag zou gebruiken voor een klein projectje. Alles werkt inmiddels prima, op één ding na. Bij de oude form was de post locatie entry.php. Dit bestand doet alles wat er moet gebeuren en geeft nog een echo van wat belangrijke informatie. Bij de nieuwe form voert hij alles uit, maar zie ik geen echo van entry.php. In plaats daarvan krijg ik een stukje tekst wat in de javascript file wordt gegeven.

JavaScript:

$(document).ready(function(){
    $("#submit").click(function(){                                     
        $(".error").hide();
        var hasError = false;
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        
        var subjectVal = $("#subject").val();
        if(subjectVal == '') {
            $("#subject").after('<span class="error">Je bent vergeten een bonnummer in te voeren.</span>');
            hasError = true;
        }
        
        var messageVal = $("#message").val();
        if(messageVal == '') {
            $("#message").after('<span class="error">Je bent vergeten een omschrijving in te voeren.</span>');
            hasError = true;
        }
        
        
        if(hasError == false) {
            $(this).hide();
            $("#sendEmail li.buttons").append('<img src="loading.gif" alt="Loading" id="loading" />');
            
            $.post("entry.php",
                { subject: subjectVal, message: messageVal },
                    function(data){
                        $("#sendEmail").slideUp("normal", function() {                 
                            
                            $("#sendEmail").before('<h1>Success</h1><p>De opdracht is ingevoerd.</p>'); 
                            
                        });
                    }
                 );
        }
        
        return false;
    });                        
});

Als ik de code aanpas, bijvoorbeeld door achter de "De opdracht is ingevoerd" een variabele te zetten dan laat hij helemaal niets meer zien. Verander ik de hele functie naar een window.navigate dan werkt de form validatie niet meer.

Ik heb wat dingen bekeken waaronder het doorgeven van PHP variabelen naar javascript, maar ook dat lijkt niet te werken (zie: http://stackoverflow.com/...-external-javascript-file ).

Het gevoel besluipt me dat ik heel moeilijk doe over iets heel simpels, vandaar dat ik me afvroeg of iemand er even naar zou kunnen kijken en me wellicht de goede richting op kan wijzen?

De form die ik gebruik is hier te vinden: http://trevordavis.net/play/jqueryajaxform/

[Cartman!]

Reb87 schreef op donderdag 03 mei 2012 @ 12:14:
Ik heb een leuke form gevonden met validatie die ik graag zou gebruiken voor een klein projectje.

Even aan de auteur vragen hoe het werkt dus

[Barryvdh]

Je wil het resultaat zien van entry.php, bedoel je dat?
Want nu post je de gegevens inderdaad naar entry.php, maar het resultaat dat je terugkrijgt (de variabele data), laat je nergens zien, alleen het de tekst dat het gelukt is.
Anders moet je zoiets doen als

code:

 $("#sendEmail").before(data);

Of bedoel je dat niet?

[Verwijderd]

Heb je zonder het te bedoelen een normale form submit omgetoverd naar een Ajax form submit? Verwacht je dat de hele pagina wordt vervangen door het resultaat van entry.php?

[Reb87]

Ik heb contact gehad met de ontwikkelaar van de form, maar ik begrijp het antwoord eigenlijk niet. Moet eerlijk bekennen dat Javascript me uberhaupt niet veel zegt, maar dit was zijn antwoord:

If you want to return data from the server, just echo is out, and then in your success callback, just include data as a parameter:

success(data, textStatus, jqXHR)
http://api.jquery.com/jQuery.ajax/

De hele betrekking met de jquery link die hij aangaf ontgaat me... Entry.php geeft een echo van de opdracht (of deze is gelukt of niet). Als je dit niet ziet, krijg je de melding "succes" vanuit de javascript file en heb je dus geen idee dat de opdracht eigenlijk helemaal niet ingevoerd is.

@Blues: Het zou mooi zijn als het resultaat gewoon entry.php is, en niet een moeilijke oplossing waarbij uit de entry.php informatie wordt getrokken die dan weer in het resultaat van de form te zien is.

[Barryvdh]

Maar je wil dus eigenlijk een formulier, wat alleen validatie doet? Want je hebt nu een form dat verstuurd wordt via ajax.
Als je alleen de validatie moet doen, moet je false returnen bij het submitten. Bij true gaat het door, false stopt hij.
in plaats van het hele stuk vanaf if(hasError == false) ..., kan je return !hasError; doen.
En ik zou het aan de submit hangen, niet aan de click (want je kan ook op enter drukken bijv.)
Zoiets dus:

JavaScript:

$(document).ready(function(){ 
    $("#sendEmail").submit(function(){                                           
        $(".error").hide(); 
        var hasError = false; 
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
         
        var subjectVal = $("#subject").val(); 
        if(subjectVal == '') { 
            $("#subject").after('<span class="error">Je bent vergeten een bonnummer in te voeren.</span>'); 
            hasError = true; 
        } 
         
        var messageVal = $("#message").val(); 
        if(messageVal == '') { 
            $("#message").after('<span class="error">Je bent vergeten een omschrijving in te voeren.</span>'); 
            hasError = true; 
        } 

        return !hasError; 
    });                            
});

[Reb87]

Barryvdh: bedankt voor de input. Dit is ongeveer wat ik had, voordat ik met dit (voor mij) nieuwe formscript begon. Het nadeel hieraan is dat er geen progress indicatie is en dat de submitknop niet verdwijnt. hierdoor is men geneigd er nog even 5x op te drukken waardoor het hele systeem uiteindelijk vol komt te staan met entry's. De submit duurt een tijdje, vandaar dat een progress indicatie en het verdwijnen/disablen van de submitknop essentieel zijn.

[Barryvdh]

Dan moet je die regels dus laten staan he

JavaScript:

if(hasError == false) { 
      $("#submit").hide(); 
      $("#sendEmail li.buttons").append('<img src="loading.gif" alt="Loading" id="loading" />'); 
}

Of je moet, zoals ik al aangaf, de div vervangen door door het resultaat van de ajax post. Zoiets als dit (niet getest, dus geen idee of het werkt)

JavaScript:

        if(hasError == false) { 
            $(this).hide(); 
            $("#sendEmail li.buttons").append('<img src="loading.gif" alt="Loading" id="loading" />'); 
             
            $.post("entry.php", 
                   { subject: subjectVal, message: messageVal }, 
                       function(data){ 
                        $("#container").slideUp("normal", function() {                    
                            $("#container").before(data);      
                        }); 
                       } 
                 ); 
        } 

Dan slide je hele container dus omhoog, en voeg je het resultaat van je entry.php toe aan de pagina.

[Reb87]

Barry, je bent een held. De form heeft nu de functionaliteit die ik zocht! Helaas is er echter een maar, hij wil niet redirecten. Naja, wel in browsers (safari), maar niet in de dashboard widget (eigenlijk een soort iframe van Safari) van Apple. Hier gaan we de form namelijk gebruiken. Ik heb al wat heen en weer gegoocheld met de code en ook de dashboard widget documentatie er op nageslagen, maar zonder resultaat. Echt superraar, want een dashboard widget is niets meer dan een frame van Safari... De form werkte in zijn originele staat (van de openingspost) wel.

JavaScript:

$(document).ready(function(){  
    $("#sendEmail").submit(function(){                                            
        $(".error").hide();  
        var hasError = false;  
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;  
          
        var subjectVal = $("#subject").val();  
        if(subjectVal == '') {  
            $("#subject").after('<span class="error">Je bent vergeten een bonnummer in te voeren.</span>');  
            hasError = true;  
        }  
          
        var messageVal = $("#message").val();  
        if(messageVal == '') {  
            $("#message").after('<span class="error">Je bent vergeten een omschrijving in te voeren.</span>');  
            hasError = true;  
        }  
    if(hasError == false) {  
         $("#submit").hide();  
         $("#sendEmail li.buttons").append('<img src="loading.gif" alt="Loading" id="loading" />');  
}
        return !hasError;  
    });                             
});

[Barryvdh]

Geeft hij errors? Heb je met Firebug gekeken wat er gebeurt? Welke requests er gestuurd worden, of er fouten gaan, welke regels hij wel/niet uitvoert etc.?

[Reb87]

Firebug geeft geen bijzondere errors naast de onderstaande en de post informatie ziet er normaal uit. Wat overigens wel kenmerkend is, is dat de indicator (loading.gif) niet meer zichtbaar is in alle browsers. Hier lijkt dus al iets spaak te lopen.

Firebug:

code:

A form was submitted in the windows-1252 encoding which cannot encode all Unicode characters, so user input may get corrupted. To avoid this problem, the page should be changed so that the form is submitted in the UTF-8 encoding either by changing the encoding of the page itself to UTF-8 or by specifying accept-charset=utf-8 on the form element.

[Barryvdh]

Maar die andere manier, door wel met ajax het formulier te verzenden, werkt dat ook niet? Misschien is dat een alternatief, als het niet goed werkt als widget.

[Reb87]

De alternatieve manier werkt sowieso niet. Dan werkt de validatie niet, en wordt de submit niet gedisabled.

-edit-

Hier de volledige code, die nu welk met de indicator werkt, alleen nog steeds niet in het dashboard. In het dashboard laat hij netjes de knop verdwijnen en de progress indicatie komen, maar voor de rest gebeurt er niets. Geen form submit.

HTML:

<?php include('datum.php'); ?>
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<head>
<title>Opdracht invoeren</title>
<link href="screen.css" type="text/css" rel="stylesheet" media="screen,projection" />
<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){   
    $("#sendEmail").submit(function(){                                             
        $(".error").hide();   
        var hasError = false;   
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;   
           
        var subjectVal = $("#subject").val();   
        if(subjectVal == '') {   
            $("#subject").after('<span class="error">Je bent vergeten een bonnummer in te voeren.</span>');   
            hasError = true;   
        }   
           
        var messageVal = $("#message").val();   
        if(messageVal == '') {   
            $("#message").after('<span class="error">Je bent vergeten een omschrijving in te voeren.</span>');   
            hasError = true;   
        }   
    if(hasError == false) {   
          $("#submit").hide();   
          $("#sendEmail li.buttons").append('<img src="loading.gif" alt="Loading" id="loading" />');   
} 
        return !hasError;   
    });                          
});
</script>

</head>

<body>
        
<div id="container">
    <form action="entry.php" method="post" id="sendEmail">
        <p><h1>Vermaak opdracht invoeren</h1></p>

        <p><h3>Deadline is op: <font color="green"><?php echo $deadline; ?></font></h3></p>
        <ol class="forms">
            <li><label for="subject">Invoice nummer:</label><input type="text" name="subject" id="subject" value="" /></li>
            <li><label for="message">Omschrijving:</label><textarea name="message" id="message"></textarea></li>
            <li class="buttons"><button type="submit" id="submit">Invoeren &raquo;</button><input type="hidden" name="submitted" id="submitted" value="true" /></li>
        </ol>
    </form>
    <div class="clearing"></div>
</div>
</body>
</html>

[ Voor 91% gewijzigd door Reb87 op 04-05-2012 15:26 ]