How to display hidden data of one div to another div? - php

Question

I am working on a project where I came across where when I click plus sign the data will hide and the appear in the div next to it.
here is the code:
<fieldset class="col-md-4" >
<legend>Services</legend>
<div class="col-md-12" >
<?php
$id = 0;
foreach ($servicesname as $val) {
$id++;
?>
<div class="col-md-12" style="font-size: 16px;" id="itemservices<?php echo $id ?>">
<span style="float:left;" ><?php echo $val[0]['servicename']; ?></span>
<a style="float:right;" href onclick="return addSrvToCart('itemservices<?php echo $id ?>')" >
<strong>&#8377 <?php echo $val[0]['amount']; ?></strong>
<span class="glyphicon glyphicon-plus-sign" id="id_<?php echo $id; ?>"></span>
</a>
</div>
<?php } ?>
</div>
</fieldset>
and the code for next div:
<fieldset class="col-md-4" >
<legend>Cart</legend>
<div style="list-style:none;" class="no-left-padding" id="cart">
<div class="col-md-12" >
</div>
</div>
<div class="col-sm-12 no-right-padding" style="background-color:#f3f0f0; padding-top:6px; border:1px solid#ccc">
<label class="pull-right">/*what should i write here to show the sum */: ₨ </label>
</div>
<button style="margin-top:10px;" class="btn btn-primary btn-sm pull-right" onclick="bookNowAfterFilter()">Book Now</button>
</fieldset>
And This the Jquery code:
<script>
function addSrvToCart(elem){
alert($('#' + elem).html());
$('#' + elem).hide();
//return false;
//what should i write here the show that hidden div
document.getElementById('summery);
return false;
}
</script>
This is the picture and I want to display the data in the Cart div and show the amount

Answer 1

You need to change in both HTML and Script to achieve the result
Try like this
HTML
<fieldset class="col-md-4" >
<legend>Services</legend>
<div class="col-md-12" >
<?php
$id = 0;
foreach ($servicesname as $val) {
$id++;
?>
<div class="col-md-12" style="font-size: 16px;" id="itemservices<?php echo $id ?>">
<span style="float:left;" ><?php echo $val[0]['servicename']; ?></span>
<a style="float:right;" onclick=" addSrvToCart('itemservices<?php echo $id ?>')" >
&#8377<strong> <?php echo $val[0]['amount']; ?></strong>
<span class="glyphicon glyphicon-plus-sign" id="id_<?php echo $id; ?>"></span>
</a>
</div>
<?php } ?>
</div>
</fieldset>
and the code for next div:
<fieldset class="col-md-4" >
<legend>Cart</legend>
<div style="list-style:none;" class="no-left-padding">
<div class="col-md-12" id="cart" >
</div>
</div>
<div class="col-sm-12 no-right-padding pull-right" style="background-color:#f3f0f0; padding-top:6px; border:1px solid#ccc">
Total: ₨ <label class="" id="sumAmount">0</label>
</div>
<button style="margin-top:10px;" class="btn btn-primary btn-sm pull-right" onclick="bookNowAfterFilter()">Book Now</button>
</fieldset>
Script:
function addSrvToCart(elem){
var div=$('#' + elem);
div.hide();
$('#cart').append(div.html());
var total = parseInt(div.find('strong').html()) + parseInt($('#sumAmount').html());
$('#sumAmount').html(total);
}
It will produce output as
I think it will help you.