Jquery Validate changing page before php script runs

Question

I am new to PHP MYSQL JQUERY and I have a Jquery Mobile Form that i want to submit the form data to mySql then change to #pageTwo of the mobile page. This seems like it should be easy to do but i cant seem to figure it out.



  
  
    Order Request Form
  

 
            
      
      On Site Contact:
      
      
      
      On Site Contact Number:
      
      
      
      Administrator Contact:
      
          
          
          
          Administrator Contact Number:
          
      

 
     
      
      

     
        
      
  

  
    
  
  



  
    A/C Order Request Sent!
  

  
       
    Thank you for submitting your order request. Your request will be reviewed by one of our sales representatives and you will be contacted shortly.
    Place another order

submit.php

    query($sql) === TRUE) {
$output .= "New record created successfully";
    } else {
        $output .= "Error: " . $sql . "
" . $conn->error;
    }

    ?>

I have tried to remove the submitHandler, it submits the form properly but it doesnt change the page and disrupts all the other javascript on the page (not shown) when it reloads. But when i have the submitHandler in, the page changes but the form doesn't submit.

edit

Based on Michaels suggestion, i tried the below code which gave me an "error loading page" error:

submitHandler: function (form) {
  $(':mobile-pagecontainer').pagecontainer('change', '#pagetwo', {
   reload: false
  });
 return false;
}
form.submit();
});

I also tried:

submitHandler: function (form) {
  $(':mobile-pagecontainer').pagecontainer('change', '#pagetwo', {
   reload: false
  });
 return false;
 form.submit();
}
});

which took me to pageTwo but did not submit the form

Michael · Accepted Answer

When you use the submitHandler method, you then need to submit the form. Check here: http://jqueryvalidation.org/documentation/.

$("#myform").validate({
    submitHandler: function(form) {
        form.submit();
    }
});

EDIT

For sake of clarity, I've removed the first edit.

EDIT #2

Here's the HTML:




    
    
    


    
    
        
            Order Request Form
        
        
            
                        
                    
                        On Site Contact:
                        
                    
                    
                        On Site Contact Number:
                        
                    
                    
                        Administrator Contact:
                        
                    
                    
                        
                        Administrator Contact Number:
                        
                    
                    
                        
                        

                    
                
            
        
        
            
                
            
        
      

    
    
        
            A/C Order Request Sent!
        

        
            
 
            Thank you for submitting your order request. Your request will be reviewed by one of our sales representatives and you will be contacted shortly.
            
                Place another order

And the JavaScript:

The connectDB.php file:

 'localhost',
    'username' => 'joe',
    'password' => 'thisismypassword',
    'dbname' => 'databasename'
];
$db = new PDO('mysql: host='.$config['host'].';dbname='.$config['dbname'],$config['username'],$config['password'];
$db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
$db->setAttrebute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

The database table:

+--------------------+
| tbl_orders         |
+--------------------+
| id                 |
| onSiteName         |
| onSiteNumber       |
| adminContactName   |
| adminContactNumber |
+--------------------+

The submit.php file:

prepare("INSERT INTO tbl_orders (onSiteName , onSiteNumber , adminContactName , adminContactNumber)
VALUES (:onSiteName , :onSiteNumber , :adminContactName , :adminContactNumber)";
    //Binding the parameters
    $sql_params = [
        ':onSiteName' => $onSiteName,
        ':onSiteNumber' => $onSiteNumber,
        ':adminContactName' => $adminContactName,
        ':adminContactNumber' => $adminContactNumber
    ];

    $output = '';
    if ($sql->execute($sql_params) === TRUE) {
        $output .= "New record created successfully";
    } else {
        $output .= "Error: " . $sql . "
" . $conn->error;
    }
    echo $output;
}
function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlentities($data); //changed from htmlspecialchars to make sure most symbols are encoded properly for storage in DB
    return $data;
}
?>

EDIT

I've updated the answer to include all necessary components. Also, I don't know how you're connecting to your database, but I use PDO to connect to databases, so if you use something other than that, you'll need to adapt the code. Basically, you will post the form using AJAX to your submit.php script which then processes and tries to insert into the DB. Then it echos the $output variable which AJAX will catch as the response and will log it in your console as well as change it in your new div titled #dbOutput. Basically, the output wouldn't change because the PHP had already served to the page, so it was done. Using AJAX will allow you to, without reloading the page, dynamically change an element with results from the DB. You'll have to comb through carefully as there were several minor corrections/edits. Hope that helps!

Jquery Validate changing page before php script runs

edit

Answers (1)

Related Questions