[jquery] submitten html form zonder refresh

[JF88]

Ik heb een vraag met betrekking tot jquery en het submitten van een html form waarbij een waarde wordt doorgegeven en de pagina niet opnieuw geladen mag worden.

code:

function vraag1Compare() {
    var antwoord1var = $("#antwoord1").val();
    var antwoord1varcheck = $("#antwoord1-check").val();
 
    if (antwoord1var != antwoord1varcheck ) {
        alert("geen match");
    } else if (antwoord1var == antwoord1varcheck ) {
        var vraag1Opgelost = 1;
        $("#opgelost > p").html(vraag1Opgelost); 
    }
}

Ik heb bovenstaande functie geschreven. Er wordt dus gekeken of twee inputvelden met elkaar overeenkomen waarna de waarde van var vraag1Opgelost naar 1 wordt gezet (standaard waarde is 0). Bovenstaande code werkt ook.

Het probleem is echter dat de pagina wordt ververst waardoor de waarde van var vraag1Opgelost minder dan een seconde gevuld blijft met 1. Nu heb ik zelf gezocht en kwam ik de Ajax datastring oplossing tegen. Echter heb ik geen idee hoe dit werkt en hoe ik dit kan implementeren in mijn huidige code. Ik kwam nu zelf tot dit:

code:

else if (antwoord1var == antwoord1varcheck ) {
        $.ajax({
        type: "POST",
        url: "index.html",
        success: function()
        {
            var vraag1Opgelost = 1;
            $("#opgelost > p").html(vraag1Opgelost); 
        }
        });
    }

Iemand die mij op weg kan helpen?

[Pieterll]

Probeer van je form de action eens op # te zetten.
En dan je oude methode te gebruiken.

Of je kunt in plaats van:

HTML:

<input type="submit" {...}> </input>

Dit gebruiken:

HTML:

<input type="button" onclick="vraag1Compare()"{...}> </input>

[ Voor 84% gewijzigd door Pieterll op 20-03-2013 15:19 ]

[BHR]

Wordt je vraag1Compare() functie gestart door een a link of form submit knop? Dan is het waarschijnlijk dat de link danwel het formulier zelf wordt verstuurd, nadat vraag1Compare() is uitgevoerd.

Afhankelijk van hoe vraag1Compare() wordt gestart, kijk eens naar:

code:

e.preventDefault();

[ Voor 6% gewijzigd door BHR op 20-03-2013 15:20 . Reden: verkeerde ubb ]

[JF88]

BHR schreef op woensdag 20 maart 2013 @ 15:17:
Wordt je vraag1Compare() functie gestart door een a link of form submit knop? Dan is het waarschijnlijk dat de link danwel het formulier zelf wordt verstuurd, nadat vraag1Compare() is uitgevoerd.

Afhankelijk van hoe vraag1Compare() wordt gestart, kijk eens naar:

code:

e.preventDefault();

Dit werkt Thnx!

Klopt idd dat de functie wordt gestart door een form submit knop.

[R4gnax]

JF88 schreef op woensdag 20 maart 2013 @ 15:22:
Klopt idd dat de functie wordt gestart door een form submit knop.

Gestart via het afvangen van het submit event van een form of via het afvangen van een click event op een submit button in een form?
Het eerste is correct, het tweede is fundamenteel incorrect. Als je via het click event werkt, dan worden form submits via alternatieve wegen zoals via accessibility tools of onscreen keyboards namelijk niet afgehandeld...

[ Voor 3% gewijzigd door R4gnax op 20-03-2013 20:30 ]

[stane]

Je kan een hoop code besparen:

JavaScript:

   if (antwoord1var != antwoord1varcheck ) {
        alert("geen match");
    } else if (antwoord1var == antwoord1varcheck ) {
        var vraag1Opgelost = 1;
        $("#opgelost > p").html(vraag1Opgelost); 
    }

Hier heb je deze regel:

JavaScript:

    } else if (antwoord1var == antwoord1varcheck ) {

Je kan gewoon die hele 'if' weglaten als je dat wilt. Je hebt al gecontroleerd of hij niet gelijk was, en hoeft dus niet nog een keer te controleren of het wel klopt, want er is geen andere mogelijkheid.