Checkbox select JavaScript for displaying required result by backend php - javascript

This is my product page
I want to use checkbox for my product page by jquery.. So that customer can easily find their required product with this checkbox . Please do help me as i am in very early stage of jquery.
Thanks in advance
<!DOCTYPE HTML>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 " lang="sv"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7" lang="sv"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="sv"><![endif]-->
<!--[if gt IE 8]> <html class="no-js ie9" lang="sv"><![endif]-->
<html lang="sv">
<script src="assets/js/jquery-1.11.0.min.js"></script>
<body id="rims" class="category category-14 category-falgar hide-right-column lang_sv">
<div id="page">
<div class="columns-container">
<div id="columns" class="container">
<!-- Breadcrumb -->
<div class="breadcrumb clearfix">
<a class="home" href="index.php" title="Återgå till Startsidan"><i class="icon-home"></i></a>
<span class="navigation-pipe" >></span>
<span class="navigation_page">Fälgar</span>
</div>
<!-- /Breadcrumb -->
<div id="slider_row" class="row">
<div id="top_column" class="center_column col-xs-12 col-sm-12"></div>
</div>
<div class="row">
<div id="left_column" class="column col-xs-12 col-sm-3">
<!-- Block layered navigation module -->
<div id="layered_block_left" class="block">
<p class="title_block">Sök Fälgar</p>
<div class="block_content
<form action="#" id="layered_form">
<div>
<div class="layered_filter">
<div class="layered_subtitle_heading">
<span class="layered_subtitle">Storlek</span>
</div>
<ul id="" class="col-lg-12 ">
<?php include 'php/config.php';
$sql =mysql_query("select * from size");
while($row=mysql_fetch_array($sql)){
?>
<li class="nomargin hiddable col-lg-6">
<input type="radio" class="radio" name="size" id="size<?php echo $row['size']?>" value="<?php echo $row['size']?>" />
<label for="layered_id_attribute_group_86">
<?php echo $row['size']?>
</label>
</li>
<?php
}
?>
</ul>
</div>
<div class="layered_filter">
<div class="layered_subtitle_heading">
<span class="layered_subtitle">Bredd</span>
<!--<span class="layered_close">
</span>-->
</div>
<ul id="ul_layered_id_attribute_group_4" class="col-lg-12 layered_filter_ul">
<?php include 'php/config.php';
$sql =mysql_query("select * from width");
while($row=mysql_fetch_array($sql)){
?>
<li class="nomargin hiddable col-lg-6">
<input type="radio" class="radio" name="layered_id_attribute_group_33" id="layered_id_attribute_group_33" value="33_4" />
<label for="layered_id_attribute_group_33">
<?php echo $row['width']?>
</label>
</li>
<?php
}
?>
</ul>
</div>
<div class="layered_filter">
<div class="layered_subtitle_heading">
<span class="layered_subtitle">Bultmönster</span>
<!--<span class="layered_close">
</span>-->
</div>
<ul id="ul_layered_id_attribute_group_2" class="col-lg-12 layered_filter_ul">
<?php include 'php/config.php';
$sql =mysql_query("select * from bolt");
while($row=mysql_fetch_array($sql)){
?>
<li class="nomargin hiddable col-lg-6">
<input type="radio" class="radio" name="layered_id_attribute_group_8" id="layered_id_attribute_group_8" value="8_2" />
<label for="layered_id_attribute_group_8">
<?php echo $row['bolt']?>
</label>
</li>
<?php
}
?>
</ul>
</div>
<div class="layered_filter">
<div class="layered_subtitle_heading">
<span class="layered_subtitle">ET</span>
<!--<span class="layered_close">
</span>-->
</div>
<ul id="ul_layered_id_attribute_group_6" class="col-lg-12 layered_filter_ul">
<?php include 'php/config.php';
$sql =mysql_query("select * from offset");
while($row=mysql_fetch_array($sql)){
?>
<li class="nomargin hiddable col-lg-6">
<input type="radio" class="radio" name="layered_id_attribute_group_205" id="layered_id_attribute_group_205" value="205_6" />
<label for="layered_id_attribute_group_205">
<?php echo $row['offset']?>
</label>
</li>
<?php
}
?>
</ul>
</div>
</div>
<input type="hidden" name="id_category_layered" value="14" />
</form>
</div>
<div id="layered_ajax_loader" style="display: none;">
<p>
<img src="images/loader.gif" alt="" />
<br />Laddar...
</p>
</div>
</div>
<!-- /Block layered navigation module -->
</div>
<!-- Left Panel end -->
<div id="center_column" class="center_column col-xs-9 col-sm-9" >
<h1 class="page-heading product-listing"><span class="cat-name">Fälgar </span>
</h1>
<div class="content_sortPagiBar clearfix">
<div class="sortPagiBar clearfix">
<!-- /Sort products -->
<!-- nbr product/page -->
<!-- /nbr product/page -->
</div>
<div class="top-pagination-content clearfix">
<!-- Pagination -->
<div id="pagination" class="pagination clearfix">
<form class="showall" action="" method="get">
<div>
<input type="hidden" name="id_lang" value="9" />
<input type="hidden" name="id_category" value="14" />
<input type="hidden" name="controller" value="category" />
<input name="n" id="nb_item" class="hidden" value="1098" />
</div>
</form>
</div>
<?php
$sql =mysql_query("select * from items ");
$num_rows = mysql_num_rows($sql);
?>
<div class="product-count">
Visar <?php echo $num_rows; ?> artiklar
</div>
<!-- /Pagination -->
</div>
</div>
<!-- Products list -->
<!--ul-->
<div class="product_list grid row">
<?php
while($row=mysql_fetch_array($sql)){
?>
<!--li-->
<div class="ajax_block_product col-xs-6 col-sm-6 col-md-4 first-in-line first-item-of-tablet-line first-item-of-mobile-line">
<div class="layered" itemscope itemtype="http://schema.org/Product" >
<div class="layered_filter" >
<div class="product-image-container" >
<a class="product_img_link"href="#" title="<?php echo $row['model_name']?> " itemprop="url">
<img class="replace-2x img-responsive" src="admin/itempics/<?php echo $row['itemno']?>.jpg" alt="<?php echo $row['model_name']?> " title="<?php echo $row['cname']?> " width="250" height="250" itemprop="image" />
</a>
<div class="content_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="SEK" />
</div>
</div>
</div>
<div class="layered_filter">
<h5 itemprop="name">
<a class="product-name" href="#" title="<?php echo $row['model_name']?> " itemprop="url" >
<b><?php echo $row['model_name'], $row['cname'], $row['itemno'], $row['size'], $row['width'], $row['offset'], $row['colour']?></b>
</a>
</h5>
<p class="product-desc" itemprop="description">
<?php echo $row['model_name']?>
</p>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="content_price">
<span itemprop="price" class="price product-price">
<?php echo $row['price']?> ,00 kr
</span>
<meta itemprop="priceCurrency" content="SEK" />
</div>
<div style="margin-bottom:10px;" class="button-container">
<a class="button ajax_add_to_cart_button btn btn-default" href="index.php?con=8" id="rims_add_cart<?php echo $row['items_id']; ?>" rel="nofollow" title="Lägg till i varukorgen" data-id-product="1338" data-value="<?php echo $row['items_id']; ?>" >
<span>Lägg till i varukorgen</span>
</a>
<a style="margin-top:5px;" itemprop="url" class="button lnk_view btn btn-default" href="index.php?con=11 & itemno=<?php echo $row['items_id']; ?>" title="View">
<span>Mer</span>
</a>
</div>
<div class="product-flags">
</div>
<script>
$("#rims_add_cart<?php echo $row['items_id']; ?>").click(function() {
var addcart = $(this).data('value');
$.ajax({
type: "GET",
url: "session_cart_items.php",
data: {addsessioncart : addcart},
//cache: false,
});
//alert($(this).data('value'));
});
</script>
</div>
<div class="functional-buttons clearfix">
</div>
</div><!-- .product-container> -->
</div><!--li end-->
<?php
}
?>
</div><!--ul end-->
</div>
</div>
</div>
</div>
</div><!-- #center_column -->
</div><!-- .row -->
</div><!-- #columns -->
</div><!-- .columns-container -->
<!-- Footer -->
</div><!-- #page -->
<script type="text/javascript" src="assets/js/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.ui.slider.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.ui.widget.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$('input[type="checkbox"]').click(function() {
if ($('input[type="checkbox"]:checked').length > 0) {
$('.layered >div').hide();
$('input[type="checkbox"]:checked').each(function() {
$('.layered >div[data-category=' + this.id + ']').show();
});
} else {
$('.layered >div').show();
}
});
</script>
</div>
</body>
</html>
This is my code for the above.. I am using php as backend .

Related

Swiper Products Slider Laravel jquery

I'm using Laravel Swiper in Product Page for Product Images. I have two columns for images in database. One is for single image and the other one is for multiple images. I want to slide these images into the swiper.
My view:
<head>
<link href="{{asset('/css/swiper.min.css')}}" rel="stylesheet" type="text/css" />
</head>
<div class="col-sm-6 col-lg-5 product-image-details">
<input type="hidden" id="check-use-zoom" value="1" />
<input type="hidden" id="light-box-position" value="1" />
<input type="hidden" id="product-identify" value="404" />
<div class="lightbox-container"></div>
<div class="product-zoom-image">
<a href="{{ asset('storage/'.$product->image) }}" class="cloud-zoom main-image" id="product-cloud-zoom" style="width: 600px; height: 660px;" rel=" showTitle: false, zoomWidth:600,zoomHeight:660, position:'inside', adjustX: 0 ">
<img src="{{ asset('storage/'.$product->image) }}" title="First" alt="First" />
</a>
</div>
#if ($product->images)
<div class="additional-container">
<div class="swiper-viewport">
<div class="additional-images swiper-container">
<div class="swiper-wrapper">
<?php $i = 1; ?>
#foreach (json_decode($product->images, true) as $image)
<div class="item swiper-slide">
<a class="cloud-zoom-gallery sub-image" id="product-image-options-" href="{{ asset('storage/'.$product->image) }}" title="{{$product->name}}" rel="useZoom: 'product-cloud-zoom', smallImage: '{{ asset('storage/'.$product->image) }}'" data-pos="{{$i}}">
<img src="{{ asset('storage/'.$image)}}" title="Multi" alt="Multi" />{{$i}}
</a>
</div>
<?php $i++; ?>
#endforeach
</div>
</div>
<div class="swiper-pager">
<div class="swiper-button-next additional-button-next"></div>
<div class="swiper-button-prev additional-button-prev"></div>
</div>
</div>
</div>
#endif
</div>
<script src="{{asset('/js/jquery-2.1.1.min.js')}}"></script>
<script src="{{asset('/js/swiper.jquery.js')}}"></script>
I'm not getting any results.

Ajax not working for second time for duplicate value

While I am submitting this form via ajax it gets only the fist item. I am new so from the last three day I am looking on the web for a solution bit field. please someone help me.
<?php
include 'db.php';
$result = $mysqli -> query("SELECT * FROM AlmeenaShop LIMIT 8 ");
if($result -> num_rows <1){
/*echo"<h2 >No Record Found</h2>";*/
}else{
?>
<!DOCTYPE html>
<html>
<head>
<title>Insert data in MySQL database using Ajax</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div style="margin: auto;width: 60%;">
<div class="alert alert-success alert-dismissible" id="success" style="display:none;">
×
</div>
<?php foreach ($result as $row ) { ?>
<form id="fupForm" name="form1" method="post">
<div class="single-products">
<div class="productinfo text-center"><img width="200" height="250" alt="" src="<?php echo $row['ImageLocation'] ; ?> " />
<?php if ($row['OfferPrice']>0): ?>
<h2><?php echo "৳ ". $row['OfferPrice'] ." /-"; ?><del class="text-primary"><?php echo "৳ ". $row['SalesPrice'] ." /-"; ?></del></h2>
<?php else : ?>
<h2><?php echo "৳ ". $row['SalesPrice'] ." /-"; ?></h2>
<?php endif ?>
<p><?php echo $row['ProductName'] ; ?></p>
<p><input type="number" name="ProductQuantity" value="1" id="ProductQuantity<?php echo $row['StoreID'] ; ?>" step="1"></p>
<p><input type="hidden" id="StoreID<?php echo $row['StoreID'] ; ?>" name="StoreID" value="<?php echo $row['StoreID'] ; ?>"></p>
</div>
</div>
<input type="button" name="target" class="btn btn-primary" value="Save to database" id="<?php echo $row['StoreID'] ; ?>">
</form>
</div>
<?php
} /* FOr Whole Loop*/
}/* for if then else loop*/
?>
<script>
$(document).ready(function() {
$('.btn').on('click', function() {
var target = $(".btn").attr("id");
$("#"+target).attr("disabled", "disabled");
var StoreID = $('#StoreID'+target).val();
var ProductQuantity = $('#ProductQuantity'+target).val();
if(StoreID!="" && ProductQuantity!=""){
$.ajax({
url: "MyCart.php",
type: "POST",
data: {
StoreID: StoreID,
ProductQuantity: ProductQuantity
},
cache: false,
success: function(){
alert("ok");
}
});
}
else{
alert('Please fill all the field !StoreID: StoreID , ProductQuantity: ProductQuantity');
}
});
});
</script>
</body>
</html>
<script>
$(document).ready(function() {
var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i = 0; i <= buttonsCount; i += 1) {
buttons[i].onclick = function(e) {
//alert(this.id);
var targetid= this.id;
var PImg = $('#PImg_'+targetid).val();
var PName = $('#PName_'+targetid).val();
var PRPrice = $('#PRPrice_'+targetid).val();
var POPrice = $('#POPrice_'+targetid).val();
var PQ = $('#PQ_'+targetid).val();
var PSID = $('#PSID_'+targetid).val();
//alert(this.id+"StoreID"+StoreID+"ProductQuantity"+ProductQuantity);
if(PSID!="" && PQ!=""){
$.ajax({
url: "MyCart.php",
type: "POST",
data: {
PImg: PImg,
PName: PName,
PRPrice: PRPrice,
POPrice: POPrice,
PQ: PQ,
PSID: PSID
},
cache: false,
success: function(){
//alert("ok");
window.location.reload();
}
});
}
else{
// alert('Please fill all the field !');
}
}
};
});
</script>
<script>
$(document).ready(function() {
var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i = 0; i <= buttonsCount; i += 1) {
buttons[i].onclick = function(e) {
//alert(this.id);
var targetid= this.id;
var PImg = $('#PImg_'+targetid).val();
var PName = $('#PName_'+targetid).val();
var PRPrice = $('#PRPrice_'+targetid).val();
var POPrice = $('#POPrice_'+targetid).val();
var PQ = $('#PQ_'+targetid).val();
var PSID = $('#PSID_'+targetid).val();
//alert(this.id+"StoreID"+StoreID+"ProductQuantity"+ProductQuantity);
if(PSID!="" && PQ!=""){
$.ajax({
url: "MyCart.php",
type: "POST",
data: {
PImg: PImg,
PName: PName,
PRPrice: PRPrice,
POPrice: POPrice,
PQ: PQ,
PSID: PSID
},
cache: false,
success: function(){
//alert("ok");
window.location.reload();
}
});
}
else{
// alert('Please fill all the field !');
}
}
};
});
</script>
<?php
session_start();
include 'db.php';
//Get the current page number
if (isset($_GET['pageno'])) {
$pageno = $_GET['pageno'];
} else {
$pageno = 1;
}
//The formula for php pagination
$no_of_records_per_page = 21;
$offset = ($pageno-1) * $no_of_records_per_page;
//Get the number of total number of pages
$result = $mysqli -> query("SELECT * FROM AlmeenaShop ");
$total_rows=$result -> num_rows;
$total_pages = ceil($total_rows / $no_of_records_per_page);
//Constructing the SQL Query for pagination
$ConstructingPagination= $mysqli -> query("SELECT * FROM AlmeenaShop ORDER BY StoreID DESC LIMIT $offset, $no_of_records_per_page");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Almeena Shop</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/shop-homepage.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-----------Nav Bat---------------->
<div class="container">
<!-- Navigation Start -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark text-white">
<H1><span style="color:yellow">Almeena</span> <span style="color:white">Shop</span></H1>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a style="color:gold" class="nav-link" href="MyCart.php"><i style="color:gold" class="fa fa-shopping-cart"></i> <?php echo $ItemCount=count($_SESSION['cart']); ?></a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Navigation Start -->
<div class="container bg-light p-5">
<!-------####### Carosel Start ###########-------------------->
<div id="carouselExampleControls" class="carousel slide " data-ride="carousel">
<div class="carousel-inner ">
<div class="carousel-item active">
<img src="StoreImg/grocery_3.jpg" height="300"class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="StoreImg/Shopping-basket.jpg" height="300" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="StoreImg/3c.jpg" height="300" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-------####### Carosel END ###########-------------------->
</div>
<!-- Page Content -->
<div class="container">
<div class="row">
<!--------------------------LEft Cploum For Category Start ---------------------------------------->
<div class="col-lg-3 mt-5">
<?php
$ProductCategoryResult = $mysqli -> query ("SELECT ProductCategory, count(ProductCategory)AS PCC FROM AlmeenaShop GROUP BY ProductCategory ORDER BY ProductCategory");
?>
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header"><h5>Our Products</h5></div>
<div class="card-body text-primary">
<?php foreach ($ProductCategoryResult as $PCrow){
?>
<div class=" card-title" data-toggle="collapse" data-target="#<?php echo $PCrow['ProductCategory']; ?>" ><?php echo $PCrow['ProductCategory']; ?>
<div class="list-group collapse" id="<?php echo $PCrow['ProductCategory']; ?>" >
<ul>
<?php
$ProductSubCategoryResult = $mysqli -> query("SELECT ProductSubCategory FROM AlmeenaShop WHERE ProductCategory='".$PCrow['ProductCategory']."' GROUP BY ProductSubCategory ORDER BY ProductSubCategory ");
foreach ($ProductSubCategoryResult as $PSCrow){
?>
<li><?php echo $PSCrow['ProductSubCategory'];?> </li>
<?php } ?>
</ul>
</div>
</div>
<?php } ?>
<div class=" card-title" data-toggle="collapse" data-target="#demo241">Offer
<div class="list-group collapse" id="demo241" >
<ul>
<li>--------- </li>
<li>--------- </li>
<li>--------- </li>
<li>--------- </li>
<li>--------- </li>
<li>--------- </li>
</ul>
</div></div>
</div>
</div>
</div>
<!-- /.col-lg-3 -->
<!--------------------------LEft Cploum For Category End ---------------------------------------->
<!-----#########################Rignt Cploum For Product Start ############################------>
<div class="col-lg-9 mt-5">
<ul class="pagination">
<li class="page-item" ><a class="page-link" href="?pageno=1">First</a></li>
<li class="page-item <?php if($pageno <= 1){ echo 'disabled'; } ?>">
<a class="page-link" href="<?php if($pageno <= 1){ echo '#'; } else { echo "?pageno=".($pageno - 1); } ?>">Prev</a>
</li>
<li class=" page-item <?php if($pageno >= $total_pages){ echo 'disabled'; } ?>">
<a class="page-link" href="<?php if($pageno >= $total_pages){ echo '#'; } else { echo "?pageno=".($pageno + 1); } ?>">Next</a>
</li>
<li class="page-item"><a class="page-link" href="?pageno=<?php echo $total_pages; ?>">Last</a></li>
</ul>
<p>Page <?php echo $total_pages; ?> of <?php echo $pageno; ?></p>
<div class="row">
<?php foreach ($ConstructingPagination as $row) { ?>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100" >
<img class="card-img-top p-2" src="http://almeenashop.com/<?php echo $row['ImageLocation'] ; ?>" alt="">
<div class="card-body">
<h4 class="card-title">
<p style="color:black" ><?php echo $row['ProductName'] ; ?></p>
<a class="text-success" href="#">
<p style="color:orange">Price :</p>
<?php if ($row['OfferPrice']>0): ?>
<?php echo "৳ ". $row['OfferPrice'] ." /-"; ?><br /><del class="text-primary"><?php echo "৳ ". $row['SalesPrice'] ." /-"; ?></del>
<?php else : ?>
<?php echo "৳ ". $row['SalesPrice'] ." /-"; ?>
<?php endif ?>
</a>
</h4>
</div>
<div class="card-footer">
<form id="CartForm" name="form1" method="post" enctype="multipart/form-data">
<input type="hidden" name="PImg" id="PImg_<?php echo $row['StoreID'] ; ?>" value="<?php echo $row['ImageLocation'] ; ?>">
<input type="hidden" name="PName" id="PName_<?php echo $row['StoreID'] ; ?>" value="<?php echo $row['ProductName'] ; ?>">
<input type="hidden" name="PRPrice" id="PRPrice_<?php echo $row['StoreID'] ; ?>" value="<?php echo $row['SalesPrice'] ; ?>">
<input type="hidden" name="POPrice" id="POPrice_<?php echo $row['StoreID'] ; ?>" value="<?php echo $row['OfferPrice'] ; ?>">
<input type="hidden" name="PQ" id="PQ_<?php echo $row['StoreID'] ; ?>" value="1">
<input type="hidden" name="PSID" id="PSID_<?php echo $row['StoreID'] ; ?>" value="<?php echo $row['StoreID'] ; ?>">
<button type="button" class="btn btn-primary" id="<?php echo $row['StoreID'] ; ?>">Add to Cart</button>
</form>
| Details
</div>
</div>
</div>
<?php } ?>
</div>
<!-- /.row -->
</div>
<!-- /.col-lg-9 -->
<!-----######################----Rignt Cploum For Product End -----##########################---------------->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!------- &&&&&&&& Footer Start &&&&&&&&&&&&&&------------>
<footer id="footer">
<div class="footer-widget bg-dark text-white">
<div class="container pt-4 pb-5">
<div class="row">
<div class="col-sm-2">
<div class="single-widget">
<h5>Service</h5>
<ul>
<li>Online Help</li>
<li>Contact Us</li>
<li>Order Status</li>
<li>Change Location</li>
<li>FAQ’s</li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="single-widget">
<h5>Quock Shop</h5>
<ul>
<li>T-Shirt</li>
<li>Mens</li>
<li>Womens</li>
<li>Gift Cards</li>
<li>Shoes</li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="single-widget">
<h5>Policies</h5>
<ul>
<li>Terms of Use</li>
<li>Privecy Policy</li>
<li>Refund Policy</li>
<li>Billing System</li>
<li>Ticket System</li>
</ul>
</div>
</div>
<div class="col-sm-2">
<div class="single-widget">
<h5>About Shopper</h5>
<ul>
<li>Company Information</li>
<li>Careers</li>
<li>Store Location</li>
<li>Affillate Program</li>
<li>Copyright</li>
</ul>
</div>
</div>
<div class="col-sm-3 col-sm-offset-1">
<div class="single-widget">
<h5>News</h5>
<form action="#" class="searchform"><input placeholder="Your email address" type="text" /><button class="btn btn-default" type="submit"></button>
<p>Get the most recent updates from<br />
our site and be updated your self...</p>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row">
<p class="pull-left">Copyright © 2020 Inc. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<!------- &&&&&&&& Footer End &&&&&&&&&&&&&&------------>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function() {
var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i = 0; i <= buttonsCount; i += 1) {
buttons[i].onclick = function(e) {
//alert(this.id);
var targetid= this.id;
var PImg = $('#PImg_'+targetid).val();
var PName = $('#PName_'+targetid).val();
var PRPrice = $('#PRPrice_'+targetid).val();
var POPrice = $('#POPrice_'+targetid).val();
var PQ = $('#PQ_'+targetid).val();
var PSID = $('#PSID_'+targetid).val();
//alert(this.id+"StoreID"+StoreID+"ProductQuantity"+ProductQuantity);
if(PSID!="" && PQ!=""){
$.ajax({
url: "MyCart.php",
type: "POST",
data: {
PImg: PImg,
PName: PName,
PRPrice: PRPrice,
POPrice: POPrice,
PQ: PQ,
PSID: PSID
},
cache: false,
success: function(){
//alert("ok");
window.location.reload();
}
});
}
else{
// alert('Please fill all the field !');
}
}
};
});
</script>
</body>
</html>

how to send data-id to another page

im trying to send the id of the product selected in portfolio.php page to the page portfolio-detail.php and display the information from database according to the selected id
this is portfolio.php page
<ul class="portfolio-area da-thumbs">
<?php foreach ($product as $value): ?>
<li class="portfolio-item" data-id="id-0" data-type="web">
<div class="span3">
<div class="thumbnail">
<div class="image-wrapp">
<img src="<?php echo $target_dir.'/'.$value['product_pic']; ?>" alt="Portfolio name" title="" />
<article class="da-animate da-slideFromRight">
<a class="zoom" data-pretty="prettyPhoto" href="<?php echo $target_dir.'/'.$value['product_pic']; ?>">
<i class="icon-zoom-in icon-rounded icon-48 active"></i>
</a>
<a href="portfolio-detail.php" data-id="<?=$value['id']; ?>">
<i class="icon-link icon-rounded icon-48 active"></i>
</a>
<div class="hidden-tablet">
<p>
<?php echo $value['product_name']; ?>
</p>
</div>
</article>
</div>
</div>
</div>
</li>
<?php endforeach; ?>
</ul>
and this is portfolio-detail.php page
<section id="<?php echo $product['id']; ?>">
<div class="container">
<div class="row">
<div class="span12">
<article>
<div class="heading">
<h4><?php echo $product['product_name']; ?></h4>
</div>
<div class="clearfix">
</div>
<div class="row">
<div class="span8">
<!-- start flexslider -->
<div class="flexslider">
<ul class="slides">
<li>
<img src="<?php echo $target_dir.'/'.$product['product_pic']; ?>" alt="" />
</li>
</ul>
</div>
<!-- end flexslider -->
<p>
<?php echo $product['product_desc']; ?>
</p>
</div>
<div class="span4">
<aside>
<div class="widget">
<div class="project-widget">
<h4 class="rheading">Portfolio detail<span></span></h4>
<ul class="project-detail">
<li><label>Project name :</label> <?php echo $product['product_name']; ?></li>
<li><label>Category :</label> <?php echo $product['product_code']; ?></li>
<li><label>Project date :</label> 12 Apr 2013</li>
<li><label>Project link :</label>www.somelink.com</li>
</ul>
</div>
</div>
</aside>
</div>
</div>
</article>
<!-- end article full post -->
</div>
</div>
</div>
</section>
how to show the details of a product according to the one selected ?
Here's a solution:
In portfolio.php
Change:
<a href="portfolio-detail.php" data-id="<?=$value['id']; ?>">
To:
<a href="portfolio-detail.php?data-id=<?php echo $value['id']; ?>">
Top of portfolio-detail.php add:
$id = $_GET['data-id'];
Do your DB query with $id
$product = {db stuff here};
Of course all proper validation will need to get added.

chgAction in dropdown menu dosent send email. Worked before

So i've created a form that sends an email to me when you click the "skicka"(send on swedish) button. It works 100% and ive tested it, or rather it worked. Since i have a dropdown menu to change email address/form action it dosent work. I tried using javascript chgAction(), I've also tried different methods but this looked easiest. Somethings wrong but i dont know what since i dont receive any emails anymore. Is this a legitimate way of doing this?
Heres my index.php
NOTE: both kontakt.php and kontakt2.php works since i tried both without beforehand at the form action="".
<?php session_start() ?>
<!DOCTYPE HTML>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HS Konsult</title>
<meta name="description" content="" /><meta name="keywords" content="" /><!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]--><script src="js/jquery.min.js"></script><script src="js/jquery.scrollex.min.js"></script><script src="js/jquery.scrolly.min.js"></script><script src="js/skel.min.js"></script><script src="js/init.js"></script><noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-xlarge.css" />
</noscript><!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]--><!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
</head>
<body><!-- Header -->
<section id="header">
<header class="major">
<h1>HS Konsult</h1>
<p>En Hemsida om oss och vilka tjänster vi erbjuder.</p>
</header>
<div class="container">
<ul class="actions">
<li><a class="button special scrolly" href="#one">Gå Vidare</a></li>
</ul>
</div>
</section>
<!-- Two -->
<section class="main special" id="two">
<div class="container"><span class="image fit primary"><img alt="" src="" /></span>
<div class="content">
<header class="major">
<h2>Vad Gör Vi?</h2>
</header>
<p>Consequat sed ultricies rutrum. Sed adipiscing eu amet interdum lorem blandit vis ac commodo aliquet vulputate.</p>
<ul class="icons-grid">
<li><!--<span class="icon major fa-camera-retro"></span> -->
<h3><img alt="Peo" src="/img.jpg" style="width: 150px; height: 150px;" /></h3>
</li>
<li><!--<span class="icon major fa-pencil"></span> -->
<h3><img alt="Camilla" src="/2.jpg" style="width: 150px; height: 150px;" /></h3>
</li>
<li>
<h3>Camilla</h3>
</li>
<li>
<h3>Peo</h3>
</li>
</ul>
</div>
<a class="goto-next scrolly" href="#three">Next</a></div>
</section>
<!-- Footer -->
<section id="footer">
<div class="container">
<header class="major">
<h2>Kontakta Oss</h2>
</header>
<?php
//tillagd1
//init variables
$cf = array();
$sr = false;
if(isset($_SESSION['cf_returndata'])){
$cf = $_SESSION['cf_returndata'];
$sr = true;
}
?>
<ul id="errors" class="<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>">
<?php
if(isset($cf['errors']) && count($cf['errors']) > 0) :
foreach($cf['errors'] as $error) :
?>
<li><?php echo $error ?></li>
<?php
endforeach;
endif;
?>
</ul>
<!--function to run phpfile depending on person selected-->
<script type="application/javascript">
function chgAction() {
console.log('chgAction()');
console.log(form.selectperson.selectedIndex);
if(form.selectperson.selectedIndex=="option1" )
{document.maillista.action = "/kontakt.php";}
else if(form.selectperson.selectedIndex=="option2")
{document.maillista.action = "/kontakt2.php";}
}
</script>
<form id="maillista" name="maillista" action="/" method="post">
<fieldset>
<p>
<label>Välj Person Att Kontakta</label>
<Select class="target"id=selectperson name="selectperson" onChange="javascript:chgAction()">
<option value ="option1">Peo</option>
<option value ="option2">Camilla</option>
</Select>
</p>
<div class="row uniform">
<div class="6u 12u$(xsmall)"><input id="name" name="name" placeholder="Namn" type="text" /></div>
<div class="6u$ 12u$(xsmall)"><input id="email" name="email" placeholder="john.doe#email.com" type="email" /></div>
<div class="12u$"><textarea id="message" name="message" placeholder="Meddelandet måste vara längre än 20 karaktärer." data-minlength="20" rows="4"></textarea></div>
<div class="12u$">
<ul class="actions">
<li><input class="special" type="submit" name="submit" value="Skicka" id="button1"/></li>
</ul>
</div>
</div>
</fieldset>
</form>
<?php unset($_SESSION['cf_returndata']); ?>
</div>
<
<footer>
<ul class="icons"><!-- <li><span class="label">Twitter</span></li>
<li><span class="label">Facebook</span></li>
<li><span class="label">Instagram</span></li>
<li><span class="label">Dribbble</span></li>
<li><span class="label">Email</span></li> -->
</ul>
<ul class="copyright">
<li>© HS</li>
<li>Design:</li>
</ul>
</footer>
</section>
</body>
</html>

Radio submit in Magento header.phtml

Magento v1.7
How can I submit a form in the header.phtml by listening for changes on a radio button?
This is my code, if I change the radio buttons to a select dropdown it submits fine. I can't understand
$groupId = null;
if (Mage::getSingleton('customer/session')->isLoggedIn()) {
/* Get the customer data */
$customer = Mage::getSingleton('customer/session')->getCustomer();
/* Get the customer's full name */
$customer = Mage::getModel('customer/customer')->load($customer->getId()) ;
$groupId = $customer->getGroupId();
}
$cookieGroupId = Mage::getModel('core/cookie')->get('customer_group_id');
if ($cookieGroupId) {
$groupId = $cookieGroupId;
}
?>
<div id="alt-nav-container">
<ul id="alt-nav">
<li class="icon-reorder"><span>Navigation</span></li>
</ul>
</div>
<div class="header-container">
<header class="header">
<h1>
<figure>
<a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><span><?php echo $this->getLogoAlt() ?></span>
</a>
</figure>
</h1>
<div class="player-container">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li class="control-left"><span class="play-button"></span><span class="pause-button"></span></li>
<li class="control-center"><strong>Playing: <span class="jp-track-title"></span></strong> by <span class="jp-composer-name"></span></li>
<li class="control-right"><span class="volume-on-button"></span><span class="volume-off-button"></span></li>
</ul>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-duration"></div>
</div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
</div>
</div>
<!--
<div style="z-index:9999;">
<?php
// var_export(get_class_methods(get_class($GroupId)));
?>
</div> -->
<div class="license-type">
<ul class="select-license-tab">
<li><span>Select your license type <sub class="icon-chevron-down"></sub></span>
<ul>
<li>
<div class="license-form">
<form action="<?php echo $this->getUrl('mcustomer/group/update') ?>" method="post" id="form-group-update" name="form-group-update">
<dl class="accordion">
<?php $groups = Mage::helper('customer')->getGroups()->toOptionArray(); ?>
<?php foreach($groups as $group){ ?>
<div class="license-item">
<dt>
<?php if($groupId != null && $group['value'] == $groupId):?>
<input id="license-type-<?php print $group['value'] ?>" name="validate-one-required" type="radio" value="<?php print $group['value'] ?>" class="required-entry validate-one-required" checked="checked" />
<label for="license-type-<?php print $group['value'] ?>"><?php print $group['label'] ?></label>
<?php else: ?>
<input id="license-type-<?php print $group['value'] ?>" name="validate-one-required" type="radio" value="<?php print $group['value'] ?>" class="required-entry validate-one-required" />
<label for="license-type-<?php print $group['value'] ?>"><?php print $group['label'] ?></label>
<?php endif; ?>
</dt>
<dd>
<?php print $group['customer_description'] ?>
</dd>
</div>
<?php } ?>
</dl>
</form>
</div>
</li>
</ul>
</li>
</ul>
</div>
</header>
</div>
<div class="navigation-bar">
<div class="navigation-bar-wrapper">
<?php echo $this->getChildHtml('topContainer'); ?>
<?php echo $this->getChildHtml('topSearch') ?>
<?php echo $this->getChildHtml('topLinks') ?>
<?php echo $this->getChildHtml('store_language') ?>
<?php echo $this->getChildHtml('topMenu') ?>
</div>
</div>
<script type="text/javascript">
//< ![CDATA[
var customForm = new VarienForm('form-group-update');
Event.observe($("validate-one-required"),'change', function(event){
$('form-group-update').submit();
});
//]]>
</script>
Thanks in advance
You should add a new class to your radio to prevent conflict with forms on other page since validate-one-required is not unique, or use more unique class selector eg $$('.license-form .validate-one-required').each..
$$('.license-form_radios').each(function(curInput) {
Event.observe(curInput, 'click', function() {
$('form-group-update').submit();
});
});

Categories