Develop Reference

loop returns same value multiple times

I have a WordPress loop where I list the data. I create a button dynamically and set their ids.
When I set that id into a textbox I can see that all buttons have different ID because I increment the number each time. Until here everything is okay and working fine.
but need to use javascript for setting the textbox value with value of button ID.
I use this following code:
<script>
jQuery(document).ready(function($){
$('.p-name-x').click(function(){
$('#dynamic-field').val($(".the-prod-counter").val());
});
alert($(".the-prod-counter").val());
});
</script>
on my $('.p-name-x').click(function() x should be changed with the number if ID i get from the loop.
on my alert it always gives the first ID. For example if I have 3 buttons the alert gives 3 times the first id!
How can get the alert to show the other numbers as well?
------------- EDIT --------------
Here is part of my code
<?php
$type = 'stiel_privatkunden';
$args=array('stiel_privatkunden_cat' => $post_slug, 'post_type' => $type, 'posts_per_page'=>-1, 'order'=>'ASC');
$my_query = new WP_Query($args);
$i=1;
$idh=1;
while ($my_query->have_posts()) : $my_query->the_post();
if($i%2==0) {
?>
<div class="row" style="background:#f3f3f3" id="<?php the_field('prod_slug'); ?>">
<div class="col-xs-12 col-sm-6">
<figure class="pro-innerpage-img">
<?php the_post_thumbnail(); ?>
</figure>
</div>
<div class="col-xs-12 col-sm-6" style="padding:20px;">
<div class="title_content">
<div class="the-title"><?php the_title();?></div>
<div class="the-desc"><?php the_field('description'); ?></div>
<?php if( get_field('passende_Produkte') ): ?>
<div class="vc_toggle vc_toggle_square vc_toggle_color_black vc_toggle_color_inverted vc_toggle_size_md">
<div class="vc_toggle_title" tabindex="0"><h4>passende Produkte</h4><i class="vc_toggle_icon"></i></div>
<div class="vc_toggle_content" style="display: none;">
<p><?php the_field('passende_Produkte'); ?></p>
</div>
</div>
<?php endif; ?>
<?php if( get_field('link_mehr_erfahren') ): ?>
<span class="theme-button-inner">mehr erfahren</span>
<?php endif; ?>
<?php if( get_field('link_jetz_anfragen') ): ?>
<span class="theme-button-inner">jetzt anfragen</span>
<?php endif; ?>
</div>
<!--<input type="text" name="the-prod-name" class="the-prod-name-<?php echo $idh; ?>" value="<?php the_field('prod_slug');?>">-->
<input type="hidden" name="the-prod-counter" class="the-prod-counter" value="<?php echo the_field('prod_slug') . '-'. $idh; ?>">
<!--<input type="text" name="the-prod-idk" class="the-prod-idk" value="<?php //echo $idh; ?>"> -->
<script>
jQuery(document).ready(function($){
$('.p-name').click(function(){
$('#dynamic-field').val($(".the-prod-counter").val());
});
//alert($(".the-prod-counter").val());
});
</script>
</div>
</div>
<br/>
<?php } else { ?>

Pick items from while loop php

For a school project I have to make a simple webshop.
To display my featured products on the hopepage I used a while loop. But now I want to add a shoppingcart. So after you pressed the button add to cart the right data has to be picked and display on another page. I will do that with cookies. So all I need is to get the right data in a variable.
I tried to use the result right away but that didn't work.
<?php
$sql = "SELECT * FROM product WHERE featured = 1 AND nr_available > 0";
$resultquery = $conn->query($sql);
?>
<div class="preview">
<?php while ($result = mysqli_fetch_assoc($resultquery)) : ?>
<div class="productpreview">
<div class="previewheader">
<img src="images/products/<?=$result['picture']; ?>" class="previewimg" style="max-width: 300px;">
</div>
<div class="description">
<h2><?=$result['title']; ?></h2>
<p><?=$result['description']; ?></p>
<p>Size: <?=$result['size']; ?></p>
<p>Price: € <?=$result['price']; ?></p>
<button class="add" onclick="window.location.href='buy.php'">Buy</button>
<button class="add" onclick="window.location.href='shoppingcart.php'">Add to cart</button>
</div>
</div>
<?php endwhile; ?>
</div>
I want to store the right data in variables which I can display on another page.

I have tried this:
<?php
$sql = "SELECT * FROM product WHERE featured = 1 AND nr_available > 0";
$resultquery = $conn->query($sql);
?>
<div class="preview">
<?php while ($result = mysqli_fetch_assoc($resultquery)) : ?>
<div class="productpreview">
<div class="previewheader">
<img src="images/products/<?=$result['picture']; ?>" class="previewimg" style="max-width: 300px;">
</div>
<div class="description">
<h2><?=$result['title']; ?></h2>
<p><?=$result['description']; ?></p>
<p>Size: <?=$result['size']; ?></p>
<p>Price: € <?=$result['price']; ?></p>
<button class="add" onclick="window.location.href='buy.php'">Buy</button>
<button class="add" onclick="window.location.href='shoppingcart.php/id=<?=$result['product_id']; ?>'">Add to cart</button>
</div>
</div>
<?php endwhile; ?>
</div>
and this is the page where I want to show the user his shoppingcart data.
<?php
include "core/core.php";
include "parts/head.php";
include "parts/navbar.php";
include "core/helpers.php";
if ($_SESSION['loggedIn'] == 'true') {
echo "welkom";
$productid = $_GET['product_id'];
$sql = "SELECT * FROM product WHERE id = '$productid'";
$query = $conn->query($sql);
$result = mysqli_fetch_assoc($query);
} else {
echo "log in ";
}
?>
<h1>Your cart</h1>
<p><?=$result['title']; ?></p>
<?php
include "parts/footer.php";
?>
for some reason this doesn't work. I have no errors.

Show/hide info using slideToggle on button

Objective Inserting name(input-text) and info(textarea-contains multiple lines) into the database, and after submission of the form, at the same page, 2 columns are for displaying the same data in columns, name & info, but under info column. I have made buttons for each row in front of the names, which is used as slideToggle for showing/hiding which contains the data retrieved from the 'info' column
Problem - when I am clicking the button of 1st row, instead of displaying the info related to 1st entry only, it is sliding and showing all info(s) related to all entries at only click.
*others - one more input has been added to the form but as hidden used for id(auto increment)
----index.php-----
<?php include('php_code.php'); ?>
<?php
if (isset($_GET['edit'])) {
$id = $_GET['edit'];
$update = true;
$record = mysqli_query($db, "SELECT * FROM records WHERE id=$id");
if (count($record) == 1 ) {
$n = mysqli_fetch_array($record);
$name = $n['name'];
$acc = $n['acc_no'];
$info = $n['info'];
}
}
?>
<html>
<head>
<title>JSK</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('form').hide();
$('p').hide();
$('#sp').hide();
$("#inf").click(function(){
$("p").slideToggle();
$('#sp').slideToggle();
});
$("#fo").click(function(){
$("form").slideToggle();
});
});
</script>
</head>
<body>
<div class="container">
<div class="left">
<?php if (isset($_SESSION['message'])): ?>
<div class="msg">
<?php
echo $_SESSION['message'];
unset($_SESSION['message']);
?>
</div>
<?php endif ?>
<?php $results = mysqli_query($db, "SELECT * FROM records"); ?>
<table>
<thead>
<tr>
<th>Name</th>
<th>Account No</th>
<th>Info</th>
<th colspan="2">Action</th>
</tr>
</thead>
<?php while ($row = mysqli_fetch_array($results)) { ?>
<tr>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['acc_no']; ?></td>
<td><button id="inf" onclick="myFunction()">show</button></td>
<td>
<a href="index.php?edit=<?php echo $row['id']; ?>" class="edit_btn" >Edit</a>
</td>
<td>
Delete
</td>
</tr>
<tr id="sp"> <td colspan="4"><p> <?php echo $row['info']; ?> </p></td>
</tr>
<?php } ?>
</table>
<div id="fotable" align="center">
<button id="fo">Add New/Edit</button>
</div>
<form method="post" action="php_code.php" >
<input type="hidden" name="id" value="<?php echo $id; ?>">
<div class="input-group">
<label>Name</label>
<input type="text" autocomplete="off" name="name" value="<?php echo $name; ?>">
</div>
<div class="input-group">
<label>Account No</label>
<input type="text" name="acc" value="<?php echo $acc; ?>">
</div>
<div class="input-group">
<label for="info">Info</label>
<textarea class="form-control" rows="8" name="info" id="info"><?php echo $row['info']; ?></textarea>
</div>
<div class="input-group">
<?php if ($update == true): ?>
<button class="btn" type="submit" name="update" style="background: #556B2F;" >update</button>
<?php else: ?>
<button class="btn" type="submit" name="save" >Add Account</button>
<?php endif ?>
</div>
</form>
</div><!-- left closed -->
<div class="right">
hello
</div> <!-- right closed -->
</div> <!-- container closed -->
</body>
</html>
---php_code.php-----
<?php
session_start();
$db = mysqli_connect('localhost', 'root', '', 'jskrecords');
// initialize variables
$name = "";
$acc = "";
$info = "";
$id = 0;
$update = false;
if (isset($_POST['save'])) {
$name = $_POST['name'];
$acc = $_POST['acc'];
$info = $_POST['info'];
mysqli_query($db, "INSERT INTO records (name, acc_no, info) VALUES ('$name', '$acc', '$info')");
$_SESSION['message'] = "Account saved";
header('location: index.php');
}
if (isset($_POST['update'])) {
$id = $_POST['id'];
$name = $_POST['name'];
$acc = $_POST['acc'];
$info = $_POST['info'];
mysqli_query($db, "UPDATE records SET name='$name',acc_no='$acc',info='$info' WHERE id=$id");
$_SESSION['message'] = "Account updated!";
header('location: index.php');
}
if (isset($_GET['del'])) {
$id = $_GET['del'];
mysqli_query($db, "DELETE FROM records WHERE id=$id");
$_SESSION['message'] = "ACC deleted!";
header('location: index.php');
}
?>

Concept:
If you are creating multiple form from same mysql table using php script, You need to give each form a unique id.
e.g.
<form method="post" action="php_code.php" id="form<?= $id ?>">
Then add data-target="#form" to button with class 'inf'. It will store id of form.
<button class="inf" data-target="#form<?= $id ?>">show</button>
When button is clicked we know which form to open from data-target.
<script>
$('.container').on('click','button.inf',function(e){
e.preventDefault();
var formid=$(this).attr('data-target'); //get value of data-target attribute
//...proceed to play toggle with this form 'formid'

How to hide element in page "B.php" by clicking a checkbox in Page "A.php" using javascript or AJAX or any other way

http://hespv.ca/solar-resources/solar-installer-tools/fr-component-generator
In This tool on step 2 i want to do like, if i check ULTRA-FLASH in Anchor types which is Page "A.php" then Select foot should disappear. Select foot coulmn is coming from Page "B.php"
Code of B.php is mostly same as A.php
**# Header 1 #
Code of Page "A.php"------**
<?php
function radialAnchors($roof_id){
require_once("conn.php");
require_once('query.php');
$anchors = sqlQuery("SELECT anchors.anchor_id, anchors.code, anchors.href, anchors.image_src, anchors.description
FROM roof_types INNER JOIN anchors
ON roof_types.roof_id = anchors.roof_type_fk
WHERE roof_types.roof_id = $roof_id
ORDER BY anchors.priority ASC", $conn);
$checked = 0;
foreach ($anchors as $anchor) {
?>
<div class="row anchor-row">
<div class="col-2-12 center">
<div class="img-box">
<a href="<?php echo $anchor['href']; ?>" target="_blank">
<img src="<?php echo $anchor['image_src']; ?>"alt="<?php echo $anchor['code']; ?>">
</a>
</div>
</div>
<div class="col- md-1-12 md-show sm-hide"> </div>
<div class="col-8-12 md-10-12 center">
<h2><?php echo $anchor['code']; ?></h2>
<p><?php echo $anchor['description']; ?></p>
<p>Find out more</p>
</div>
<div class="col-1-12 center">
<br><br><input type="radio" name="anchorRadios" id="anchor<?php echo $anchor['anchor_id']; ?>" value="<?php echo $anchor['anchor_id']; ?>" <?php if(!$checked++) echo 'checked'; ?>>
<label for="anchor<?php echo $anchor['anchor_id']; ?>"></label>
</div>
</div>
<?php
}
}
?>

As per my understandings you need to hide select foot when you select ULTRA-FLASH. This you can do using jquery. write change listener for your ULTRA-FLASH on change you can hide select foot div completely.
$(document).on('change', '#ultra-flash-id', function(){
this.checked ? $("#select-foot-id").hide() : $("#select-foot-id").show();
});

How can i load data in individual product popup in magento

I want to show product details in pop-up on click product name in product page. Here is my code:
<?php
if (count($data['product']) > 0) {
foreach ($data['product'] as $product) {
$product_id = $product->getId();
$product_name = $product->getName();
$isporductImage = $product->getImage();
$product_image = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB, true) . "media/catalog/product" . $product->getImage();
$isproductthumbnail = $product->getThumbnail();
$product_thumbnail = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB, true) . "media/catalog/product" . $product->getThumbnail();
$collectionimage = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB, true) . "media/catalog/category/thumb/" . $data['collection']['image'];
$productplaceholderImage = $this->getSkinUrl() . "whi/assets/images/whi_placeholder.png";
?>
<div class="celeb-post" id="products-listing" style="text-align: center; width: 228px;">
<?php if ($isproductthumbnail != "") { ?>
<div class="image-div" style="background: url('<?php echo $product_thumbnail;?>');">
<img src="<?php echo $product_thumbnail; ?>" alt="celeb" />
</div>
<?php }elseif ($isporductImage != "") { ?>
<div class="image-div" style="background: url('<?php echo $product_image;?>');">
<img src="<?php echo $product_image; ?>" alt="celeb" />
</div>
<?php } else { ?>
<div class="image-div" style="background: url('<?php echo $productplaceholderImage;?>');">
<img src="<?php echo $productplaceholderImage ?>" alt="celeb" />
</div>
<?php } ?>
<div class="hover-image-bg" style="width: 86.9%; height: 69.3%;">
<img style="padding-left: 38px;" src="<?php echo $this->getSkinUrl() ?>whi/assets/images/heart.png">
<img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/bag.png">
<img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/move.png">
<img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/assign.png">
</div>
<div style="clear:both; height:10px;"></div>
<div class="celeb-name-title ucase clearfix" style="text-align:center;"><?php echo $product_name; ?></div>
</div>
<?php
}
}else{ ?>
<table style="width:100%;">
<tr><td style="text-align: center; height: 100px; font-weight: bold;">No Product found in Collection, you can add by clicking on +New button at the top right.</td></tr>
</table>
<?php
}
?>
And login-box5 code is:
<div id="login-box5" class="login-popup login-popup5">
<img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/close_pop.png" class="btn_close" style="width:100%;" />
<img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/new-collection.png">
<div class="brand-position-outfite" id="celeb-position-outfite">
<img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/celeb.png">
<h5>Brand Name</h5>
<div style="clear:both;"></div>
<h5>Product Name</h5>
<BR><BR>
<textarea rows="10" class="add-txtarea-cmt">Description....</textarea>
</div>
</div>
So, simply if I click on Product Name, then popup will appear and show details of that product, like product name and product description. Can anyone help me to sort out this problem. I think this can be done through AJAX, JavaScript but don't know how can I embed script in my code.
Waiting of your kind response thanks in advance.

Yes you need to create ajax function to load the data. Also you can create ajax request handle so that particular template will be used to show the data. You can get better idea about the functionality using the below Quick view extension:
https://github.com/czettnersandor/magento-quick-view-ajax

I would suggest you output your "popup"-information in your existing product-listing/view template in a special div-block which is connected to your product.
A simple example for product listing:
you list your productnames and popupdata in the template/catalog/product/list.phtml:
<?php foreach ($_productCollection as $_product): ?>
<h3 class="productpreview" data-sku="<?php echo $_product->getSku(); ?>"><?php echo $_product->getName(); ?></h3>
<div class="popup" id="pop_<?php echo $_product->getSku(); ?>">
/*insert your other productdata here*/
<?php echo $_product->getShortDescription(); ?>
</div>
<?php endforeach;?>
The class popup should be display: none; in css
I would suggest that you then use something like fancybox to display that content. If you have access to jquery, you could also write this to show the content and with added css you could easily make a cool looking popup:
jQuery(document).ready(function(){
$('.productpreview').click(function(){
var sku = $(this).data('sku');
$('#pop_'+sku).toggle();
});
});
if you want the functionality in the product view page you modifiy template/catalog/product/view.phtml
<h3 class="productpreview" data-sku="<?php echo $_product->getSku(); ?>"><?php echo $_product->getName(); ?></h3>
<div class="popup" id="pop_<?php echo $_product->getSku(); ?>">
/*insert your other productdata here*/
<?php echo $_product->getShortDescription(); ?>
</div>
It is the same CSS/Jquery code, you only need to remove the foreach-loop.