How can I see $_POST variable from a form using JQuery?

Question

I am trying to obtain the $_POST variable generated from a login form using JQuery. My web page has three sections Header, Navigation and Main. "Main" contains the form and should be changed depending on the results of the input to the form, (login validation). I can get the "main" section to change when thr form is submitted but cannot obtain the $_POST variables created by the form's tags.

I suspect I need to use ajax in order to do this but I am totally new to ajax and can't find a good and simple example to follow.

Help and suggestions as to how I can get this working would be greatly appreciated.

Here are the test files that I am using to try this out. (The array dump in TEST_1.php is always returned empty)

TEST.php

<?php
session_start();
echo "<!DOCTYPE html><html lang='en'><head>";
echo "<script language='JavaScript1.1' src='scripts/KSG.js'></script>";
echo "<script type='text/javascript' charset='utf-8'>
function valid_mem(){
  if (document.form_1.member.value.length === 0){
    req('Username.');
    return false;
  }else{
    if (document.form_1.mpass.value.length === 0){
      req('Password');
      return false;
    }return true;
  }}
</script>";
echo "<script src='js/jquery-1.8.0.min.js'></script>";
echo "</head>";
echo "<body style='background-color:#eeeecc'>";
echo "  <div style='background-color:#6495ed; height: 80px;'>";
echo "    <div class='col-md-12 text-center'><b>HEADER</b> div</div>";
echo "  </div>";
echo "  <div id='mainx' style='background-color:#cccccc; height: 600px;'>";
require ('TEST_0.php');
echo "  </div></body></html>";
?>

TEST_0.php

<?php
echo "<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
  $('#form_1').submit(function(e){
    e.preventDefault();
    var z = valid_mem();
    if(z){
      var x = $('#form_1').attr('action');
      alert('debug_1: '+x);
      console.log(x);
      $('#mainx').load(x);
    }
    });
});
</script>";
echo "<form id='form_1' name='form_1' action='TEST_1.php' method='post'>";
echo "<b>MAIN</b> div<br>A test form using submit<br><br>";
echo "Member: <input type='text' name='member' >&nbsp;&nbsp;&nbsp;";
echo "Password: <input type='text' name='mpass' >";
echo "<button id='but1' type='submit' >OK</button>";
echo "</form>";
?>

TEST_1.php

<?php
echo "    THIS IS A DUMMY PAGE: TEST 1<br><br>";
echo "<pre>";var_dump($_POST);echo "</pre>";
?>

Answer 1

First of all, you seem new to PHP in general. I recommend you read the "getting started" section on php.net (specifically, you shouldn't be "echo"ing everything, it makes your code hard to read - just leave it outside the tags).
Second, as PHP variables are server side, you cannot access them directly via JS. You have the following options:

Changing the page on the server side depending on the content of $_POST. As a rule of thumb, you should always do this when possible.
Embed the relevant data in $_POST in elements on the page via JQuery data attributes that can later be accessed.

As to AJAX , it is generally a great way to get data from the server side to the client side dynamically, but in this case it would be unneccesarily complicated, as $_POST is only available to the page the form is sent to.

How can I see $_POST variable from a form using JQuery?

Question

1 answers

solution1
0 2014-11-08 17:14:13

How can I see $_POST variable from a form using JQuery?

Question

1 answers

solution1 0 2014-11-08 17:14:13

solution1
0 2014-11-08 17:14:13