prevent default action van form in javascript

Status
Niet open voor verdere reacties.

fsasfsas

Gebruiker
Lid geworden
11 sep 2006
Berichten
429
Dag

Ik probeer een default action van een form te overrulen met javascript. De achterliggende reden is dat ik de form wil valideren met javascript om dan uiteindelijk binnen javascript met ajax de boel te submitten naar een php file om daar de validatie nog eens over te doen (de javascript validatie is voor de gebruiker, de php validatie is voor het "echt'). Ik hoop dat ik het een beetje correct verwoord heb...
Mijn probleem is het volgende. De CSP beveiliging staat niet toe dat ik inline iets als onsubmit="return false" of zo gebruik. Ik dien een externe javascript file te gebruiken voor elk event. Ik wil ook geen addeventlisterner gebruiken want dat blijkt niet lekker te gaan op oudere telefoons (die er nog dermate veel zijn dat dat nog geen haalbare kaart is). Voor events gebruik ik nu binnen javascript bijvoorbeeld
Code:
function klaar () {
   
   document.getElementById('user_name').onblur = function () {
      validate_user_name(this);
  // en nog meer, voor de duidelijkheid even weg gelaten

}

window.onload = klaar;

Ik heb gezocht maar ik kan op internet alleen voorbeelden vinden van inline, of extern met jquery of addeventlisterners. ik wil dus graag iets hebben zoals bovenstaande oplossing voor een ander event. ik heb diverse dingen geprobeerd maar niks werkt. Ik doe het OF niet goed, OF ik maak steeds een tikfout. Kortom, ik kom er niet uit. Kan iemand me helpen?

groetjes, Anjo
 
Hallo Anjo,

Wat vervelend dat het niet lukt! Ik heb de bijgevoegde code bekeken en overgenomen in mijn editor.

Waar het mis is gegaan is bij het sluiten van de functie. Je sluit namelijk de functie 'klaar()' niet. Bekijk de aangepaste code even. Bij mij werkt het in ieder geval. Bedoelde je dit?

Code:
<script>
    
function klaar() {
    document.getElementById('user_name').onblur = function () {
        validate_user_name();
    }
}

function validate_user_name() {
    console.log("Gevalideerd.");
}
window.onload = klaar;

</script>

<input id='user_name' />


Jasper
 
Laatst bewerkt:
Dag Jaspertjeh

Het sluithaakje is blijkbaar weggevallen bij het maken van de commentaarregel. Daar stond immers meer code die ik voor de duidelijkheid weggelaten had. Dit stuk code werkt (alleen het voorbeeld dus niet, sorry daarvoor) maar mijn vraag was een soortgelijke code maar dan voor het voorkomen van de default action voor een form na de sumbit. Bovenstaand voorbeeld gaf de manier aan waarvoor ik listereners heb gemaakt voor andere events. ik wil dus graag weten hoe ik vergelijkbaar de default action (posten naar een andere pagina) van een form kan voorkomen zodat ik dat posten met AJAx kan doen. Ik kan online wel dingen als inline en (extern) addeventlisterners en jquery vinden, maar niks met alleen javascript zoals genoemd voorbeeld. Voor de duidelijkheid: dat voorbeeld werkt, ik zoek alleen naar een analoog iets wat bv reageert op het event submit zodat ik dan de boel met ajax kan posten en niet met de "normale" action.

met dank voor het meedenken maar je oplossing was helaas niet wat ik zocht.

groetjes, Anjo
 
Goedemorgen Anjo,

Dan heb ik je vraag verkeerd begrepen. Nu is ‘ie wel helder. Nu is je vraag relatief eenvoudig op te lossen. Een Ajax-post maken en zorgen dat de pagina niet wordt “gesubmit” is eenvoudig! Ik zou zelfs voor je een eenvoudig voorbeeld kunnen schrijven bestaande uit Javascript, Jquery en de controle van de gegevens in PHP. Het enige wat ik een beetje vreemd vind aan je vraag is dat je geen Jquery wilt gebruiken. Waarom niet? Dit maakt een Jquery-post zoveel eenvoudiger omdat Ajax van Jquery onderdeel uitmaakt.

Mocht je geïnteresseerd zijn in een voorbeeld met Jquery en controle van de gegevens in PHP, dan schrijf ik deze graag voor je.


Jasper
 
Laatst bewerkt:
Dag Jasper

Het is geen onwil maar ik ben een behoorlijke leek. Ik heb me inmiddels ingewerkt in html, css, php, veiligheidsissues en javascript. Omdat ik ajax maar op 1 enkele plek nodig heb, had ik de motivatie niet meer voor om het te proberen het goed onder de knie te krijgen. Ik heb vervolgens een stukje code genomen van internet (met oa new XMLHttpRequest() ) en dat aangepast. Dit stukje code is in javascript en loopt. Dat is de enige reden dat ik het graag in javascript zou zien....
Ik geloof meteen dat dat geen goede reden is, maar ik heb de fut niet om voor dit ene stukje jquery toe te passen (en een library daarvoor te downloaden?).

Als dat allemaal niet nodig zou zijn en je zou me een eenvoudig voorbeeldje kunnen geven, dan zou ik dat zeer waarderen. Een link ergens naar toe mag ook hoor.

groetjes, Anjo
 
Even een aanvulling: hieronder staat het stukje code dat ik van internet gejat heb en aan pas naar eigen gebruik. Als je me zegt dat ik dat eenvoudig kan wijzigen naar jquery dan wil ik dat met alle plezier proberen...
Ik heb er namelijk aan lopen denken om het aan te passen omdat ik ook tegen de callback aan loop. Ik wil graag de waarde die AJAX terug geeft, in een PHP variabele zetten en ik krijg het met alleen javascript niet goed voor elkaar. Heb er nu een andere oplossing voor maar callback is eleganter. En, naar ik heb begrepen, eenvoudiger als de AJAX call in jquery staat.

groetjes, Anjo


Code:
      /* ajax code  */
      var hr = new XMLHttpRequest();    
      var url = "/misc/sign_up4_process.php";
      var vars = 
         "user_name=" + un.value 
         +"&pass_word=" +pwd.value
         +"&initials=" +init.value;
      hr.open("POST", url, true); 
      hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
      hr.onreadystatechange = function () {
         if (hr.readyState == 4 && hr.status == 200) {
            var return_data = hr.responseText;
            document.getElementById("div_id").innerHTML = return_data;
         }
      } 
      hr.send(vars);
 
Hallo Anjo,

zie onderstaande voorbeelden, hopelijk word je er wijs uit! Ik heb bij iedere stap die ik heb gemaakt, enkele notities geschreven.

page.html is voor client-side.
save.php is voor server-side.

Het gebruiken van de scripts is op eigen risico. Mocht je nog ergens vragen over hebben, dan help ik je er graag bij! :thumb:

page.html (client-side)
Code:
<!-- dit script kan gebruikt worden om gegevens uit een formulier door te sturen naar de webserver. Javascript en JQuery zijn client-side, dus controleer altijd nogmaals de gegevens aan de server-side via PHP. Anders is dit niet veilig! Op eigen risico. -->


<!-- regel 3 is nodig om JQuery te importeren, laten staan dus! -->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>


<!-- binnen de html-tags het formulier -->
<html>
    <input type='text' id='firstName' /><br/>
    <input type='text' id='lastName' /><br/>
    <button type='button' id='sendForm'>Verzenden</button>
    <div id='messages'></div>
</html>

<!-- vanaf hier de Javascript en JQuery-code -->
<script>
    
    // hiermee roep je de functie aan bij het laden van de pagina
    validateFields();
    
    function validateFields() {
        // validatie van firstName
        $('#firstName').blur(function() {
            var firstName = $('#firstName').val();
            if (firstName.length < 2) {
                $('#messages').html('De lengte van de voornaam is niet lang genoeg.'); // geef een error-bericht weer
                $('#firstName').css('border-color', 'red'); 
            } else {
                $('#firstName').css('border-color', 'green');   
                $('#messages').empty(); // verwijder inhoud van de div 'messages'
            }
        });  
        
        // validatie van lastName
        $('#lastName').blur(function() {
            var lastName = $('#lastName').val();
            if (lastName.length < 2) {
                $('#messages').html('De lengte van de achternaam is niet lang genoeg.'); // geef een error-bericht weer
                $('#lastName').css('border-color', 'red');  
            } else {
                $('#lastName').css('border-color', 'green');   
                $('#messages').empty(); // verwijder inhoud van de div 'messages'
            }
        });  
        
        sendForm();
    }
    
    function sendForm() {
        $('#sendForm').click(function() {
            // zodra er op de verzend-button is geklikt, worden de gegevens opgeslagen in een variabele
            var firstName = $('#firstName').val();
            var lastName = $('#lastName').val();
            
            // als 'firstName' en 'lastName' voldoen aan de controle-eisen, dan kunnen deze verstuurd worden met een Ajax-post
            if ((firstName.length > 1) && (lastName.length > 1)) {
                // geef de functie 'sendAjax' de parameters 'firstName' en 'lastName' zodat deze gebruikt kunnen worden
                sendAjax(firstName, lastName); 
            }
        });
    }
                             
    function sendAjax(firstName, lastName) {
        $.ajax({
            url: '/save.php', // pad naar het PHP-bestand.
            type: "POST",
            dataType:'json',
            async: true,
            data: ({ parseFirstName: firstName, parseLastName: lastName }), // hier worden de gegevens via een Ajax-post doorgegeven aan PHP
            success: function (check) {
                if (check.status == true) {
                    $('#messages').empty();
                    $('#messages').html('De gegevens zijn succesvol opgeslagen.');
                    console.log(check.status); // kan worden weggelaten maar is voor debugging
                } else {
                    $('#messages').empty();
                    $('#messages').html('De gegevens zijn niet opgeslagen. Zie console.log voor foutmelding.');
                }
            }
        });
    }
    
</script>



save.php (server-side)
PHP:
<?php

// script gebruiken is op eigen risico.

    // verbinding met de database
    $dbconfig = mysql_connect('localhost', 'mysqlUser', 'mysqlPassword');

    // gegevens die zijn doorgegeven via de Ajax-post inclusief Real Escape String.
    $parseFirstName     = mysqli_real_escape_string($dbconfig, $_POST["parseFirstName"]);   
    $parseLastName     = mysqli_real_escape_string($dbconfig, $_POST["parseLastName"]);  
    
    // controle van de gegevens server-side
    if (strlen($parseFirstName) < 2) {
        $output = json_encode(array('error' => 'De lengte van de voornaam is niet lang genoeg.'));
        die($output);
    }
    if (strlen($parseLastName) < 2) {
        $output = json_encode(array('error' => 'De lengte van de achternaam is niet lang genoeg.'));
        die($output);
    }
    
    // schrijf de gegevens naar de database
    $sql1 = "INSERT INTO tableName (columnFirstName, columnLastName) VALUES ('$parseFirstName', '$parseLastName')";
    $query1 = mysqli_query($dbconfig, $sql1) or die;
    
    $status = true;

        // geef een json met gegevens terug zodat de website weet welke melding moet worden weergegeven
        echo json_encode(array('status' => $status));
        mysqli_close($dbconfig); 
?>


Jasper
 
dank je wel!

Ik ben op dit moment met een ander stuk bezig maar zodra dat af is ga ik hier mee aan de slag. Als ik er niet uit kom, laat ik van me horen...

Nogmaals heel erg bedankt. ook heel prettig om wat validatiedingen te zien. het is fijn om niet steeds het wiel te moeten uitvinden. Ik wil het graag safe hebben en van voorbeelden op internet is dat altijd maar de vraag.

groetjes, Anjo
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan