Ajax form plugin. How to redirect using ajaxForm method

PHP
1

Hi,

I am using the javascript form plugin, using ajaxForm() method. So I included in the document jquery and jquery form plugin.

Disabling javascript, the form submission on server side is perfect, (in fact the parameter in the querystring as validation_type=php is sent) no problem!

I have problems with my form using javascript.
This is the behaviours I want:

  • On improper input, clicking submit button, an ajax request is sent on the url specified in the url option and not in the action attribute of the form, an error message is printed next to that input field.
  • On all correct input, submit the form and go to another page that display the list of input values inserted.

But I have a problem:
While clicking submit button with improper input text, I obtain the expected behaviour through an ajax request (in fact there isn’t any parameter in the querystring as ?validation_type=php), and a error message is printed near that input, so it’s all ok;

but, when I click submit on proper/correct input I am unable to redirect the form to another page, I have tried also to redirect via javascript checking the value of the data.errors, but I obtained always a redirection even if the input was improrer (see the commented rows in js show_response function), I have also tried a redirection on the server side but without any result.

so, I hope you can help me, because I am about to get crazy (and sleepless), and I am turning around the same things without doing any concrete thing, staring for hours my code before my monitor! :confounded: :sob:
so, please can you help me? :tired_face:

here is my code:

index.php

<?php
   $self = $_SERVER['PHP_SELF'];

   $regex_nome = "/^[^ \']((\d+\pL+\'?|\pL+\d+|\pL+\'?\d+|\d+[ ]?\pL+\'?|\pL+\'?)[ ]?)+$/u";

   // tipo validazione ajax/php
   $validation_type = (!(isset($_GET['validation_type']))) ? "" : $_GET['validation_type'];

   // inizializzazione variabili campi input
   $error           = (!(isset($error)))                   ? false : true;
   $txt_nome        = (!(isset($_POST['txt_nome'])))       ? ""    : $_POST['txt_nome'];
   $cmd_signup      = (!(isset($_POST['cmd_signup'])))     ? ""    : $_POST['cmd_signup'];

   // inizializzazione variabili msg error
   $err_msg_txt_nome = "";

   // validazione solo PHP (non AJAX)
   // se il parametro validation_type=php nell'url del form action

   if ($cmd_signup == "Registrati") {
      if ($validation_type == "php") {
         switch ($txt_nome) {
            case "":
               $err_msg_txt_nome = "<span>Field name required!</span><br>";
               $error = true;
               break;
            case (!(preg_match($regex_nome, $txt_nome) )):
               $err_msg_txt_nome = "<span>Invalid format!</span><br>";
               $error = true;
               break;
         }
      }
   }

?>
<!DOCTYPE html>
<html lang='it'>
  <head>
     <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
     <script src="http://malsup.github.com/min/jquery.form.min.js"></script>
     <script>
        $(function() {
            var options = {
               url      : "js/ajax/validate_signup.php",
               dataType : "json",
               success  : show_response
            };

            $('#frm_signup').ajaxForm(options);
        });

        function show_response(data) {
           /* if ( (typeof data.errors !== "undefined" || data.errors !== null) && (data.errors === "none") ) {
              window.location.replace( <?= $self ?>);
              $('<div>' + data.message + '</div>');
           } else { */
              $('<div>' + data.message + '</div>').insertAfter('#txt_nome');
           // }
        }
     </script>
     <title></title>
     <meta charset='utf-8'>
     <meta name='description' content=''>
     <meta name='keywords' content=''>
     <meta name='author' content=''>
     <meta name='robots' content='all'>
     <!-- <meta http-equiv='X-UA-Compatible' content='IE=edge'> -->
     <link href='/favicon.png' rel='shortcut icon' type='image/png'>
  </head>
  <body>
     <?php
     if ( ($error == false) && ($cmd_signup == "Registrati") ) {
        echo $txt_nome;
        echo "<br><br><a href='$self'><<< Go back</a>";
     } else {
     ?>

     <fieldset>
        <legend>Registrati</legend>
        <form id='frm_signup' name='frm_signup' method='post' action='<?= $self . "?validation_type=php" ?>'>

        <label for='txt_nome'>Name:</label>
        <input id='txt_nome' name='txt_nome' type='text' value='<?= htmlentities($txt_nome, ENT_QUOTES) ?>'><br>
        <?= $err_msg_txt_nome ?>

        <hr>
        <input id='cmd_signup' name='cmd_signup' value='Registrati' type='submit'>
        </form>
     </fieldset>

     <?php
     }
     ?>

  </body>
</html>

validate_signup.php:

<?php
   $regex_nome = "/^[^ \']((\d+\pL+\'?|\pL+\d+|\pL+\'?\d+|\d+[ ]?\pL+\'?|\pL+\'?)[ ]?)+$/u";

   // validazione AJAX
   if (isset($_POST['txt_nome'])) {
      if (strlen($_POST['txt_nome']) < 2) {
         echo '{ "message" : "at least 2 characters!" }';
      } else {
         if ($_POST['txt_nome'] == "") {
            echo '{ "message" : "field name required!" }';
         } elseif (!(preg_match($regex_nome, $_POST['txt_nome']) )) {
            echo '{ "message" : "invalid format! (through ajax)", "input_name" : "txt_nome" }';
         } else {
            // riepilogo delle informazioni

            echo '{ "errors" : "none", message" : "ok", "input_name" : "txt_nome" }';

            // header("Location:" . $self);

         }
      }
   }
?>
2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.