checking isset at bottom of page not working - javascript

I have a dilemma (which I am yet to find a way around). For some reason, PHP doesn't want to check if $_POST["login"] at the bottom of the <body> tag within my document.
It will work if it is put at the very top of the document, or even the top of the <body> tag. However, if I put it at the top of the document / <body> tag, the output JavaScript will not execute!
For example, this is the document (where the PHP will not execute):
<form>
<span id="example-element">Displaying.</span>
<input type="text" name="example">
<button type="submit" name="login">Login</button>
</form>
<?php
if(isset($_POST["login"])){
echo "
<script>
document.getElementById('example-element').style.display = 'block';
</script>"
}
?>
If I am to do something like this, however (the PHP will execute):
<?php
if(isset($_POST["login"])){
echo "
<script>
document.getElementById('example-element').style.display = 'block';
</script>"
}
?>
<form>
<span id="example-element">Displaying.</span>
<input type="text" name="example">
<button type="submit" name="login">Login</button>
</form>
But due to how JavaScript compiles, it will throw an error saying how it cannot set a style on a null element.
I have no idea how to get around this dilemma, so all help is appreciated!
Cheers.

<form>
<span id="example-element">Displaying.</span>
<input type="text" name="example">
<button type="submit" name="login">Login</button>
</form>
<?php
if(isset($_GET["login"])){
echo "<script>
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('example-element').style.display = 'block';
}, false);
</script>";
}
?>
Check if this works..... I've added the display code inside the DOMContentLoaded event and change the $_POST variable to $_GET. Works fine in my local system.

You can do it as follows
<style>
.someClass {
display: block;
}
</style>
<?php
if(isset($_POST["login"])){
$hasClass = true;
}
?>
<form method="post">
<span id="example-element" class=<?php if(isset($hasClass)==true) echo "someClass"; ?> >Displaying.</span>
<input type="text" name="example">
<button type="submit" name="login">Login</button>
</form>
The other problem with your code is that you are not setting method of your form and by default it is GET where as in php you were looking for POST request.
You could solve it either by using $_REQUEST in php when you are not sure about the method.

Actally php executes before javascript.
Change like this
<script>
var isSubmit = "<?php isset($_POST['login'])?true:false; ?>";
if(isSubmit){
document.getElementById('example-element').style.display = 'block';
}
</script>"

Related

JS function called from PHP works well in Chrome but it doesn't in Firefox

I have this simple code that allow users to search for certain content within a webpage. The code works well in Chrome and Opera but it does not in Firefox and Explorer. In this last two browsers mentioned, once the form is posted, the page just refreshes itself instead of redirecting to the result page.
What would I need to add or modify in order to make this work in all major browsers?
Thank's for you attention.
The code:
<?php
if($_POST[search2]){
if(!empty($_POST[text_search])){
echo "<script type='text/javascript'> window.open('search_results.php?q=".$_POST[text_search]."','_parent'); </script>";
}else{
echo "<script type='text/javascript'> alert ('You must enter something'); </script>";
}
}
?>
<html>
<head></head>
<body>
<form method="post" action="" name="formsearch">
<input name="text_search" class="input_search" type="text" placeholder="Enter your search">
<input type="image" src="search.png" id="search2" value="search" name="search2"/>
</form>
</body>
</html>
input type="image" defines an image as a submit button but never carry the value in the post array to server. Alternative to use image as submit, try to use button.
Replace
<input type="image" src="search.png" id="search2" value="search" name="search2"/>
With
<button type="submit" name="search2" value="search"><img src="search.png" alt="search"></button>
Also use quotes for $_POST elements.
if($_POST['search2']){
if(!empty($_POST['text_search'])){
echo "<script type='text/javascript'> window.open('search_results.php?q=".$_POST['text_search']."','_parent'); </script>";
}else{
echo "<script type='text/javascript'> alert ('You must enter something'); </script>";
}
}
<html>
<head>
<?php
if($_POST['search2']){
if(!empty($_POST['text_search'])){
echo "<script type='text/javascript'> window.open('search_results.php?q=".$_POST['text_search']."','_parent'); </script>";
}else{
echo "<script type='text/javascript'> alert ('You must enter something'); </script>";
}
}
?>
</head>
<body>
<form method="post" action="" name="formsearch">
<input name="text_search" class="input_search" type="text" placeholder="Enter your search">
<input type="image" src="search.png" id="search2" value="search" name="search2"/>
</form>
</body>
</html>
You just need to put your php tag that generates the JS between .
and I also put quote in the $_POST index.

clearing textarea from outside php file doesn't work

I've looked around trying to find a solution to clear a textarea from an outside php file.
Basically this is my form:
<iframe name="post_target" style="display:none;"></iframe>
<form action="post_status.php" method="post" target="post_target">
<div class="status_update">
<div id="update_type"></div>
<?php load_picture($_SESSION['profile_picture']); ?>
<textarea class="scrollabletextbox" placeholder="Share your thoughts" onkeyup="textAreaAdjust(this)" name="status_update" id="status_update"></textarea>
</div>
<div id="update_options">
<button id="post" name="post" onclick="javascript:postUpdate()">Post</button>
</div>
</form>
And it calls post_status.php who's structure is basically:
<?php
function post_status($conn, $status){
// function
}
$status = $_POST['status_update'];
post_status($conn, $status);
?>
<script type="text/javascript">
// clear textarea
document.getElementById('status_update').value = "";
alert("passed clear");
</script>
What happens is the following : the php function executes properly, but the JS part doesn't. If I leave out ' .value = "" ' it works fine, if I don't then the alert never shows.
Does anyone have any idea concerning this issue ?
You use status_update on class attribute (div) and id attribute (textarea)
you need to make a choice.

Get PHP variable to javascript

I cant seem to find the answer for this one. I need to grab a PHP variable and insert it into javascript.
Here is an example of what I have in the body of a PHP page:
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function() {
var info = "<?php Print($info); ?>";
$.post($("#frm1").attr("action"), $("#frm1").serialize(), function () {
alert(info);
});
});
});
</script>
<?php
$info="some info";
?>
<form id="frm1" method="post" action="somepage.php">
<input name="Text1" type="text" />
<input id="button" type="submit" value="submit" />
</form>
So the problem is that the alert pops up but doesn't echo the $info string. Obviously i'm missing the right way to grab a PHP variable. Please help.
If the php variable is visible inside the inner HTML, you could do something like this to grab the variable:
HTML:
<span class="variable-content"><?php echo $variable; ?></span>
jQuery:
var php_variable = $(".variable-content").text();
alert(php_variable);
Change:
alert(info);
to:
alert('<?php echo "some info"; ?>');
It looks to me like you are declaring the variable after you use it. So there is nothing in $info.
try:
<?php
$info="some info";
?>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function() {
var info = "<?php echo $info; ?>";
$.post($("#frm1").attr("action"), $("#frm1").serialize(), function () {
alert(info);
});
});
});
</script>
<form id="frm1" method="post" action="somepage.php">
<input name="Text1" type="text" />
<input id="button" type="submit" value="submit" />
</form>
try this
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<span id="info" hidden><?php
$info="some info";
echo $info;
?></span>
<form id="frm1" method="post">
<input name="Text1" type="text" />
<input id="button" type="submit" value="submit" />
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function() {
var info = $("#info").text();
$.post($("#frm1").attr("action"), $("#frm1").serialize(), function () {
alert(info);
});
});
});
</script>
</body>
</html>
Primary issue with your example code
All of the PHP executes ahead of the JS. PHP executes, then outputs Your HTML and JS to the browser where they are rendered/executed/etc.
As such, your Print of $info is executing before your declaration and definition of $info. You need to define it, then output it.
Further issues you should consider
Once this is solved, you'll eventually run into issues with simply spewing data into the middle of JS. It is not easily maintained, and unprepared data will eventually break your JS syntax. When I have to do such a thing, I generally separate the two as much as possible:
<?php
// declare and define the data
$info = "foo";
?>
<script>
// prepare an IIFE which takes the data as a param
(function (info) {
// inside this function body you can use the data as you
// please without muddling your JS by mixing in PHP
alert(info);
}(
// in the invoking parens, output encoded data
<?= json_encode($info) ?>
));
<script>
Another benefit of this approach is that you can pass any PHP data structure to JS without changing the approach in any way. (As opposed to using inputs or element texts where you'd need to parse the JSON and keep track of which elements contain which values)
If you don't want to use JQuery you could put the php value into a hidden input and get it from the hidden variable with JavaScript documentGetElementById... that way you can keep your script in the head, which seems to meet your requirements. Either the hidden span as per #Miko or:
<input type="hidden" id="php_info_data" name="php_info_data" value="<?php echo $info; ?>" />
and in your header script which executes after the body has loaded:
var info = documentGetElementById('php_info_data').value;
<?php
$info="some info";
?>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function() {
var info = "<?php echo($info); ?>";
alert(info);
$.post($("#frm1").attr("action"), $("#frm1").serialize(), function () {
alert(info);
});
});
});
</script>
<form id="frm1" method="post" action="somepage.php">
<input name="Text1" type="text" />
<input id="button" type="submit" value="submit" />
</form>
Try this
var info = "<?php echo $info; ?>";
try this
<?php
$info="some info";
?>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function() {
$.post($("#frm1").attr("action"), $("#frm1").serialize(), function () {
alert(<?php echo $info;?>);
});
});
});
</script>
<form id="frm1" method="post" action="somepage.php">
<input name="Text1" type="text" />
<input id="button" type="submit" value="submit" />
</form>
you can convert PHP variable to JSON and then send it Javascript, becoz JSON
is supported by all language
Example
var a=<?php echo json_encode($info); ?>
alert(a);
or simply
var a=<?php echo $info; ?>
alert(a);
<?php $info=10; ?>
<script>
var a=<?php echo $info; ?>;
var a1=<?php echo json_encode($info+10); ?>;
alert(a);
alert(a1);
</script>

passing javascript throught textarea inside a form

I would like to ask a question.
Is there a way to pass jquery script over textarea and being accepted by php with $_POST function?
just like w3schools did, I've tried but the jquery script are missing and I don't know why..
Please somebody help me. Thank you!
<form action="showHTML.php" method="post" >
<textarea name="html" id="hello">
<script src="lib/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("body").css({backgroundColor:"red"});
});
</script>
</textarea>
<form>
And this is my php file that i used to grab the content from the $_POST
<?php
if(isset($_POST['html']) and !empty($_POST['html'])){
$data = htmlentities($_POST['html']);
}else{
echo '<p>Edit the HTML to the right.</p>';
}
echo html_entity_decode($data);
?>
<script src="lib/jquery.min.js"></script>
<form action="showHTML.php" method="post" >
<textarea name="html" id="hello">
$(document).ready(function(){
$("body").css({backgroundColor:"red"});
});
</textarea>
<form>
Now get the script as text from showHTML.php and process it from there. I guess you can't put script tag inside text area like what you have done.
your code should look like this: close your form tag and add a button to submit.
<script>
$(document).ready(function(){
$("body").css({backgroundColor:"red"});
});
</script>
<form action="showHTML.php" method="post" >
<textarea name="html" id="hello">
</textarea>
<input type="submit" value="submit"/>
</form>
----^
php:
<?php
if(isset($_POST['html']) and !empty($_POST['html'])){
$data = htmlentities($_POST['html']);
}else{
echo '<p>Edit the HTML to the right.</p>';
}
echo html_entity_decode($data);
?>

confusion passing variable to php through multiple scripts

I am having difficulty passing a variable from a first form to a second form. There are four scripts involved: debug.php, getVar.php, printme.php and scripta.php. Running debug.php and typing "blah" for a "password to continue", select scripta.php from the pulldown and hit "Submit", I expect to see $dbpass="blah" for all of the scripts. I see it for the first page, but after the second pages' "Submit" button is pressed, the value is forgotten once inside of "printme.php". I suspect this has to do with variable scope. Any help is appreciated.
debug.php:
<html>
<body>
<form name="gateway" action= "" method="POST">
<fieldset>
<label>password to continue:</label>
<input type="text" id="dbpass" name="dbpass">
<label>Select Script:</label>
<select name="scriptSelect" id="scriptSelect">
<option value="">Please make a selection</option>
<option value="scripta.php">scripta</option>
</select>
<input name="updateGateway" type="submit" value="Submit">
<input name="resetForm" id="resetForm" type="reset" value="Reset Form">
</fieldset>
</form>
</body>
</html>
<script type="text/javascript">
document.getElementById('scriptSelect').addEventListener('change', function(e){
var selected_value = e.target.value;
document.forms['gateway'].action = selected_value;
alert(selected_value);
});
</script>
scripta.php:
<html>
<body>
<?php require 'getVar.php'; ?>
<form name="secondform" action= "printme.php" method="POST">
<fieldset>
<label>Hit submit to continue:</label>
<input name="updateScripta" type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
getVar.php:
<?php
if (isset($_POST['dbpass'])) {
$dbpass = #$_POST["dbpass"];
}
echo "you entered $dbpass";
?>
printme.php:
<?php
echo "Inside of printme, you entered $dbpass";
?>
Thanks
In scripta.php, add the line: <input type="hidden" name="dbpass" value="<? echo $dbpass ?>" /> somewhere inside the form tag.
In printme.php, add this line at the top of the page <? $dbpass = $_POST['dbpass'] ?>
There may be other errors in the scripts you have provided. Check back once you have made the above changes.
Mate... that's not how it works... Each request is independent...
In order to pass a value from one script to the other you either use sessions ($_SESSION) or you need to repost the variable.
Also, I don't know what you're trying to accomplish but passing passwords around, in plain text...
Repost variables
In scripta.php add this
<input name="dbpass" value="<?php $dbpass; ?>" type="hidden"/>
to your form. This will send the value contained in $dbpass in a hidden value.
Then, in printme.php you need to retrieve the value so just require that getVar.php script
require 'getVar.php';
echo "Inside of printme, you entered $dbpass";
Using Sessions:
change your getVar.php
session_start();
if (isset($_POST['dbpass'])) {
$_SESSION['dbpass'] = $_POST["dbpass"]; // you don't need that #
} else {
$_SESSION['dbpass'] = null;
}
then in your subsequent scripts, everytime you want to access dbpass just use
session_start();
$_SESSION['dbpass']
example:
<?php
session_start();
$_SESSION['dbpass']
echo "Inside of printme, you entered $dbpass";

Categories

Resources