We Keep Coding

How to dynamically change the price of paypal smartbutton according to the PHP cart value?

I am not able to assign the value of my shopping cart to the Paypal button in order for the user to be able to pay the correct amount.
The total price of the cart is stored as a variable $total_price:
<span class="metadata" id="totalprice" value="<?php echo $total_price ?>" > </span>
This is done to change it to something callable in Javascript.
Paypal's code from their developer website is as such:
<script>
var num = document.getElementById("totalprice").value;
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
// Set up the transaction
createOrder: function (data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: num
}
}]
});
},
// Finalize the transaction
onApprove: function (data, actions) {
return actions.order.capture().then(function (details) {
// Show a success message to the buyer
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
}
}).render('#paypal-button-container');
</script>
However by adding my variable as the value (as shown in the code above) every time I run the payment, the Paypal pop up briefly opens and then crashes.
I have also tried to create a Javascript variable containing the PHP variable and then setting value to that, but it had no effect.
Is there any way to solve this?
EDIT (this is my PHP code)
$cart_total=0;
if(isset($_POST['submit'])){
$address=obtain_values($connection,$_POST['address']);
$city=obtain_values($connection,$_POST['city']);
$pincode=obtain_values($connection,$_POST['pincode']);
$payment_type=obtain_values($connection,$_POST['payment_type']);
$user_id=$_SESSION['USER_ID'];
foreach($_SESSION['cart'] as $key=>$val){
$productArr=get_product($connection,'','',$key);
$price=$productArr[0]['price'];
$quantity=$val['qty'];
$cart_total=$cart_total+($price*$quantity);
}
$total_price=floatval($cart_total);
$payment_status='pending';
if($payment_type=='cod'){
$payment_status='success';
}
$order_status='2';
$added_on=date('Y-m-d h:i:s');
$txnid = substr(hash('', mt_rand() . microtime()), 0, 20);
mysqli_query($connection,"INSERT INTO order(user_id,address,city,pincode,payment_type,total_price,payment_status,order_status,added_on,txnid) VALUES('$user_id','$address','$city','$pincode','$payment_type','$total_price','$payment_status','$order_status','$added_on','$txnid')");
$order_id=mysqli_insert_id($connection);
foreach($_SESSION['cart'] as $key=>$val){
$productArr=get_product($connection,'','',$key);
$price=$productArr[0]['price'];
$quantity=$val['qty'];
mysqli_query($connection,"insert into `order_detail`(order_id,product_id,qty,price) values('$order_id','$key','$quantity','$price')");
echo "insert";
}
unset($_SESSION['cart']);
?>
<script>
window.location.href='thank_you.php';
</script>
<?php
}
?>
EDIT 2
<span class="metadata" id="totalprice" value="<?php echo ($total_price) ?>" > </span>
<div class="ht__bradcaump__area" style="background: rgba(0, 0, 0, 0) url(images/bg/ali1.png) no-repeat scroll center center / cover ;">
<div class="ht__bradcaump__wrap">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="bradcaump__inner">
<nav class="bradcaump-inner">
<a class="breadcrumb-item" href="index.html">Home</a>
<span class="brd-separetor"><i class="zmdi zmdi-chevron-right"></i></span>
<span class="breadcrumb-item active">checkout</span>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Bradcaump area -->
<!-- cart-main-area start -->
<div class="checkout-wrap ptb--100">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="checkout__inner">
<div class="accordion-list">
<div class="accordion">
<?php
$accordion_class='accordion__title';
if(!isset($_SESSION['USER_LOGIN'])){
$accordion_class='accordion__hide';
?>
<div class="accordion__title">
Checkout Method
</div>
<div class="accordion__body">
<div class="accordion__body__form">
<div class="row">
<div class="col-md-6">
<div class="checkout-method__login">
<form id="login-form" method="post">
<h5 class="checkout-method__title">Login</h5>
<div class="single-input">
<input type="text" name="login_email" id="login_email" placeholder="Your Email*" style="width:100%">
<span class="field_error" id="login_email_error"></span>
</div>
<div class="single-input">
<input type="password" name="login_password" id="login_password" placeholder="Your Password*" style="width:100%">
<span class="field_error" id="login_password_error"></span>
</div>
<p class="require">* Required fields</p>
<div class="dark-btn">
<button type="button" class="fv-btn" onclick="user_login()">Login</button>
</div>
<div class="form-output login_msg">
<p class="form-messege field_error"></p>
</div>
</form>
</div>
</div>
<div class="col-md-6">
<div class="checkout-method__login">
<form action="#">
<h5 class="checkout-method__title">Register</h5>
<div class="single-input">
<input type="text" name="name" id="name" placeholder="Your Name*" style="width:100%">
<span class="field_error" id="name_error"></span>
</div>
<div class="single-input">
<input type="text" name="email" id="email" placeholder="Your Email*" style="width:100%">
<span class="field_error" id="email_error"></span>
</div>
<div class="single-input">
<input type="text" name="mobile" id="mobile" placeholder="Your Mobile*" style="width:100%">
<span class="field_error" id="mobile_error"></span>
</div>
<div class="single-input">
<input type="password" name="password" id="password" placeholder="Your Password*" style="width:100%">
<span class="field_error" id="password_error"></span>
</div>
<div class="dark-btn">
<button type="button" class="fv-btn" onclick="user_register()">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
<div class="<?php echo $accordion_class?>">
Address Information
</div>
<form method="post">
<div class="accordion__body">
<div class="bilinfo">
<div class="row">
<div class="col-md-12">
<div class="single-input">
<input type="text" name="address" placeholder="Street Address" required>
</div>
</div>
<div class="col-md-6">
<div class="single-input">
<input type="text" name="city" placeholder="City/State" required>
</div>
</div>
<div class="col-md-6">
<div class="single-input">
<input type="text" name="pincode" placeholder="Post code/ zip" required>
</div>
</div>
</div>
</div>
</div>
<div class="<?php echo $accordion_class?>">
payment information
</div>
<div class="accordion__body">
<div class="paymentinfo">
<div class="single-method">
COD <input type="radio" name="payment_type" value="COD" required/>
PayPal <input type="radio" name="payment_type" value="paypal" onclick="showButton()" required/>
</div>
<!-- Set up a container element for the button -->
<div id="paypal-button-container"></div>
<!-- Include the PayPal JavaScript SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=ASCkJmx1-2CeTlk1ABMrnC4xJbalWvyLbv-mIx76k9644aZb49wX82Qrgcn6W15Y3Yvm6GrrfpehN_ib&currency=USD"></script>
<script>
document.getElementById("paypal-button-container").style.display = "none";
function showButton() {
var x = document.getElementById("paypal-button-container");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<script>
var num = document.getElementById("totalprice").value;
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
// Set up the transaction
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: num
}
}]
});
},
// Finalize the transaction
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
// Show a success message to the buyer
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
}
}).render('#paypal-button-container');
</script>
<div class="single-method">
</div>
</div>
</div>
<input type="submit" name="submit"/>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="order-details">
<h5 class="order-details__title">Your Order</h5>
<div class="order-details__item">
<?php
$cart_total=0;
foreach($_SESSION['cart'] as $key=>$val){
$productArr=get_product($connection,'','',$key);
$pname=$productArr[0]['name'];
$mrp=$productArr[0]['mrp'];
$price=$productArr[0]['price'];
$image=$productArr[0]['image'];
$quantity=$val['qty'];
$cart_total=$cart_total+($price*$quantity);
?>
<div class="single-item">
<div class="single-item__thumb">
<img src="media/product/<?php echo $image?>" />
</div>
<div class="single-item__content">
<?php echo $pname?>
<span class="price"><?php echo $price*$quantity?></span>
</div>
<div class="single-item__remove">
<i class="icon-trash icons"></i>
</div>
</div>
<?php } ?>
</div>
<div class="ordre-details__total">
<h5>Order total</h5>
<span class="price"><?php echo $cart_total?></span>
</div>
</div>
</div>
</div>
</div>
</div>
<?php require('footer.php')?>

show/hide a div based on click in another div

I have a chatbubble that when clicked, I want it to disappear and a chat window should come up.
The chat window is the wrapper div. I set it display = 'none' in the html code below. Then in the onclick of chatBubble I show the wrapper div using jQuery
So initially I shouldn't see the chat window. But I see it. Also when I click on the chatbubble, I get error Uncaught TypeError: "#wrapper".show is not a function. What am I missing?
<div id = "chatBubble" class="talk-bubble tri-right btm-right round">
<div class="talktext">
<p>Hi, can I help?</p>
</div>
</div>
<div id="wrapper" display = 'none'>
<div id="menu">
<p class="welcome">Welcome<b></b></p>
<p class="logout"><a id="exit" href="#">Exit</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
Relevant portion of javascript
$(document).ready(function() {
$("#chatBubble").click(function(){
//console.log("clicked")
('#wrapper').show();
})
});
Please suggest.

You are setting the style property in the wrong way. You have to set it through style attribute. show() is a jQuery function and you are missing that just before ('#wrapper').show(); which leads to the error.
Try the following:
$(document).ready(function() {
$("#chatBubble").click(function(){
//console.log("clicked")
$('#wrapper').show();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "chatBubble" class="talk-bubble tri-right btm-right round">
<div class="talktext">
<p>Hi, can I help?</p>
</div>
</div>
<div id="wrapper" style='display:none'>
<div id="menu">
<p class="welcome">Welcome<b></b></p>
<p class="logout"><a id="exit" href="#">Exit</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>

Getting rel of <a> tag in javascript

I have a javascript containing a form with image, radio button and text boxes.
When I click on the delete hyperlink, I want to get the rel of that link.
How can I go about getting it?
Form
<script type="text/template" id="imageTemplate">
<div class="row gc_photo" id="gc_photo_{{id}}" style=" border-bottom:1px solid #ddd; padding-bottom:20px; margin-bottom:20px;">
<div class="col-md-2">
<input type="hidden" name="images[{{id}}][filename]" value="{{filename}}"/>
<img class="gc_thumbnail" src="<?php echo base_url('../product_images/{{filename}}');?>" style="padding:5px; border:1px solid #ddd"/>
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input name="images[{{id}}][alt]" value="{{alt}}" class="form-control" placeholder="<?php echo lang('alt_tag');?>"/>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="radio" name="primary_image" value="{{id}}" {{#primary}}checked="checked"{{/primary}}/> <?php echo lang('main_image');?>
</label>
</div>
</div>
<div class="col-md-4">
<a onclick="return remove_image($(this));" rel="{{id}}" class="btn btn-danger pull-right"><i class="icon-times "></i></a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label><?php echo lang('caption');?></label>
<textarea name="images[{{id}}][caption]" class="form-control" rows="3">{{caption}}</textarea>
</div>
</div>
</div>
</div>
</script>
Function to delete
function remove_image(img)
{
if(confirm('<?php echo lang('confirm_remove_image');?>'))
{
var id = img.attr('rel');
alert(id);
}
}

You can make use of jQuery click handler here. Remove onclick attribute from anchor tag and write below click handler
$(function(){
$('a.btn.btn-danger').click(function(){
if(confirm('<?php echo lang('confirm_remove_image');?>'))
{
alert($(this).attr('rel'));
}
});
});

Javascript : how to know which tab is active

In my code i am using six tabs now i want to know which tab is active .one more thing is that each tab call the same function on clicking and i want to check activation tab(either tab1,tab2 ..) on button click which call other function and in that function i want to check active tab below i explain my problem with code
If i say my problem in one line that want to know active tab on clicking button which call javascript function ,function not on tab clicking*
here i m not putting all code of pages but only require code ,Hope you understand my problems and i provide needed code
Thanks in advance
Add.jsp
This is the page on which i am using tabs
<form action="AddInspServlet" method="Post" enctype="multipart/form-data"> <div>
<div id="slider">
<div class="form-step" >
<div class="row">
<div class="form-left">container Number *</div>
<div class="form-right"><input type="text" id="fname" name="contno" class="form-input" onblur="sending(this.value)"/></div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Container type *</div>
<div class="form-right"><input type="text" id="lname" name="conttype" disabled="disabled" class="form-input" /></div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Inspection type *</div>
<div class="form-right">
<select id="gender" name="insptype">
<option value="0">Select</option>
<option value="Gate In">Gate In</option>
<option value="Gate Out">Gte Out</option>
</select>
</div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Place</div>
<div class="form-right"><input type="text" id="places" name="places" class="form-input" /></div>
<div class="form-error"></div>
</div>
</div>
<div class="form-step" >
<div class="form-left1">
<div class="container1">
<ul class="tabs">
<li>Left</li>
<li>Right</li>
<li>Top</li>
<li>Bottom</li>
<li>Front</li>
<li>Rear</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<div id="hidendiv"></div>
<h2>Left Side</h2>
<div id="leftside">
</div>
<input type="file" name="img1" id="img1" onchange="return ValidateFileUpload('img1')" />
</div>
<div id="tab2" class="tab_content">
<h2>Right Side</h2>
<div id="rightside">
</div>
<input type="file" name="img2" id="img2" onchange="return ValidateFileUpload('img2')" />
</div>
<div id="tab3" class="tab_content">
<h2>Top Side</h2>
<div id="topside">
</div>
<input type="file" name="img3" id="img3" onchange="return ValidateFileUpload('img3')" />
</div>
<div id="tab4" class="tab_content">
<h2>Bottom Side</h2>
<div id="bottomside">
</div>
<input type="file" name="img4" id="img4" onchange="return ValidateFileUpload('img4')" />
</div>
<div id="tab5" class="tab_content">
<h2>Front Side</h2>
<div id="frontside">
</div>
<input type="file" name="img5" id="img5" onchange="return ValidateFileUpload('img5')" />
</div>
<div id="tab6" class="tab_content">
<h2>Rear Side</h2>
<div id="rearside">
</div>
<input type="file" name="img6" id="img6" onchange="return ValidateFileUpload('img6')" />
</div>
</div>
</div>
</div>
<div class="form-right1">
<img src="images/noimg.jpg" height="288px" width="400px" id="blah">
</div>
<div style=" width: 200px; margin-top:225px; margin-left:300px">Remarks: <input type="text" width="100px" name="remark"/></div>
</div>
</div>
</div>
<div class= "ash" style="width:auto; margin-left:35%; float: left;">
<input type="submit" name="btn" id="submit" value="AddInspection" onclick="im()" />
<input type="submit" name="btn" value="Cancel"/>
</div>
</form>
JAVA Script function:
This is the function on which i want to know which tab is active that is defined in above jsp
<script type="text/javascript">
function im()
{
/*alert("calling im function");
var tabname = document.getElementById("tab1");
if(tabname){
alert("tab1 is active");
}else{
alert("tab 1 is not active");
}*/
if($('#img1').val()=="" || $('#img2').val()=="" || $('#img3').val()=="" || $('#img4').val()=="" || $('#img5').val()=="" || $('#img6').val()=="")
{
alert("Please select image");
$('#submit').prop('disabled',true);
}
else
{
$('#submit').prop('disabled',false);
}
}

Try like
$('.tab').click(function(){
var a=$(this).attr('id');
$('#sample').html('Active Tab is'+a);
});
Fiddle

you can assign same class to all tab and bind the click function in document ready, you will get the current object by 'this'.
$('.tab').click(function(){
$(this).val();
});

$('.tab').click(function(){
var x=$(this).prop('id');
$('#lbl').html('Active Tab'+ x);
});

I'm new here but you could add a worthless class to the active tab on click, then on the button click retrieve the id or whatever you want.
jQuery
//edit: added function to add and remove class, replaced text to illustrate
$(function () {
$('.tab_content').click(function () {
$('.tab_content').removeClass('active').text('');
$(this).addClass('active').text('am active');
})
$('#button').click(function () {
$('.tab_content').each(function () {
if ($(this).hasClass('active')) {
alert($(this).attr('id')+" is the active tab");
alert($(this).text()+" is the text");
}
});
});
});
html
<div id='1' class='tab_content'>not</div>
<div id='2' class='tab_content active'>am active</div>
<div id='3' class='tab_content'>not</div>
<div id='4' class='tab_content'>not</div>
<button id='button' style='width:50px; height:50px;'>Click</button>
Here is a working fiddle: http://jsfiddle.net/Lv5VJ/2/
I'm sure there are better ways but hey, I'm trying haha.

Unable to make html/java script form function correctly

I'm struggling with a solution for this. I have the first block of code, which I want to use for css formatting/look feel etc.
<div class="login-form">
<!-- Start Error box -->
<div class="alert alert-danger hide">
<button type="button" class="close" data-dismiss="alert"> ×</button>
<h4>Error!</h4>
Your Error Message goes here
</div> <!-- End Error box -->
<form action="#" method="get" >
<input type="text" placeholder="User name" class="input-field" required/>
<input type="password" placeholder="Password" class="input-field" required/>
<button type="submit" class="btn btn-login">Login</button>
</form>
</div>
Then I have this separate code that uses a script to submit the user info once entered. I want to move the actions that this script performs onto the above code. Therefore having the look and feel of the first block of code and the actions of the second.
I'm learning at the moment, so it seems logical to try and use example code that exists as a starting point. I'm not able to find any help on goofle that direcly helps resolve this question.
I think if I could work out if I can wrap the script around the top block I could get it from there, just need some direction.
<div class="container" id="login-block">
<script type="text/template" id="login-template">
<header id="header"></header>
<div class="login">
<form class="login-form">
<div class="error" style="display:none"></div>
<input type="text" id="login-username" placeholder="Username" />
<input type="password" id="login-password" placeholder="Password" />
<button>Log In</button>
</form>
</script>

This is what I wanted to achieve. Works now, only taken 3 hours to work it out ;-/
<div class="container" id="login-block todoapp">
<div class="row">
<div class="col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">
<div class="page-icon-shadow animated bounceInDown" > </div>
<div class="login-box clearfix animated flipInY" id="login-block">
<div class="page-icon animated bounceInDown">
<i class="glyphicon glyphicon-user"></i>
</div>
<div class="login-logo">
<img src="img/login-logo.png" alt="Company Logo" />
</div>
<hr />
<div class="login-form content">
<!-- Start Error box -->
<div class="alert alert-danger hide">
<button type="button" class="btn btn-login" data-dismiss="alert"> ×</button>
<h4>Error!</h4>
Your Error Message goes here
</div></div> <!-- End Error box -->
<script type="text/template" id="login-template">
<header id="header"></header>
<div class="login">
<form class="login-form">
<div class="error" style="display:none"></div>
<input type="text" id="login-username" placeholder="Username" />
<input type="password" id="login-password" placeholder="Password" />
<button>Log In</button>
</form>
</script>
<div class="login-links">
<a href="forgot-password.html">
Forgot password?
</a>
<br />
<a href="sign-up.html">
Don't have an account? <strong>Sign Up</strong>
</a>
</div>
</div>
</div>
</div> </div>