[php/javascript] Hoe form + check combineren

maandag 26 maart 2007 19:07

Acties:

0 Henk 'm!

Topicstarter

Ik ben met wat AJAX bezig en wil het volgende doen:

Ik heb een form met daarin een veld waar je een code moet invoeren. Zodra je op submit klikt checkt een stukje code in de database OF de code bestaat en OF deze al eens is gebruikt.
Is de code nog niet gebruikt dan moet het form pas gesubmit worden.

Hieronder de code die ik gebruik:

het form + de javascript code

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

  <script language="javascript" type="text/javascript">
   var request = null;

   try {
     request = new XMLHttpRequest();
   } catch (trymicrosoft) {
     try {
       request = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (othermicrosoft) {
       try {
         request = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (failed) {
         request = null;
       }
     }
   }

   if (request == null)
     alert("Error creating request object!");

   function getStemCodeStatus() {
     var code = document.getElementById("code").value;
     var url = "checkStemCode.php?code=" +
               escape(code);
     request.open("GET", url, true);
     request.onreadystatechange = updatePage;
     request.send(null);
   }

   function updatePage() {
     if (request.readyState == 4) {
       if (request.status == 200) {
         /* Get the response from the server */
         var codeStatus = request.responseText;

        if (codeStatus == 0) { document.getElementById("output").value = 'niet submitten'; return false;}
        
        else {
        document.getElementById("output").value = codeStatus;

        }

       } else
         alert("Error! Request status is " + request.status);
     }
      return true;
   }
  </script>

</head>

<body>
<p>Voer uw persoonlijke stem code in</p>
<form method="POST" action="stem.php" onsubmit="getStemCodeStatus();">
<p><input type="text" name="code" id="code" /></p>
<p><input type="text" name="output" id="output" size="40" /></p>
<p><input type="submit" value="Stemmen" />

</form>
</body>
</html>

de php code (getStemCodeStatus) ziet er zo uit:

PHP:

// Connect to database
$conn = @mysql_connect("localhost", "blaat", "blaat");
if (!$conn)
  die("Error connecting to MySQL: " . mysql_error());

if (!mysql_select_db("stemmen", $conn))
  die("Error selecting database: " . mysql_error());

$code = preg_replace("/[\. \(\)\-]/", "", $_REQUEST['code']);
$select = 'SELECT *';
$from   = '  FROM code';
$where  = ' WHERE code = \'' . $code . '\'';
$queryResult = @mysql_query($select . $from . $where);
if (!$queryResult)
  die('Error retrieving customer from the database.');

$queryResult = @mysql_query($select . $from. $where);
$num = mysql_num_rows($queryResult);
if ($num == 0) {
echo "0";
}


while ($row = mysql_fetch_array($queryResult)) {
    $status = $row['status'];
    
    if ($status == 0) {
    echo "0";
    }
    else if ($status == 1) {
    echo "1";
    }
}

mysql_close($conn);

?>

Wat er niet goed gaat is het volgende:

Je submit het form. Onsubmit wordt er wat javascript doorgelopen: check in de database of de code al gebruikt is. Het form moet pas submitten zodra de code nog niet gebruikt is, maar dat lukt niet helemaal. Ik dacht dat met het hier onderstaande te kunnen doen (een return false als codeStatus 0 is, anders gewoon return true. Maar helaas submit hij me form nu gewoon iedere keer...

JavaScript:

var codeStatus = request.responseText; // komt uit php als response
if (codeStatus == 0) { document.getElementById("output").value = 'niet submitten'; return false;}
else {
document.getElementById("output").value = codeStatus; // is niet nodig maar je moet toch iets bij else neer zetten
}

Hoe doe ik dit wel goed?

maandag 26 maart 2007 19:57

Acties:

0 Henk 'm!

akaIDIOT

Niet alles van je doorgelezen (*shame*), maar googlen levert dit op:

quote: http://www.htmlcodetutorial.com/forms/_FORM_onSubmit.html
Note that in order to cancel the submit event, the onSubmit should be in the form onSubmit="return expression". "return" indicates that the value of the expression should be returned to the submit routine. If the expression evaluates to false, the submit routine is cancelled; if it is true, the submit routine goes forward.

Lijkt er dus op dat je je code een beetje moet omklooien...

*stu!ter* *boink*

maandag 26 maart 2007 20:19

Acties:

0 Henk 'm!

Joolee

Je kijkt nu of codeStatus gelijk is aan integer 0. Probeer eens '0' of return vanuit php een bepaalde string i.p.v. 0.
Als je er een alert oid tussen gooit, wat gebeurt er dan?

[ Voor 20% gewijzigd door Joolee op 26-03-2007 20:19 ]

maandag 26 maart 2007 20:19

Acties:

0 Henk 'm!

ViNyL

Topicstarter

helaas werkt dat niet, als ik gewoon de code status of vang met een if else en er een alert aan hang gaat het wel goed.. maar het form NIET submitten als codeStatus == 0 dan gaat het niet

Zo dus:

JavaScript:

1 2	if (codeStatus == 1) { document.getElementById("output").value = codeStatus; alert("het werkt"); } else { document.getElementById("output").value = codeStatus; alert("verkeerde code"); }

[ Voor 38% gewijzigd door ViNyL op 26-03-2007 20:20 ]

maandag 26 maart 2007 20:21

Acties:

0 Henk 'm!

Joolee

Ik zie het al ^.^.
Je returnt alleen maar iets uit de functie. Het resultaat moet van daaruit ook nog worden doorgevoerd naar de onSubmit event. zet in je formulier: onSubmit="return functie()".
Daarmee ben ik ook al een aantal maal de mist mee ingegaan.

[ Voor 13% gewijzigd door Joolee op 26-03-2007 20:21 ]

maandag 26 maart 2007 20:25

Acties:

0 Henk 'm!

ViNyL

Topicstarter

Dat werkt helaas ook niet, dan submit ie me form constant... ik heb nu dit gedaan:

JavaScript:

   function updatePage() {
     if (request.readyState == 4) {
       if (request.status == 200) {
         /* Get the response from the server */
         var codeStatus = request.responseText;
        
        if (codeStatus == 1) { document.getElementById("output").value = codeStatus; alert("het werkt"); document.form.submit(); } // nu submit ie me form zonder submit button
        else { document.getElementById("output").value = codeStatus; alert("verkeerde code"); }
        
        
       } else
         alert("Error! Request status is " + request.status);
     }
   }

Ik heb dus "document.form.submit();" toegevoegd aan de code...weet niet of dit nog security issues heeft?

[ Voor 7% gewijzigd door ViNyL op 26-03-2007 20:26 ]

maandag 26 maart 2007 20:30

Acties:

0 Henk 'm!

Joolee

Security zit je sowiso mee als je met javascript gaat werken. Altijd via PHP controleren.
Ik vraag me nu toch wel af wat dan wél het probleem is...
Probeer anders eens iets als: onSubmit="if( function() ) { alert('goed') return true; } else { alert('fout'); return false; }"

maandag 26 maart 2007 20:33

Acties:

0 Henk 'm!

ViNyL

Topicstarter

Ja, security is altijd een issue. Ik check zowieso als je het php script direct aan roept of er wel een code gepost wordt.. anders krijg je natuurlijk een error en gebeurt er niets...

Waar het aan ligt snap ik ook niet helemaal.. ga ik nog eens ff verder mee...

maandag 26 maart 2007 23:39

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Php

Geen asynchroon request doen maar een synchroon request...

Intentionally left blank

dinsdag 27 maart 2007 08:28

Acties:

0 Henk 'm!

ViNyL

Topicstarter

crisp schreef op maandag 26 maart 2007 @ 23:39:
Geen asynchroon request doen maar een synchroon request...

dus het form gewoon posten? Op zich is het opgelost, maar mocht ik nog op probs stuiten dan is dan plan b

dinsdag 27 maart 2007 10:05

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Php

ViNyL schreef op dinsdag 27 maart 2007 @ 08:28:
[...]

dus het form gewoon posten? Op zich is het opgelost, maar mocht ik nog op probs stuiten dan is dan plan b

Nee, ik bedoel meer zoiets:

JavaScript:

function getStemCodeStatus()
{
    var code = document.getElementById("code").value;
    var url = "checkStemCode.php?code=" +
        encodeURIComponent(code);

    var request = new XMLHttpRequest();
    request.open("GET", url, false); // synchroon request
    request.send(null);

    if (    request.readyState == 4 &&
        request.status == 200 &&
        request.responseText != '0'
    )
    {
        return true;
    }

    alert('Niet submitten');
    return false;
}

Maar waarom deze detour? Als je graag Ajax wilt gebruiken kan je net zo goed het formulier meteen met Ajax naar stem.php posten en die een returncode laten teruggeven of de stem al dan niet verwerkt kon worden...

Intentionally left blank

dinsdag 27 maart 2007 10:10

Acties:

0 Henk 'm!

xces

To got or not to got..

Met andere woorden; zodra jij gaat controleren of de code al bestaat, gaat je browser (client) gewoon door. Als je toch een asynchroon request wilt doen zou je in de functie altijd "false" kunnen geven. Het form zal dan dus nooit via de standaard manier gesubmit worden. Als je dan een 1 terugkrijgt dat het kan, kun je zelf een .submit() event afvuren. Houd er wel rekening mee dat er ook mensen zijn (van die panische) die javascript uit hebben staan. Je code moet dan natuurlijk wel blijven werken.

dinsdag 27 maart 2007 11:17

Acties:

0 Henk 'm!

ViNyL

Topicstarter

Maar waarom deze detour? Als je graag Ajax wilt gebruiken kan je net zo goed het formulier meteen met Ajax naar stem.php posten en die een returncode laten teruggeven of de stem al dan niet verwerkt kon worden...

Omdat ik eerst wil checken of je wel mag stemmen met deze code om je vervolgens, als de code in orde is, naar de pagina te sturen waar het uiteindelijke stemmen gebeurt.

xces schreef op dinsdag 27 maart 2007 @ 10:10:
Met andere woorden; zodra jij gaat controleren of de code al bestaat, gaat je browser (client) gewoon door. Als je toch een asynchroon request wilt doen zou je in de functie altijd "false" kunnen geven. Het form zal dan dus nooit via de standaard manier gesubmit worden. Als je dan een 1 terugkrijgt dat het kan, kun je zelf een .submit() event afvuren. Houd er wel rekening mee dat er ook mensen zijn (van die panische) die javascript uit hebben staan. Je code moet dan natuurlijk wel blijven werken.

Het gaat in een Citrix omgeving aangeboden worden, daar is het uitzetten van javascript etc niet mogelijk en dus geen probleem gelukkig..

[ Voor 48% gewijzigd door ViNyL op 27-03-2007 11:18 ]

dinsdag 3 april 2007 16:18

Acties:

0 Henk 'm!

ViNyL

Topicstarter

Even een klein schopje met een ander probleem.

als je op de button "Submit" klikt dan doorloopt hij het Ajax gedeelte goed. Druk je echter op enter na het invoeren van een code dan lijkt hij toch het form te submitten en plaatst dan ook de code in de adres balk in plaats van deze naar de php pagina te sturen middels javascript...

Waarom volgt er een andere actie als je op 'enter' drukt?

dinsdag 3 april 2007 16:37

Acties:

0 Henk 'm!

P.O. Box

waarom het is weet ik eigenlijk niet zo goed, maar volgens mij moet je aan het einde van de functie getStemCodeStatus nog een "return false" statement toevoegen...

en de form onsubmit moet volgens mij dan zijn: onSubmit ="return getStemCodeStatus();"

dinsdag 3 april 2007 19:10

Acties:

0 Henk 'm!

ViNyL

Topicstarter

Edwardvb schreef op dinsdag 03 april 2007 @ 16:37:
waarom het is weet ik eigenlijk niet zo goed, maar volgens mij moet je aan het einde van de functie getStemCodeStatus nog een "return false" statement toevoegen...

en de form onsubmit moet volgens mij dan zijn: onSubmit ="return getStemCodeStatus();"

That solves my problem indeed!

Wel vreemd overigens omdat ze in de meeste boeken die ik over Ajax heb gelezen nog even na heb gekeken en daar doen ze het niet zo, met als nadeel dat als je dus submit door op enter te drukken je alle javascript overslaat

Jij bedankt in ieder geval

woensdag 4 april 2007 10:20

Acties:

0 Henk 'm!

mbrunek

Kun je het volledige script misschien nog even posten?

Dan kan ik er wat uithalen voor mijn eigen site. Ik ben namelijk al lang op zoek naar zo'n soort script. Deze zou ik dan een beetje aan kunnen passen.

woensdag 4 april 2007 14:45

Acties:

0 Henk 'm!

ViNyL

Topicstarter

sure, ik heb er alleen nog een probleem mee. Onder Internet Explorer submit hij nu prima en laat de status keurig zien van wat ik in de achtergrond check. Alleen onder Firefox geeft ie nu geen krimp meer

Hier iig de code:

JavaScript:

<script language="javascript" type="text/javascript">
   var request = null;

   try {
     request = new XMLHttpRequest();
   } catch (trymicrosoft) {
     try {
       request = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (othermicrosoft) {
       try {
         request = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (failed) {
         request = null;
       }
     }
   }

   if (request == null)
     alert("Error creating request object!");

   function getStemCodeStatus() {
     var code = document.getElementById("code").value;
     var url = "checkStemCode.php?code=" +
               escape(code) + "&dummy=" + new Date().getTime();
     request.open("GET", url, false);
     request.onreadystatechange = updatePage;
     request.send(null);
     return false;
   }

   function updatePage() {
     if (request.readyState == 4) {
       if (request.status == 200) {
         /* Get the response from the server */
         var codeStatus = request.responseText;
       } else
         alert("Error! Request status is " + request.status);
     }
   }

HTML:

<p>Voer uw persoonlijke stem code in</p>
<p><div id="message"></div></p>
<form name="form" action="stemmenVoorOr.php" method="post" onSubmit="return getStemCodeStatus();">
<p><input name="code" type="text" id="code" maxlength="8" /></p>
<input type="submit" value="Stemmen" />
</form>

[ Voor 9% gewijzigd door ViNyL op 04-04-2007 14:48 ]

donderdag 5 april 2007 18:38

Acties:

0 Henk 'm!

mbrunek

En hoe zou dat komen?

donderdag 5 april 2007 19:14

Acties:

0 Henk 'm!

ViNyL

Topicstarter

Ik heb het gefixt door de code iets aan te passen, zal ik morgen ff hier in posten, files staan op me werk.

donderdag 5 april 2007 20:15

Acties:

0 Henk 'm!

mbrunek

Bedankt, was het een groot probleem?

donderdag 5 april 2007 20:39

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Php

Je form heeft een method="post", waarom POST je je Ajax request dan niet?

* crisp wijst nog eens op z'n eigen unobtrusive AJAX POST-framewerkje

[ Voor 47% gewijzigd door crisp op 05-04-2007 20:43 ]

Intentionally left blank

vrijdag 6 april 2007 08:45

Acties:

0 Henk 'm!

ViNyL

Topicstarter

Het probleem is dat zodra ik de enter toets gebruik om het form te submitten hij gelijk post ipv de check in de background te doen..daar kom ik niet helemaal uit..

dinsdag 10 april 2007 09:09

Acties: