Don't know how to solve (Between Php and Javascript)

Question

I don't know how to solve the variable $cat by following script.

" text " variable from Form to javascript and pass to php function to be $Categories_name and to be $cat .

I already test the $cat variable, it is not "String", it is "object", I don't understand.

But I need $cat to be "String".

when Test = "This is Cat" (3 words),

I test $cat by php str_word_count and the output is 1 (I need to correct answer 3);

I test $cat by php var_dump and no output (I need to correct answer "String").

---

<p id="CaTable"></p>

<script>
function CaFunction()
{
var text = document.getElementById("CategorySelect").value;
document.getElementById("CaTable").innerHTML = "<?php php_catable('" + text + "'); ?>";
}
</script>

<!-- Generate Table by php and MySQL-->
<?php
function php_catable($Categories_name)
{
$cat = $Categories_name;
.................
.................
$sql = "select * from table where xyz = '" .$cat. "'";
}
?>

Answer 1

You are confusing server side code and client side code. Your php code live on the server and can only be executed on the server. And your javascript is on your client's browser and does not know about the server (remember, php generate a text file, and only that text file is sent to the browser). if you want to use the php_catable() function from your client, you will need to do an AJAX call or to redesign your page to do a form submit (just like what Steve is proposing).

Answer 2

Your First Page: Assuming CategorySelect is a dropdown select box, create a script for its onChange event and create a method="post" post form with a hidden input that goes to "generate_table.php".

 <input type="hidden" name="ca_table" id="ca_table" />

You make ca_table a hidden input so php will pick up the value from it when this page gets submitted to a second page where you can generate your table using the php function.

 <script language="javascript" type=text/javascript>
 function CaFunction(){
 documentGetElementById('ca_table').value = documentGetElementById('CategorySelect').value;
 submit();
 }

 </script>

add this to your select dropdown:

 onChange="CaFunction();"

Your Receiving Page: So your receiving page "generate_table.php" would have

 <?php
 function php_catable($Categories_name)
 {
 $cat = $Categories_name;
 .................
 .................
 $sql = "select * from table where xyz = '" .$cat. "'";
 }


 $category_name = $_POST['ca_table'];  // cleaned up at least with suitable preg_replace etc

 // and call your catable function
 php_catable($category_name);

     ?>

So that way your result will have been posted back to the server as per comments about client side/server side by @Fluinc and answer by @litelite . To get it to do something which performs looking like innerHTML which changes a part of the page without submitting the whole page you will need AJAX, again as per @litelite 's answer.

Might get marked down for being dependant on JavaScript but intended mostly to help clarify client v server.

If you want to avoid the JavaScript dependency of this script you could leave out the onChange altogether and add a submit button, then collect $_POST['CategorySelect']; assuming that is its name - ensure it has name="CategorySelect" for php as well as its Id for your css/javascript. Php gets its variable from the item's name.

To get something a bit like the effect of AJAX visually (though the page is still submitted) you could submit the page to itself using action="<?php echo $_SERVER['PHP_SELF']; ?>" on the form and have all the code on the one page. You can put the table generating code in the div where you want the table to appear - it would need a default state set, of course.

@litelite 's comment regarding not using posted data directly in an sql query is also vital to prevent attack - make sure you clean it up before you use it!