Can't get value using id - javascript

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);
}

Related

Jquery with many buttons call a function with sending different parameters

I have a simple code but cant get the values of my input text. Is there any way to do this?
<?php
for ($i=0;$i<3;$i++){
echo ('<input type="text" class="form-control" name="vec" id="vec'.$i.'" value="'.$listOfData0[$i].'">');
echo ('<input type="text" class="form-control" name="drv" id="drv'.$i.'" value="'.$listOfData1[$i].'">');
echo ('<button type="button" name="updateVecButton" id="updateVecButton" value="'.$vec[$i].','.$vell[$i].'" onclick="refreshVec("'.$i.'","'.$vell[$i].'");"></button>');
}
?>
<script>
function refreshVec(i,vell){
alert (i + " "+ vell);
var value0 = $("#vec"+i).val();
var value1 = $("#drv"+i).val();
alert (value0 + " " + value1);
}
</script>
You garbled the HTML by also using double quotes in the onclick attribute. You should see it in the generated HTML.
Try
echo ('<button type="button" name="updateVecButton" id="updateVecButton" value="'.$vec[$i].','.$vell[$i].'" onclick="refreshVec(\''.$i.'\',\''.$vell[$i].'\');"></button>');
instead of
echo ('<button type="button" name="updateVecButton" id="updateVecButton" value="'.$vec[$i].','.$vell[$i].'" onclick="refreshVec("'.$i.'","'.$vell[$i].'");"></button>');
I don't know why but there is space present between refreshVec(" 2","2").
This makes string like " 2" and not "2"
That's why ID selector is selecting wrong id containing that space and you are not getting expected output
I corrected it and it is working now:
echo '<button onclick="refreshVec(\''.$i.'\',\''.$vell[$i].'\');">'.$vec[$i].','.$vell[$i].'</button>';
Note: buttons don't have attribute like value. You should put text inside <button> tag
You should call as an array of inputs. Like,
echo('<input type="text" class="form-control" name="vec[]" id="vec'.$i.'" value="'.$listOfData0[$i].'">');
echo('<input type="text" class="form-control" name="drv[]" id="drv'.$i.'" value="'.$listOfData1[$i].'">');
echo('<button type="button" name="updateVecButton[]" id="updateVecButton" onclick="refreshVec("'.$i.'","'.$vell[$i].'");"/>'.$vec[$i].','.$vell[$i].'</button>');
Change name="vec" and name="drv" As name="vec[]" and name="drv[]"
In your (
onclick="refreshVec("'.$i.'","'.$vell[$i].'");
you should change as
onclick="refreshVec(\''.$i.'\',\''.$vell[$i].'\');
As I think, the reason is you passing parameters with string values.
My solution is
$(this).prop("value");
The .val() is another thing. Thanks for your support.

How to solve the “Uncaught TypeError: Cannot read property 'checked' of null”

I have ‘n’ number of check box.
The check box displays:
<?php
$result=mysql_query("select * from tablename where status='approved'");
$result1=$count=mysql_result(mysql_query("select max(id) from tablename where status='approved'"),0);
$limit=mysql_num_rows($result);
while($row=mysql_fetch_array($result)){?>
<input type="checkbox" name="chekgrp[]" id="cheks_<?php echo $row['id'];?>" onclick="Checkchk()" value="<?php echo $row['id'];?>" />
<?php }
?>
The value n is set in a hidden field
<input type ="hidden" value="<?php echo $limit; ?>" id="hiddenval" name=" hiddenval">
The javascript validation is:
var limits=parseInt(document.form.hiddenval.value);
var countelm=0;
for(i=1;i<= limits;i++){
if (("cheks_"+i).length>0){
if(document.getElementById("cheks_"+i).checked)
{
countelm = countelm +1;
}
}
}
It shows the above error if change the status to unapproved an element from table. I know it’s because I have changed the status of certain element. Is there any other way to check if element exists (checking length doesn't help) ? How to solve this error? Please help me.
Try the following
Use document.querySelectorAll to find all your checkboxes
Array.prototype.slice to truncate the list to $limit items
Array.prototype.filter to limit the list to the checked ones, and
Array.prototype.length to get the count
HTML / PHP
<input type="checkbox" name="chekgrp[]" id="cheks_<?= $row['id'] ?>" onclick="Checkchk()" value="<?= $row['id'] ?>" />
JS
var limits = parseInt(document.getElementById('hiddenval').value, 10)
var selector = 'input[type="checkbox"][name="chekgrp[]"]'
var countelm = Array.prototype.slice.call(document.querySelectorAll(selector), 0, limits)
.filter(function(checkbox) { return checkbox.checked })
.length

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)){

working session variable inside jquery

I am having trouble recording the following _session variable inside my jquery function. I essentially want to grab the value of the coupon code and store it there.
<input type="text" oninput="calculate()" name="couponCode" id="couponCode" value="" placeholder="Please Enter Coupon Code" required>
<script>
$(function() {
$("#signInButton2").click(function(){
<?php $_SESSION['userCoupon'] = echo "<script> $('#couponCode').val(); </script>"; ?>
});
});
Thanks in advance
Here is a quick and easy using jSON. I will get a lot of flak for using jSON in this manner, but too bad everyone.
This should work just fine...
$(function()
{
$("#signInButton2").click(function()
{
var temp = $('#couponCode').val();
example(temp)
});
});
function example(number)
{
$.get("example_set_session.php",
{
number: number
});
}
in example_set_session.php...
<?php
$example_number = $_GET['number'];
$_SESSION['userCoupon'] = $example;
?>

Get the value of a hidden input in server side Php which was set by javascript

This wordpress stuff driving me mad again.
I have an output page which uses a short code to call a function (Stores)... the code of which in part is beneath.
It has a dropdown and a table of data, ..the data being dependant on the selected option of the drop down.
I use javascript to set the hidden input...successfully.
In fact I tried a normal, non hidden input as well...same result,..on server side, with$_POST["txtSelection"] or
$_POST["hdnSelect"]
But when I try get it's value on the php server side code, it is empty,..
How on earth do I retrieve it?
the hidden input is inside the form tag.
<?php
function Stores()
{
global $wpdb;
global $MyPage;
$MyPage = str_replace( '%7E', '~', $_SERVER['REQUEST_URI']);
?>
<form name="frmSB_stores" method="post" action="<?php echo $MyPage ?>">
<input type="hidden" name="hdnSelect" id="hdnSelect" value="">
<input type="text" name="txtSelection" size="19" id="txtSelection" value="">
<script type="text/javascript">
function SetDDLValueOnChange (objDropDown) {
var objHidden = document.getElementById("hdnSelect");
if ( objDropDown.value.length > '0')
{
objHidden.value = objDropDown.value; //.substr(0,1);
//alert(" hdn = " + objHidden.value);
window.location = '<?=$MyPage;?>' ;
}
}
</script>
the dropdown's markup here,..then
<table width='100%' border='0' cellspacing='5' cellpadding='3'>
<?php
$Area = $_POST['txtSelection']; //or $_POST['hdnSelect']
which has zilch in it , even though it is set successfully by jvascript
Why is this such an issue in WordPress,
How do i overcome it.
It's nuts spending a full day on something which should be so trivial (works fine in a normal php situation, os asp or asp.net,..but not in WP.)!
TIA
N
This doesn't submit the form it just tell the browser to goto that page. Hence your value always empty.
window.location = '<?=$MyPage;?>' ;
Replace that line with this instead.
document.forms["frmSB_stores"].submit();

Categories