We Keep Coding

How to pass js variable into hidden form field?

I want to pass js variable into hidden form field value. I set value using php echo code but it is not working.
js variable :-
<script type="text/javascript"> var demo = 1; </script>
html :-
<input type="hidden" name="demo_val" value="<?php echo <script>demo</script>" id="demo_val"/>
and in js file call hidden field value :-
$('#demo_val').val();
but it is not working...
How to do it..?

Remove this <?php echo <script>demo</script> from hidden field and leave it blank.
Write followed code
var demo =1;
$('#demo_val').val(demo);
in your script.
You can get value by
var field_vemo = $('#demo_val').val();

Put
document.getElementById("demo_val").value = demo;
in your javascript section

you should pass the variable since javascript yo input hidden, not it´s good idea pass the variable with , you can use jQuery :
var demo = "hola";
$('#demo_val').val(demo);
Now input with name demo_val should have the value "hola"
If you like get the value you can
var valueDemo = $('#demo_val').val();

try this
<input type="hidden" name="demo_val" value="" id="demo_val"/>
<script type="text/javascript">
var demo = 1;
$(document).ready(function() {
$('#demo_val').val(demo);
});
</script>

Posted Variable behaves differently on Razorpay payment script

I am trying to post customer and product details to Razorpay from a form. However, it does not trigger the same results as when I have the same variables in the receiving file. The code should be self explanatory;
The form
<form action="razorpay/index.php" method="POST">
Name: <input type="text" name="cname" required><br>
Phone : <input type="phone" name="cphone" required><br>
Email : <input type="email" name="cemail" required><br>
Address : <textarea cols="50" rows="10" name="caddress" required></textarea>
<input type="hidden" name="gtotal" value="<?php echo $gtotal;?>">
<input type="hidden" name="vcomp" value="<?php echo $vcomp;?>">
<input type="hidden" name="proddescr" value="<?php echo $proddescr;?>">
<input type="submit" name="prodetsub">
The PHP file receiving the posted variables
<?php
// If the below variables are not commented, the script works fine with the values
/*$_POST['prodetsub']="submit";
$_POST['gtotal']=8000;
$_POST['vcomp']="Chalo Bazaar";
$_POST['proddescr']="Product Description";
$_POST['cname']="Customer Name";
$_POST['cemail']="customer#email.com";
$_POST['caddress']="Customer Address, Line 1, Line 2, Line 3";
$_POST['cphone']="9999999999";
*/
///But if I try to receive the variables from the post as below, the variables are not passed to javascript and alerted.
if(isset($_POST['prodetsub'])){?>
<form action="charge.php" method="POST">
<?php
$gtotal=trim($_POST['gtotal']);
$vcomp=trim($_POST['vcomp']);
$proddescr=trim($_POST['proddescr']);
$cname=trim($_POST['cname']);
$cemail=trim($_POST['cemail']);
$caddress=trim($_POST['caddress']);
$cphone=trim($_POST['cphone']);
echo $cname."<br>";
echo $cemail."<br>";
echo $cphone."<br>";
echo $caddress."<br>";
echo $gtotal."<br>";
echo $vcomp."<br>";
echo $proddescr."<br>";
?>
<button id="rzp-button1">Pay</button>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
var x=<?php echo $gtotal;?>;
var mn="<?php echo $vcomp;?>";
var d="<?php echo $proddescr;?>";
var cn="<?php echo $cname;?>";
alert(cn);
var cem="<?php echo $cemail;?>";
alert(cem);
var cadd="<?php echo $caddress;?>";
alert(cadd);
var cph="<?php echo $cphone;?>";
alert(cph);
var options = {
"key": "rzp_test_WyK93y9mvps7SN",
"amount": x, // 2000 paise = INR 20
"name": mn,
"description": d,
"image": "../images/logo.png",
"handler": function (response){
alert(response.razorpay_payment_id);
},
"prefill": {
"name": cn,
"email": cem,
"contact":cph
},
"notes": {
"address": cadd
},
"theme": {
"color": "#F37254"
}
};
var rzp1 = new Razorpay(options);
document.getElementById('rzp-button1').onclick = function(e){
rzp1.open();
e.preventDefault();
}
</script>
<input type="hidden" name="shopping_order_id" value="21">
</form>
<?php } else{echo "Nothing Submitted<br>";}?>
The variables echo perfectly in both cases. But they are not passed to the javascript in the case when it comes from the form. And so it does not trigger the alert in the javascript. However, when I activate the variables commented out at the top and have the values assigned in the same file, it works
I guess it is a small issue I am missing. But I have spent a lot of time trying to figure and have lost. Hope someone can see where I am going wrong.
EDIT :
I have json_encoded the variables now.
The Source Code shows values are properly output as follows
var x="30250";
var mn=""Chalo Bazaar"";
var d=""Unicorn Silver Colour. 4 Year old. In good Condition"";
var cn=""Anit Gopinath"";
alert(cn);
var cem=""anitgopinath#gmail.com"";
alert(cem);
var cadd=""506\/C2, Panchganga,\r\nLok Upvan, Phase I, Pokhran II"";
alert(cadd);
var cph=""9833157945"";
alert(cph);
The Chrome javascript console gives an error
"index.php:8 Uncaught SyntaxError: Unexpected identifier"
I am wondering whether it is the slash in the address that is crashing the javascript

You mention that the alert windows are not working, that usually happens when there is an error in the javascript code. We have to find out what the error is. Open the javascript console in your browser (F12 key in Mozilla Firefox).
Oh, the error are the double double quotes! So, in order to fix it, we can delete the json_encode calls, or we can remove the javascript double quotes.
Did it work? Great. Glad to help you.

Don't do this:
var cem="<?php echo $cemail;?>";
You're directly dumping text from PHP into a Javascript context, and can trivially introduce JS syntax errors, killing the ENTIRE <script> block. Always use json_encode() when you're doing php->js output, e.g
var cem = <?php echo json_encode($cemail); ?>;
Why? Consider what happens if that var contains a ". Your code would generate this:
var cem = ""John Doe <jdoe#example.com"";
^^--- start/stop string
^^^^--- undefined variable
^^^ another undefined variable
^--- less than
^^^^---even more undefined variables.

You are checking for a POST input name that has no value. Suggest checking on something else, like a hidden input.
// form has <input type="submit" name="prodetsub">
// which apparentl causes this to be false
if(isset($_POST['prodetsub'])){?>
Why not use something like
<input type="hidden" name="SUBMIT" value="1" />
// and check for form submit like
if ((isset($_POST['SUBMIT'])) && ($_POST['SUBMIT'] ==1)){

Can't get value using id

I can't get the value using id. In my code I put like this
view
<input type="text" value="<?php echo $add->class;?>" name="cls_<?php echo $add->id;?>" id="cls_<?php echo $add->id;?>"/>
Here I got A
But I can't get the value using this
script
function Add(id){
var cls = document.getElementById('cls_'+id).value;
alert(cls);
}

First step you must making sure for this variable $add->id;, you can check it in inspect element of your browser. Then as I know the value function of jQuery is .val(). so try this document.getElementById('cls_'+id).val();. Hope it helps you :)

Please try as below, if even then not working then please check - $add varaible data using var_dump($add) or print_r($add).
Please check fiddle - https://jsfiddle.net/sashant9/tm7ukbqe/
php -->
<input type="text" value="<?php echo $add->class;?>" name="<?php echo "cls_".$add->id;?>" id="<?php echo "cls_".$add->id;?>"/>
jquery -->
function Add(id){
var cls = document.getElementById('cls_'+id).value;
alert(cls);
}

call php function in jQuery

The user needs to enter the 4 input fields in order to get the result which is expense. The result will be using FV formula thus I searched online and found out the how FV formula can be used in PHP. Now i want to call the function of the FV formula using the jQuery as i want when the user entered all fields the results will auto come out in the id rExpenses but it doesn't work. It displays a blank page when I go the localhost. Can anyone help? Thank you!
Edit: I deleted the php part and change the code to:
<!doctype html>
<html>
<script>
$(document).ready(function() {
$('input').keyup(function(){
var $rincome = parseInt($('#textfield1').val());
var $rate = parseInt($('#textfield2').val());
var $age = parseInt($('#textfield3').val());
var $rage = parseInt($('#textfield4').val());
var rExpenses = FV($rate/100,$rage - $age ,0,$rincome,0);
$('#rExpenses').html((rExpenses).toFixed(2));
});
});
</script>
<b>Monthly retirement income (SGD):</b>
<input type="number" id="textfield1" value="<?php echo $_POST['rincome'];?>" name="rincome" min = "0" />
</p>
<p>
<b>Inflation rate (%):
<input type="number" id="textfield2" value="<?php echo $_POST['rate'];?>" name="rate" min = "0" step = "0.1"/>
</p>
<p>
<b>Current age:
<input type="number" id="textfield3" value="<?php echo $_POST['age'];?>" name="age" min = "0" max = "70"/>
</p>
<p>
<b>Retirement age:
<input type="number" id="textfield4" value="<?php echo $_POST['rage'];?>" name="rage" min = "0"/>
</p>
<p>
<b>The monthly expenses when you retire(inflation adjusted):<span id = "rExpenses">$0.00</span>
</p>
<script>
function FV(rate, nper, pmt, pv, type) {
var pow = Math.pow(1 + rate, nper),
fv;
if (rate) {
fv = (pmt*(1+rate*type)*(1-pow)/rate)-pv*pow;
} else {
fv = -1 * (pv + pmt * nper);
}
return fv.toFixed(2);
}
</script>
</html>

You can't call a PHP function from within JQuery because JQuery is running in the browser, and PHP is running on the server. You could do it as a remote sort of thing using an AJAX call, but that would be silly. Why not just translate the PHP function into Javascript, and have it on the page?
Looking at the page, I can see what you've done, and it looks like you're wanting to have the server do the calculation. If you want to do that, you'll probably have to create a form and post your values to the server, or, as I said above, do something with AJAX.
If it were me, I'd get rid of the PHP stuff, and have something like this instead (and yes, you can use $ signs in variable names in Javascript, but I'd recommend against this if you're going to mix PHP up with it):
$('input').keyup(function(){
var $rincome = parseInt($('#textfield1').val());
var $rate = parseInt($('#textfield2').val());
var $age = parseInt($('#textfield3').val());
var $rage = parseInt($('#textfield4').val());
var rExpenses = fv($rate/100,$rage - $age ,0,$rincome);
$('#rExpenses').html((rExpenses).toFixed(2));
});
then change your <?php and ?> tags at the end of the page into <script> and </script> tags. It won't work exactly, but you should be able to debug it easily enough in your browser tools.

I think you are confusing two concepts here. PHP runs on server, which means when you call that php function, the result is a html file without any of the php code. So you cannot directly call php function in jquery, which runs on the generated HTML file.
I think translating the php function to a javscript function, which can be directly called is the best option you have now.
The translated javascript function is as easy as below:
function fv(r,n,p,pv=0)
{
var sum = pv;
for (var i=0;i<n;i++ )
{
sum += sum*r + p;
}
return sum;
}
Then your jquery script block becomes
$(document).ready(function() {
$('input').keyup(function(){
var rExpenses = fv(("#textfield2").val()/100, ("#textfield4").val() - ("#textfield3").val(), 0, ("#textfield1").val());
$('#rExpenses').html((rExpenses).toFixed(2));
});
});

Setting variable from image select array, send to PHP

I am using the code below for users to select a thumbnail from a PHP array of images in a form. I am trying to figure out a way so that when the user submits the form this is on, which ever image is displayed currently will be passed through the form to the PHP Post. I'm not sure how to do this. Logically think of it as, if image[1] is active, I want to send that url to the form. Currently, the PHP var $knoteImgs[] are full tags, if I need to put the img tag in the JS it may be cleaner to obtain the URL.
<script type="text/javascript">
var image = new Array(3)
image[1]="<? echo $knoteImgs[0]; ?>"
image[2]="<? echo $knoteImgs[1]; ?>"
image[3]="<? echo $knoteImgs[2]; ?>"
var num = 1;
document.getElementById('next').addEventListener('click', function(galleryNext){
num=num+1
if (num==4)
{num=1}
document.getElementById('knoteImg').src=image[num];
});
document.getElementById('back').addEventListener('click', function(galleryPrevious){
num=num-1
if (num==0)
{num=3}
document.getElementById('knoteImg').src=image[num];
});
</script>
Edit: if anyone could even link me to some relevant posts that would be useful. In not sure what to search for.
Edited my original post to show working code:
Thanks to #GaryHayes and #Brad for the assistance!
<script type="text/javascript">
var image = <?php echo json_encode($knoteImgs); ?>;
var tot = image.length;
var c = 0; // current image (array key index)
function loadImage(){
$("<img/>").attr({src:image[c], id:"knoteImg", class:"img-thumbnail"}).load(function() {
$('#thumbnail').html( this );
});
}
loadImage(); // load 1 image
$('#prev, #next').click(function(){
id= this.id==='next' ? c++ : c-- ;
c= c==-1 ? tot-1 : c%tot ;
loadImage();
});
function getimage() {
document.getElementById('currentimage').value = document.getElementById('knoteImg').src;
var thumbnail = document.getElementById('currentimage');
alert(thumbnail.value);
}
</script>
alert(thumbnail.value); is triggered by:
<input type="hidden" id="currentimage" name="currentimage" />
<input type="submit" onclick="getimage();" value="Submit" />

Your HTML in form:
<input type="hidden" id="currentimage" name="currentimage" />
<input type="submit" onclick="getimage();" value="Submit" />
Your Function in Javascript:
function getimage() {
document.getElementById('currentimage').value = document.getElementById('knoteImg').src;
}
SOmething like this... sorry if not perfect... not testing live.