I am using a slider in one HTML page and sending its value to the next page using a hidden textbox like this :
Page1.html
<script type="text/javascript">
var flowPercent = document.querySelector('#flow');
function sliderFunc()
{
var f = function(){
var x = flowPercent.value;
window.open('Page3.html?val=x','_parent');
};
f();
};
</script>
And then I would like to display this in the next HTML page using PHP echo like this :
<?php
$val=$_POST['val'];
echo "Value is $val";
?>
But neither the value nor "Hello" is being displayed. Why is this ?
How do I fix this ?
Thanks !
If your PHP-Code is contained in Page3.html, that page should have a .php-extension in order to execute the code. And also you are not posting anything, so $_POST will be useless...
Try window.opener.getElementById('textbox') instead to query the value...
Just change your page3.html to page3.php because you can't use php code in html file but you can use html code in php
Related
My php page has at the top of the page before any jquery a php variable called $pause.
The value assigned to this is read from a database.
What I'm trying to do using jquery is show a div, then delay for the $pause value then hide the div.
This shows and hides the div, how do I add the delay ?
$("#div1").show();
$("#div1").hide();
Thanks
If you can parse php inside of your js, you can echo it:
var pause = <?php echo $pause; ?>
If not, attach the value to an element such as a hidden input so that you can access the value with jquery.
Then you could do:
$('#div1').show().delay(pause).hide(0);
Note: You need to pass the duration to hide() in order for delay() to work:
When a duration, a plain object, or a "complete" function is provided, .hide() becomes an animation method
Here's a fiddle
add $pause to a HTML Element...for example body:
<body data-pause="<?=$pause?>" >
</body>
and js:
$("#div1").show();
setTimeout(function () {
$("#div1").hide();
}, parseInt($('body').attr('data-pause'), 10));
If you would like to keep your javascript Inline write this at the end of your html before
<script>
$("#div1").show(0).delay(<?php echo $pause; ?>).hide(0);
</script>
if you don't want to keep your code inline you can add an attribute to your element and use that:
For example:
<div id="div1" delaytime="<?php echo $pause; ?>">Hello World</div>
And finally use the javascript below:
$("#div1").show(0).delay(jQuery(this).attr('data-pause')).hide(0);
I want to increment variable in html .. the variable is declared in php and I need to increment it in php ... I write the code bellow :
global $indice_array_contact;
$indice_array_contact=0;
<img src="images/back1.png" onclick='left_clik()'>
<img src="images/back2.png" onclick='right_clik()'>
<SCRIPT LANGUAGE="JavaScript">
<?php $indice_array_contact=$indice_array_contact+1; ?>
function left_clik()
{ document.getElementById("im1").src = "profiles_stored/executive.png";
document.getElementById("td1").innerHTML = "<?php echo $indice_array_contact ?>";
<?php $indice_array_contact=$indice_array_contact+1; ?>
}
function right_clik()
{ document.getElementById("im1").src = "profiles_stored/<?php echo $array_contact[0]->profile ?>";
document.getElementById("td1").innerHTML = "<?php echo $indice_array_contact ?>";
<?php $indice_array_contact=$indice_array_contact+1; ?>
}
When I click on the right_click button , the value is 1 ,and when I click on the left_click button , the value is 2 ... but if I click second time on right_click button the value doesn't change to 3. Why?
Your code will never work the way you want it - you are mixing server-side scripting ( php ) with client-side scripting ( javascript ).
What really happens in your example:
Your $indice_array_contact is incremented by one during page load on the server
Your function left_click() and right_click() receive the value of ( presumably ) 2 in the document.getElementById().innerHTML during page load, as calculated on the server -> this will never change on your already loaded page!
You hit a button and trigger either the left_click() or right_click() function -> the innerHTML DOM property receives value of 2, as the server calculated during page load -> this happens each time you execute the function
Try to re-work your implementation with only javascript as it looks you are looking for something that should change without the page being reloaded.
PHP is not necessary for this is it? Shouldn't something like this work:
<img src="images/back1.png" onclick='left_clik()'>
<img src="images/back2.png" onclick='right_clik()'>
<SCRIPT type="text/javascript">
var indice_array_contact = 0
function left_clik()
{
document.getElementById("im1").src = "profiles_stored/executive.png";
document.getElementById("td1").innerHTML = indice_array_contact;
indice_array_contact++;
}
function right_clik()
{
document.getElementById("im1").src = "profiles_stored/executive.png";
document.getElementById("td1").innerHTML = indice_array_contact;
indice_array_contact++;
}
How to pass wordpress option setting value as condition to toggle jquery function using if else statement?
Wordpress option setting value is 'select-type' value which is grabbed in my template using
<?php echo get_option('my_animation_module') ?>
which may print only one value like animation1, animation2, animation3 and so far..
I want to pass this option value as a condition in jquery to get diffrent animation effect using this wordpress option value.
HTML :
<div id="content-page>
<img src="images/myimage.png"/>
<div>
Jquery :
$(document).ready(function(){
$('#content-page').hover(function() {
$(this).find('img').stop(false,true).animate({'top':480, 'left':270}, {duration:600});
},
function() {
$(this).find('img').stop(false,true).animate({'top':0, 'left':270}, {duration:500});
});
});
This is my first sample animation effect using jQuery. I want to add diffrent animation effect on image and those get shuffled using if else statement in jQuery and wordpress option value as condition.
$(document).ready(function(){
if('<?php echo get_option('my_animation_module') ?>' == "animation1")
{
//js code for animation1
}
else if('<?php echo get_option('my_animation_module') ?>' == "animation2")
{
//js code for animation2
}
else if('<?php echo get_option('my_animation_module') ?>' == "animation3")
{
//js code for animation3
}
});
Updated answer as requested
Can I grab this option value in jQuery by storing it as a variable ? Yes. See the eg.
var myval = '<?php echo get_option('my_animation_module') ?>';
alert(myval);
If your jQuery code is small, you can put it inline IN THE BOTTOM of the HTML document, just before < /html >, then echo PHP data as Dasun showed.
If your code is bigger, u'd better put it in a separated js file. To send data to that code in the file, in HTML document you just set a JS variable with the data, and in the main code uou test if that variable was set and if so you process it.
<script>
var mydata = <?php echo $mydata; ?>;
</script>
<button type="button" id="okButton" onclick="funk()" value="okButton">Order now </button>
<script type="text/javascript">
function funk(){
alert("asdasd");
<?php echo "asdasda";?>
}
</script>
When the button is pressed I want to execute PHP code (at this point to echo asadasda)
You could use http://phpjs.org/ http://locutus.io/php/ it ports a bunch of PHP functionality to javascript, but if it's just echos, and the script is in a php file, you could do something like this:
alert("<?php echo "asdasda";?>");
don't worry about the shifty-looking use of double-quotes, PHP will render that before the browser sees it.
as for using ajax, the easiest way is to use a library, like jQuery. With that you can do:
$.ajax({
url: 'test.php',
success: function(data) {
$('.result').html(data);
}
});
and test.php would be:
<?php
echo 'asdasda';
?>
it would write the contents of test.php to whatever element has the result class.
Interaction of Javascript and PHP
We all grew up knowing that Javascript ran on the Client Side (ie the browser)
and PHP was a server side tool (ie the Server side). CLEARLY the two just cant interact.
But -- good news; it can be made to work and here's how.
The objective is to get some dynamic info (say server configuration items) from the server into the Javascript environment so it can be used when needed - - typically this implies DHTML modification to the presentation.
First, to clarify the DHTML usage I'll cite this DHTML example:
<script type="text/javascript">
function updateContent() {
var frameObj = document.getElementById("frameContent");
var y = (frameObj.contentWindow || frameObj.contentDocument);
if (y.document) y = y.document;
y.body.style.backgroundColor="red"; // demonstration of failure to alter the display
// create a default, simplistic alteration usinga fixed string.
var textMsg = 'Say good night Gracy';
y.write(textMsg);
y.body.style.backgroundColor="#00ee00"; // visual confirmation that the updateContent() was effective
}
</script>
Assuming we have an html file with the ID="frameContent" somewhere,
then we can alter the display with a simple < body onload="updateContent()" >
Golly gee; we don't need PHP to do that now do we! But that creates a structure for
applying PHP provided content.
We change the webpage in question into a PHTML type to allow the server side PHP access
to the content:
**foo.html becomes foo.phtml**
and we add to the top of that page. We also cause the php data to be loaded
into globals for later access - - like this:
<?php
global $msg1, $msg2, $textMsgPHP;
function getContent($filename) {
if ($theData = file_get_contents($filename, FALSE)) {
return "$theData";
} else {
echo "FAILED!";
}
}
function returnContent($filename) {
if ( $theData = getContent($filename) ) {
// this works ONLY if $theData is one linear line (ie remove all \n)
$textPHP = trim(preg_replace('/\r\n|\r|\n/', '', $theData));
return "$textPHP";
} else {
echo '<span class="ERR">Error opening source file :(\n</span>'; # $filename!\n";
}
}
// preload the dynamic contents now for use later in the javascript (somewhere)
$msg1 = returnContent('dummy_frame_data.txt');
$msg2 = returnContent('dummy_frame_data_0.txt');
$textMsgPHP = returnContent('dummy_frame_data_1.txt');
?>
Now our javascripts can get to the PHP globals like this:
// by accessig the globals
var textMsg = '< ? php global $textMsgPHP; echo "$textMsgPHP"; ? >';
In the javascript, replace
var textMsg = 'Say good night Gracy';
with:
// using php returnContent()
var textMsg = '< ? php $msgX = returnContent('dummy_div_data_3.txt'); echo "$msgX" ? >';
Summary:
the webpage to be modified MUST be a phtml or some php file
the first thing in that file MUST be the < ? php to get the dynamic data ?>
the php data MUST contain its own css styling (if content is in a frame)
the javascript to use the dynamic data must be in this same file
and we drop in/outof PHP as necessary to access the dynamic data
Notice:- use single quotes in the outer javascript and ONLY double quotes in the dynamic php data
To be resolved: calling updateContent() with a filename and
using it via onClick() instead of onLoad()
An example could be provided in the Sample_Dynamic_Frame.zip for your inspection, but didn't find a means to attach it
You can't run PHP with javascript. JavaScript is a client side technology (runs in the users browser) and PHP is a server side technology (run on the server).
If you want to do this you have to make an ajax request to a PHP script and have that return the results you are looking for.
Why do you want to do this?
If you just want to echo a message from PHP in a certain place on the page when the user clicks the button, you could do something like this:
<button type="button" id="okButton" onclick="funk()" value="okButton">Order now</button>
<div id="resultMsg"></div>
<script type="text/javascript">
function funk(){
alert("asdasd");
document.getElementById('resultMsg').innerHTML('<?php echo "asdasda";?>');
}
</script>
However, assuming your script needs to do some server-side processing such as adding the item to a cart, you may like to check out jQuery's http://api.jquery.com/load/ - use jQuery to load the path to the php script which does the processing. In your example you could do:
<button type="button" id="okButton" onclick="funk()" value="okButton">Order now</button>
<div id="resultMsg"></div>
<script type="text/javascript">
function funk(){
alert("asdasd");
$('#resultMsg').load('path/to/php/script/order_item.php');
}
</script>
This runs the php script and loads whatever message it returns into <div id="resultMsg">.
order_item.php would add the item to cart and just echo whatever message you would like displayed. To get the example working this will suffice as order_item.php:
<?php
// do adding to cart stuff here
echo 'Added to cart';
?>
For this to work you will need to include jQuery on your page, by adding this in your <head> tag:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
Any server side stuff such as php declaration must get evaluated in the host file (file with a .php extension) inside the script tags such as below
<script type="text/javascript">
var1 = "<?php echo 'Hello';?>";
</script>
Then in the .js file, you can use the variable
alert(var1);
If you try to evaluate php declaration in the .js file, it will NOT work
put your php into a hidden div and than call it with javascript
php part
<div id="mybox" style="visibility:hidden;"> some php here </div>
javascript part
var myfield = document.getElementById("mybox");
myfield.visibility = 'visible';
now, you can do anything with myfield...
We can use php in JavaScript by creating a form element and put the action as a .php page.
Then we use JavaScript to submit that form.
EX:
<!doctype html>
<html>
<head>
<title>PHP Executed with JS</title>
</head>
<body>
<form action="phpCode.php" id="phpCode">.
</form> <!-- This is the form-->
<script>
function runPhp() {
var php =
document.getElementById("phpCode")
php.submit() //submit the form
}
</script>
</body>
The PHP file name would be phpCode.php.
In that file would be your PHP code.
May be this way:
<?php
if($_SERVER['REQUEST_METHOD']=="POST") {
echo 'asdasda';
}
?>
<form method="post">
<button type="submit" id="okButton">Order now</button>
</form>
If you do not want to include the jquery library you can simple do the following
a) ad an iframe, size 0px so it is not visible, href is blank
b) execute this within your js code function
window.frames['iframename'].location.replace('http://....your.php');
This will execute the php script and you can for example make a database update...
Use ajax to send request and echo the response
when successfully executed. Like this:
$.get("site.com/ajax", function(status,data){
alert(status);
});
This can be achieved with jquery library.
You could run PHP at the start of the Page and grap the results from inputs
<?php
c = a * b;
?>
<input type="hidden" name="c" value="<?php c ?>"/>
<button type="submit">Submit</button>
</form>
<script>
let cValue = $('input[name="c"]').val();
alert(cValue);
</script>
I have a variable hard coded in to my html inside script tags like this(it calls meta information from a wordpress post and I've checked that the meta is being pulled)
<script type="text/javascript">
var jg_product_price = "<?php echo get_post_meta($post->ID , 'productprice' , true); ?>";
</script>
my jquery code reads;
.prepend('<span>'+jg_product_price+'</span>');
the html output is:
<span></span>
i.e an empty span
Is it something to do with the "'" in the var jg_product_price? Many thanks
It looks like jg_product_price is empty. Have a look at
alert(jg_product_price);
or view the source code of the page. Make sure get_post_meta($post->ID , 'productprice' , true); is not empty.
Open the resulting page in Firebug (or whatever) and check what, if anything, the php actually outputs into the source.
Try hard coding the value: var jg_product_price = "test";.
Try hard coding the value in php: var jg_product_price = "<?php echo "test2"; ?>".