while ($row = mysqli_fetch_array($result)) { echo "";
echo "<div id='img_div'>";
echo "<i class='fas fa-times'></i>";
echo "<img class='photoDeGallery' src='image/".$row['image']."'>";
echo "<div class='dropdown'>";
echo "<span>Details</span> ";
echo "<div class='dropdown-content'>";
echo "<p>".$row['text']."</p>";
echo "</div>";
echo "</div>";
echo "<div class='feedback'>";
echo "<input type='radio' name='star' id='loveIt' checked='checked'>";
echo "<label for='loveIt'>";
echo "<img class='imag' src='love_it.png'>";
echo "<h4>love it</h4>";
echo "</label>";
echo "<input type='radio' name='star' id='likeIt'>";
echo "<label for='likeIt'>";
echo "<img class='imag' src='liked_it.png'>";
echo "<h4>like it</h4>";
echo "</label>";
echo "<input type='radio' name='star' id='applause'>";
echo "<label for='applause'>";
echo "<img class='imag' src='applause.png'>";
echo "<h4>applaus</h4>";
echo "</label>";
echo "<input type='radio' name='star' id='laugh'>";
echo "<label for='laugh'>";
echo "<img class='imag' src='laugh.png'>";
echo "<h4>laugh</h4>";
echo "</label>";
echo "<input type='radio' name='star' id='boring'>";
echo "<label for='boring'>";
echo "<img class='imag' src='boring.png'>";
echo "<h4>boring</h4>";
echo "</label>";
echo "</div>";
echo "</div>";
echo "</div>";
}
Hallo, I provided the code above.
On a button_click runs the code above. The code inserts pictures on database and shows them on the website. Under each photo inside an img_div also been shown the "details" to the pic as well as rating. The rating-system I created using radio input (as it is to see in the code). The rating-system appears under every picture, which has been uploaded to the database and shown on the website.
The problem is:
when I rate a picture, all other pictures get the same rating.
How can i keep for each picture the own rating, so that rating been assigned 1:1 rating1:photo1, rating2:photo2 etc. ?
Should I store rating_clicks in a database or is there away to count the rates (likes, dislikes etc)?
I will be grateful if someone could help me and Modos wouldn't close my thread?
Best regards
Reda
Your radio groups need the same name, but each group needs it's own unique shared name. You can do this by appending the ID of the item in with the name. That way when you sort out the POST data you'll have a reference to the ID that goes with the rating. Also you shouldn't be using the same IDs for multiple elements, so I changed those to data-attributes. You can wrap the text and radio in the label tag to associate the two together
<?php while ($row = mysqli_fetch_array($result)) { ? >
<div id='img_div'>
<i class ='fas fa-times'></i>
<img class='photoDeGallery' src='image/<?php echo $row['image']?>'>
<div class='dropdown'>
<span>Details</span>
<div class='dropdown-content'>
<p><?php echo $row['text']?></p>
</div>
</div>
<div class='feedback'>
<label>
<input type='radio' name='star_<?php echo $row['id']?>' data-reaction='loveIt' checked='checked'>
<img class='imag' src='love_it.png'>
<h4>love it</h4>
</label>
<label>
<input type='radio' name='star_<?php echo $row['id']?>' data-reaction='likeIt'>
<img class='imag' src='liked_it.png'>
<h4>like it</h4>
</label>
<label>
<input type='radio' name='star_<?php echo $row['id']?>' data-reaction='applause'>
<img class='imag' src='applause.png'>
<h4>applaus</h4>
</label>
<label>
<input type='radio' name='star_<?php echo $row['id']?>' data-reaction='laugh'>
<img class='imag' src='laugh.png'>
<h4>laugh</h4>
</label>
<label>
<input type='radio' name='star_<?php echo $row['id']?>' data-reaction='boring'>
<img class='imag' src='boring.png'>
<h4>boring</h4>
</label>
</div>
Then in your $_POST you can find your ratings like this
<?php
foreach ($_POST as $p => $v) {
if (strpos($p, 'star_')!== false) { // if the name of the $_POST item has the string 'star_' in it
$imgid = explode('_', $p)[1]; // get the id by exploding the name into an array like ['star','7'] and choosing the [1] index
$rating = $v; // the rating itself will just be the $_POST value
}
}?>
Related
I'm trying to make a shopping page. I've kept checkboxes for selection and a number type field for quantity. As checkboxes are array I took the quantity field also an array... I know that we can check the checkbox state with checked method, now what I'm trying to achieve is to fetch corresponding quantity value and store it in a session varaible.
<?php
session_start();
if(isset($_POST['sub'])){
$_SESSION['cbb']=$_POST['cb'];
if(isset($_POST['qnty'])){
$_SESSION['qtty']=$_POST['qnty'];
header("location:userlogin.php");
}
}
?>
<html>
<head>
</head>
<body topmargin="20">
<font color='#7FFF00'>
<h1 align='center'>ONLINE SHOPPING</h1>
</font>
<form name="onshop" align="right" action="<?=$_SERVER["PHP_SELF"]?>"
method="post" onsubmit="return validate()">
<input type="submit" value="Add to cart" name="sub" style="background-
color:#7FFF00" />
<input type="reset" value="Reset" style="background-color:#7FFF00"/>
<?php
$db=mysqli_connect("localhost","root","","onlineshop");
if(!$db){
echo "Connection failure.";
}
$sql="SELECT * FROM stock";
$result=mysqli_query($db,$sql)or die("Invalid query ".mysqli_error($db));
echo "<TABLE width=50% height=70% align='center'>";
echo "<TR><TH>ITEM NAME</TH><TH>PRICE</TH><TH>IMAGE</TH><TH>Do you like?
</TH><TH>QUANTITY</TH></TR>";
while($myrow=mysqli_fetch_array($result))
{
echo "<TR><TD align='center'>";
echo $myrow["item"];
echo "</TD>";
echo "<TD align='center'>";
echo $myrow["price"];
echo "</TD>";
echo "<TD align='center'>";
$image=$myrow["image"];
echo '<img height="100" width="100" src="data:image/jpeg;base64,'.base64_encode( $image ).'"/>';
echo "</TD>";
echo "<TD align='center'>";
$itm_id=$myrow["id"];
echo "<input type='checkbox' name='cb[]' value='$itm_id'>";
echo "</TD>";
echo "<TD align='center'>";
echo "<input type='number' name='qnty[]' value='1' max='50'
min='1'>";
echo "</TD>";
echo "</TR>";
}
echo "</TABLE>";
mysqli_close($db);
?>
</form>
<script type="text/JavaScript">
function validate(){
var count=0;
var i;
var cbelements = document.getElementsByName("cb[]");
if(count==0){
for(i=0;i<cbelements.length;i++){
if(cbelements[i].checked){
count++;
}
}
if(count<1){
alert("Select atleast 1 item.");
return false;
}
}
}
</script>
</body>
</html>
Can the onchange event be useful in anyway? or the associative array ?
The product list will be populated from MySql Database using PHP code and is having a check box for each product.
On that page, whenever a check box is clicked, I need that product to be highlighted and store its value to some other array type variable to pass that value to another page.
Code for product list creation:
<?php
$cnt=0;
$rslt = mysqli_query($conn,"SELECT Icode,Name,Size,Style FROM productinfo");
if(!$rslt){
die(mysqli_error($conn));
}else{
echo "<table width='100%'>";
while($row = mysqli_fetch_assoc($rslt)){
if($cnt==0){
echo "<tr>";
}
echo "<td width='30%'>
<div class='card'>
<img src='upload/"."download.jpg"."' alt='Avatar' style='width:100px' >
<div class='container'>
<h4><b>".$row['Name']." <input type='checkbox' name=".$row['Icode']." value=".$row['Icode']." onclick=' echo return OptionsSelected(this)'/> </b></h4>
<p>".$row['Size']."</p>
<p>".$row['Icode']."</p>
</div>";
?>
<!-- <button role="button" data-toggle="modal" data-id="<?php print $row['Icode']?>" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Inquiry</button>
</div>
<?php
echo "</td>";
if($cnt==2){
$cnt=0;
echo "</tr>";
}
else
$cnt = $cnt + 1;
}
}
echo "</table>";
?>
This is my first post here so I apologize in advance if the formatting is wrong.
I am working on a form that pulls data from MySQL using a loop and outputs it to HTML page. The user then has the option to approve or deny the entries, and based on user selection validation should be required or optional. My current code will validate correctly, but only for the first row being outputted from the loop. I am trying to validate all rows. I have tried using a while loop and foreach statement with no success. Any help would be greatly appreciated!
My Loop & Form:
//connect to the database
$db=mysqli_connect('localhost','root','') or die ('I cannot connect to the database because: ' . mysql_error());
//-select the database to use
$mydb=mysqli_select_db($db,"my_db") or die(mysql_error());
//-query the database table
$sql="SELECT id, date, client_name, client_number, date_completed, status FROM clients WHERE client_name LIKE '%" . $search ."%' OR status LIKE '%" . $search ."%' ";
//-run the query against the mysql query function
$result=mysqli_query($db, $sql);
//-count results
$rows=mysqli_num_rows($result);
if($rows=mysqli_num_rows($result)) {
echo "<h2 style='margin-left: 10em;margin-bottom: -0.4em;'><br><br><br>" . $rows . " result(s) found for " . $search . "</h2><br />";
}elseif($rows=mysqli_num_rows($result) == 0) {
echo "<h2 style='margin-left: 10em;margin-bottom: -0.4em;'><br><br><br>0 result(s) found for " . $search . "</h2><br />";
}
//-create while loop and loop through result set
while($row=mysqli_fetch_assoc($result)){
$id=$row['id'];
$date=$row['date'];
$client_name=$row['client_name'];
$client_number=$row['client_number'];
$date_completed=$row['date_completed'];
$status=$row['status'];
echo "<form method='post' enctype='multipart/form-data' action=''>";
echo "<table border='0'>";
echo "<tr>\n";
echo "<td>Timestamp</td><td>Client Name</td><td>Client Number</td>Status</td><td>Date Completed & Returned</td><td>Upload Zip Files</td>\n";
echo "</tr>";
echo "<tr>\n";
echo "<td readonly class='date'>$date</td>\n";
echo "<td><input readonly type='text' id='client_name' name='client_name' value='$client_name'></td>\n";
echo "<td><input readonly type='text' id='client_number' name='client_number' value='$client_number'></td>\n";
echo "<td><select id='status' name='status' aria-invalid='false'>
<option value=''>Select an option</option>
<option value='Denied'>Denied</option>
<option value='Approved'>Approved</option>
</select></td>\n";
echo "<td><input type='date' id='date_completed' name='date_completed_returned' value='$date_completed'></td>\n";
echo "<td><input type='file' id='upload' name='upload'></td>";
echo "<td class='submit'><input type='hidden' id='hidden' name='hidden' value='$client_name'><input type='submit' id='save' name='save' value='Save'></td>\n";
echo "</tr>";
echo "</table>";
echo "</form>";
}
My jQuery code:
I am trying to make date_completed and upload fields required if user selects "Approved" under status field, and optional if he selects "Denied".
<script>
$('#status').on('change', function() {
if ( this.value == 'Approved')
$("#date_completed").prop('required',true)
}).trigger("change"); // notice this line
$('#status').on('change', function() {
if ( this.value == 'Approved')
$("#upload").prop('required',true)
}).trigger("change"); // notice this line
</script>
Thanks to KevinB I was able to find a solution to my problem.
I added class names for the input fields (status, date_completed, upload) I was trying to validate:
Updated code below:
echo "<form method='post' enctype='multipart/form-data' action=''>";
echo "<table border='0'>";
echo "<tr>\n";
echo "<td>Timestamp</td><td>Client Name</td><td>Client Number</td>Status</td><td>Date Completed & Returned</td><td>Upload Zip Files</td>\n";
echo "</tr>";
echo "<tr>\n";
echo "<td readonly class='date'>$date</td>\n";
echo "<td><input readonly type='text' id='client_name' name='client_name' value='$client_name'></td>\n";
echo "<td><input readonly type='text' id='client_number' name='client_number' value='$client_number'></td>\n";
echo "<td><select id='status' name='status' class='status' aria-invalid='false'>
<option value=''>Select an option</option>
<option value='Denied'>Denied</option>
<option value='Approved'>Approved</option>
</select></td>\n";
echo "<td><input type='date' id='date_completed' name='date_completed' class='date_completed' value='$date_completed'></td>\n";
echo "<td><input type='file' id='upload' name='upload' class='upload'></td>";
echo "<td class='submit'><input type='hidden' id='hidden' name='hidden' value='$client_name'><input type='submit' id='save' name='save' value='Save'></td>\n";
echo "</tr>";
echo "</table>";
echo "</form>";
<script>
$('.status').on('change', function() {
if ( this.value == 'Approved')
$('.date_completed').prop('required',true)
}).trigger("change"); // notice this line
$('.status').on('change', function() {
if ( this.value == 'Approved')
$('.upload').prop('required',true)
}).trigger("change"); // notice this line
</script>
My code is fetch data from database (suppose there are 4 records). Only first loop that effected when i changed radio button. Below is my code:
PHP CODE
while($row = mysql_fetch_array($sql)){
echo "<div class='loop'>";
echo "<p><input type='checkbox' name='content_type' value='1' /></p>";
echo "<p><input type='checkbox' name='content_type' value='2' /></p>";
echo "<p><input type='checkbox' name='content_type' value='3' /></p>";
//content_a
echo "<div id='content_a' style='display:none;'>";
echo "<textarea name='text' id='textarea0'><textarea>";
echo "</div>";
//content_b
echo "<div id='content_b' style='display:none;'>";
echo "<textarea name='text' id='textarea1'><textarea>";
echo "</div>";
//content_c
echo "<div id='content_c' style='display:none;'>";
echo "<textarea name='text' id='textarea2'><textarea>";
echo "</div>";
//button
echo "<div class='button'>";
echo "<a class="tweet1" href="#" onclick="return false;">Alert</a>";
echo "</div>";
echo "</div>";
}
Javascript
$('input[name=content_type]').bind('change', function(){
var n = $(this).val();
switch(n)
{
case '1':
$(this).parents('.loop').find('#content_a').show(1000);
$(this).parents('.loop').find('#content_b').hide(1000);
$(this).parents('.loop').find('#content_c').hide(1000);
break;
case '2':
$(this).parents('.loop').find('#content_b').show(1000);
$(this).parents('.loop').find('#content_a').hide(1000);
$(this).parents('.loop').find('#content_c').hide(1000);
break;
case '3':
$(this).parents('.loop').find('#content_c').show(1000);
$(this).parents('.loop').find('#content_a').hide(1000);
$(this).parents('.loop').find('#content_b').hide(1000);
break;
}
});
I want radio button action change according to the loop that fetch from database. My code above, only first loop that effected. How to solve this problem?
that is beacuse id should always be unique...here (in your code ) you have multiple elements with same id id='content_a' (since it is inside a loop) . change this to class and use class selector
try this
html
echo "<div class='content_a' style='display:none;'>";
//---^^^^^ here
jquery
$(this).parents('.loop').find('.content_a').show(1000);\
//-------^-----here
change likewise to all other id selector
and while parents('.loop') works.. i recommend to use closest() for better performance
$(this).closest('.loop').find('.content_a').show(1000);
and yes.. you can reduce your code to two lines if you chnage your html properly..
first change you content to match with the checkbox value..
echo "<div class='content_1' style='display:none;'>"; //here class='content_' + value of checkbox
.....
echo "<div class='content_2' style='display:none;'>";
... //so on
try this
$('input[name=content_type]').bind('change', function(){
var n = $(this).val();
$('div[class^="content_"]').hide(); //hide all div
$(this).closest('.loop').find('.content_' + n).show(1000); //so particular div
});
I'm new to javascript that why i don't know how to get value using javascript.
Here is my PHP script
while($row = mysql_fetch_array($sql)){
echo "<div class='loop'>";
if($row['choice'] == 0){
echo "<p>First Choice</p>";
echo "<input type='hidden' id='hidden' value='0' />";
}
elseif($row['choice'] == 1){
echo "<p>Second Choice</p>";
echo "<input type='hidden' id='hidden' value='1' />";
}
else{
echo "<p><input type='radio' name='content_type' value='1' />This is A</p>
<p><input type='radio' name='content_type' value='2' />This is B</p>
<p><input type='radio' name='content_type' value='3' />This is C</p>";
//content_a
echo "<div id='content_a'>";
echo "<p>First Choice</p>";
echo "<input type='hidden' id='hidden' value='0' />";
echo "</div>";
//content_b
echo "<div id='content_b'>";
echo "<p>Second Choice</p>";
echo "<input type='hidden' id='hidden' value='1' />";
echo "</div>";
//content_c
echo "<div id='content_c'>";
echo "<p>Third Choice</p>";
echo "<input type='hidden' id='hidden' value='2' />";
echo "</div>";
}
echo "<a style='text-decoration: none; color: #000000;' class='alert'
href='#' onclick='return false;'>Alert</a>";
echo "</div>";
}
Javascript
//when click on alert button
$(".alert").bind('click', function(){
var type = $(this).parents('.loop').find("#hidden").val();
alert(type);
});
//when radio button change
$('input[name=content_type]').bind('change', function(){
var n = $(this).val();
switch(n)
{
case '1':
$(this).parents('.loop').find('#content_a').show(1000);
$(this).parents('.loop').find('#content_b').hide(1000);
$(this).parents('.loop').find('#content_c').hide(1000);
break;
case '2':
$(this).parents('.loop').find('#content_b').show(1000);
$(this).parents('.loop').find('#content_a').hide(1000);
$(this).parents('.loop').find('#content_c').hide(1000);
break;
case '3':
$(this).parents('.loop').find('#content_c').show(1000);
$(this).parents('.loop').find('#content_a').hide(1000);
$(this).parents('.loop').find('#content_b').hide(1000);
break;
}
});
My javascript script above work only when choice == 0 and choice == 1 (when I click alert button with choice == 0, it will alert 0, and click alert button with choice == 1, it will alert 1). But if choice == 2, it didn't work at all, it alerts undefined. I want when choice == 3 and user choose the radio button, it will do like below:
- if user choose **This is A** and click Alert button, it will alert 0
- if user choose **This is B** and click Alert button, it will alert 1
- if user choose **This is C** and click Alert button, it will alert 2
Can you help me to solve this problem?
Thank in advance
You have logic for
if($row['choice'] == 0){
and
elseif($row['choice'] == 1){
but not in the same manner if the choice is 2.
You also have three inputs with id='hidden.' Is it possible that the following line is finding the wrong hidden element?
var type = $(this).parents('.loop').find("#hidden").val();
A live example in a site like jsfiddle.net would help us tinker more easily.
you are given same id's in the below code. id's need to given unique name.
echo "<div id='content_a'>";
echo "<p>First Choice</p>";
echo "<input type='hidden' id='hidden' value='0' />";
echo "</div>";
//content_b
echo "<div id='content_b'>";
echo "<p>Second Choice</p>";
echo "<input type='hidden' id='hidden' value='1' />";
echo "</div>";
//content_c
echo "<div id='content_c'>";
echo "<p>Third Choice</p>";
echo "<input type='hidden' id='hidden' value='2' />";
echo "</div>";