I got this function that show and hide a container by clicking on a button "+show more" or "- Hide" depending on the current action. However it's not working. Any insight on why?
echo ' <br>
<img src="../img/back.png" /><br>
<button type="button" onclick="show_hide("pinfocontainer","hidepinfo");" class="sidebutton" id="hidepinfo">+ Show more</button>
<div class="hide" id="pinfocontainer">
<div class="editform">
<h1>Personal Info </h1>
<br>
<form action="" method="post">
<span></span>';
$sql = "SHOW COLUMNS FROM candidates";
$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_array($result)){
$sql2 = "SELECT ".$row['Field']." FROM candidates WHERE ID='".$_GET["cid"]."'";
$result2 = mysqli_query($con,$sql2);
echo '<label class="editlabel"> '.$row['Field'].' : </label>';
while($row2 = mysqli_fetch_array($result2)){
echo '<input class="editinput" id="'.$row['Field'].'" name="'.$row['Field'].'" value="'.$row2[$row['Field']].'" type="text">';
}
echo '<br>';
}
echo '<input name="submit" type="submit" value=" Update " style="width:105%;">
<span></span>
</form>
</div>
</div>
<div style="display:inline-block;padding-left:15px;padding-right:15px;"> </div>
Function:
function show_hide(id, id2) {
var e = document.getElementById(id);
if(e.style.display == 'inline-block') {
e.style.display = 'none';
document.getElementById(id2).innerHTML = "+ Show More";
}
else {
e.style.display = 'inline-block';
document.getElementById(id2).innerHTML = "- Hide";
}
}
onclick="show_hide("pinfocontainer","hidepinfo");"
You close the attribute with the 2th " so change the " to '
onclick="show_hide('pinfocontainer','hidepinfo');"
You may escape the ' because you echo it
echo 'onclick="show_hide(\'pinfocontainer\',\'hidepinfo\');"';
Related
Controller
for($x = 1; $x <= $qty; $x++){
$data .= '<b style="margin-left:10px;">Person ' . $x . '</b>';
$data .= '<div class="form-group" style="padding-top:10px;">';
$data .= ' <label for="input-for-age" class="col-sm-2 text-right control-label" style="padding-top:5px;">Age <span class="required">*</span></label>';
$data .= ' Age: <input type="checkbox" id="myCheck" name="AgeCheck" onclick="showCheckbox()">';
$data .= ' <p id="text" style="display:none; color:red;">Check Enabled</b><br><input type="number" placeholder="Enter Number"></p><br>';
}
Below is my javascript
function showCheckbox() {
// Get the checkbox
var checkBox = document.getElementById("myCheck");
// Get the output text
var text = document.getElementById("text");
// If the checkbox is checked, display the output text
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
How do i make it when click check on checkbox it will enable?
For now if there is 3 "checkbox", i click on 1 checkbox it will show
textfield , but if i click on 2nd checkbox from the loop , nothing
appear
Here you end up having more then one id called myCheck, what is not allowed.
for($x = 1; $x <= $qty; $x++){
$data .= '<b style="margin-left:10px;">Person ' . $x . '</b>';
$data .= '<div class="form-group" style="padding-top:10px;">';
$data .= ' <label for="input-for-age" class="col-sm-2 text-right control-label" style="padding-top:5px;">Age <span class="required">*</span></label>';
$data .= ' Age: <input type="checkbox" id="myCheck" name="AgeCheck" onclick="showCheckbox()">';
$data .= ' <p id="text" style="display:none; color:red;">Check Enabled</b><br><input type="number" placeholder="Enter Number"></p><br>';
}
this is why you must add a variable nex to it
for($x = 1; $x <= $qty; $x++){
$data .= '<b style="margin-left:10px;">Person ' . $x . '</b>';
$data .= '<div class="form-group" style="padding-top:10px;">';
$data .= ' <label for="input-for-age" class="col-sm-2 text-right control-label" style="padding-top:5px;">Age <span class="required">*</span></label>';
$data .= ' Age: <input type="checkbox" id="myCheck'.$x.'" name="AgeCheck'.$x.'" onclick="showCheckbox('.$x.')">';
$data .= ' <p id="text'.$x.'" style="display:none; color:red;">Check Enabled</b><br><input type="number" placeholder="Enter Number"></p><br>';
}
and in your function you must now add the variable in the same way
function showCheckbox(x) {
// Get the checkbox
var checkBox = document.getElementById("myCheck"+x);
// Get the output text
var text = document.getElementById("text"+x);
// If the checkbox is checked, display the output text
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
PHP
$data .= ' Age: <input type="checkbox" class="myCheck" name="AgeCheck" textid="'.$x.'" onclick="showCheckbox(this)">';
$data .= ' <p id="text" style="display:none; color:red;">Check Enabled</b><br>
<input type="number" placeholder="Enter Number" textid="'.$x.'" class="num-text"/>
</p><br>';
JS
function showCheckbox(ele) {
// Get the output text
var texts = document.getElementsByClassName("num-text");
// If the checkbox is checked, display the output text
for(var i =0; i <texts.length; i++){
var text = texts[i];
if (ele.checked == true && text.getAttribute("textid") == ele.getAttribute("textid")){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
}
Here I add a custom attribute to both checkboxe and text inputs. With textid attribute , You can connect a checkbox with matching text input.
I've build a function in javascript to show me a second submit but only after the first submit was clicked.
Edited - this is ex.php:
<form method="post" action = "ex.php">
<input type="submit" id="button" name="search" value="Search"
onclick="myFunction();" >
<br>
<input type="submit" name="search_close" id="submit" style="display:
none;" value="Find close results">
</form>
<?php
if(isset($_POST['search']))
{
echo "first search";
}
else if(isset($_POST['search_close']))
{
echo "second search";
}
else {
echo "nothing";
}
?>
<script type="text/javascript">
inputSubmit = document.getElementById("submit");
function myFunction(){
inputSubmit.style.display = "block"; };
</script>
Updated:
I've edited in order to conclude the main problem.
So what I want is this:
a) The user has pressed the first submit button "search" then it will echo on the page "first search" and then show the second submit button "search_close" .
b)Then, if the user has pressed the second submit button it will show "second search".
When first Refreshing:
======
search (button)
======
if clicking the "search" button:
======
search (button)
======
first search (text)
==================
Find close results (button)
==================
if clicking the "find close results:
======
search (button)
======
first search (text)
==================
Find close results (button)
==================
second search (text)
This code doesn't do what I want. Why?
Updated - why the button find close results disappers after one second?
<?php
session_start();
$db=mysqli_connect("localhost","root","","travelersdb");
if(#$_SESSION["username"]){
?>
<?php
// function to connect and execute the query
function filterTable($query)
{
$connect=mysqli_connect("localhost","root","","travelersdb");
$filter_Result = mysqli_query($connect, $query) or die(mysqli_error($connect));
return $filter_Result;
}
$submit_value = 0;
if(isset($_POST['search']))
{
$Destination = $_POST['Destination'];
$TypeOfTravel = $_POST['TypeOfTravel'];
$Age= $_POST['Age'];
$email = $_POST['email'];
$topic_name = $_POST['topic_name'];
$StartingPoint = $_POST['StartingPoint'];
// search in all table columns
$query = "SELECT * FROM `topics`
left join `users` on users.username = topics.topic_creator
WHERE 1=1 ";
if(!empty($Destination)) {
$query.="AND destination='$Destination'";
}
if(!empty($TypeOfTravel)) {
$query.=" AND typeTravel='$TypeOfTravel'";
}
if(!empty($Age)) {
$query.="AND age='$Age'";
}
if(!empty($email)) {
$query.=" AND email='$email'";
}
if(!empty($topic_name)) {
$query.=" AND topic_name='$topic_name'";
}
if(!empty($StartingPoint)) {
$query.=" AND StartingPoint='$StartingPoint'";
}
$search_result = filterTable($query);
$submit_value = 1;
}
///Make The search more wider, only for the fields that were in the post
else if(isset($_POST['search_close']))
{
$Destination = $_POST['Destination'];
$TypeOfTravel = $_POST['TypeOfTravel'];
$topic_name = $_POST['topic_name'];
$StartingPoint = $_POST['StartingPoint'];
// search in all table columns
$query = "SELECT * FROM `topics`
left join `users` on users.username = topics.topic_creator
WHERE 1=1 ";
if(!empty($Destination)) {
$query.="AND destination='$Destination'";
}
if(!empty($TypeOfTravel)) {
$query.=" AND typeTravel='$TypeOfTravel'";
}
if(!empty($topic_name)) {
$query.=" AND topic_name='$topic_name'";
}
if(!empty($StartingPoint)) {
$query.=" AND StartingPoint='$StartingPoint'";
}
$search_result = filterTable($query);
$submit_value = 2;
}
else {
$query = "SELECT * FROM `topics`";
$search_result = filterTable($query);
}
?>
<html>
<head>
<?php header('Content-Type: text/html; charset=utf-8'); ?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Home Page</title>
<style>
.hidden {
display: none;
}
</style>
<script type="text/javascript">
function showHide()
{
var checkbox = document.getElementById("chk");
var hiddeninputs = document.getElementsByClassName("hidden");
for (var i=0; i != hiddeninputs.length; i++) {
if(checkbox.checked){
hiddeninputs[i].style.display = "block";
} else {
hiddeninputs[i].style.display = "none";
}
}
}
<?php
if($submit_value == 1 || $submit_value == 2){ ?>
myFunction();
inputSubmit = document.getElementById("submit");
function myFunction(){
document.getElementById('submit').style.display = "block";
};
<?php } ?>
</script>
<body>
</body>
</head>
<?php include("header.php");?>
<center>
</br>
<button>Post</button>
</br>
<br/>
<h4>Simple Serach</h4>
<form action="" method="post">
<input type="text" name="Destination" placeholder="Destination" value=
"<?php if(isset($_POST['Destination']))
{echo htmlentities($_POST['Destination']);}?>" ></br>
<input type="text" name="TypeOfTravel" placeholder="Type Of Travel"
value=
"<?php if(isset($_POST['TypeOfTravel']))
{echo htmlentities($_POST['TypeOfTravel']);}?>"
></br>
<input type="text" name="Age" placeholder="Age" value="<?php if(isset($_POST['TypeOfTravel']))
{echo htmlentities($_POST['Age']);}?>">
</br>
</br>
<!-- Advanced Search-->
<input type="checkbox" name="chkbox" id="chk" onclick="showHide()" />
<label for="chk"><b>Advanced search</b></label>
</br>
<input type ="text" name="email" placeholder="Email" class="hidden" value="<?php if(isset($_POST['TypeOfTravel']))
{echo htmlentities($_POST['email']);}?>">
<input type ="text" name="topic_name" placeholder="topic name" class="hidden"value="<?php if(isset($_POST['TypeOfTravel']))
{echo htmlentities($_POST['topic_name']);}?>">
<input type="text" name="StartingPoint" placeholder="Starting Point" class="hidden"value="<?php if(isset($_POST['TypeOfTravel']))
{echo htmlentities($_POST['StartingPoint']);}?>">
</br><br/>
<input type="submit" id="button" name="search" value="Search"
onclick="myFunction();" >
<br><br>
<input type="submit" name="search_close" id="submit" style="display:
none;" value="Find close results">
</form>
<br/>
<?php echo '<table border="1px">';?>
<td width="400px;" style="text-align:center;">
Name
</td>
<td width="400px;" style="text-align:center;">
Destination
</td>
<td width="400px;" style="text-align:center;">
Type Of Travel:
</td>
<td width="80px;" style="text-align: center;">
First Name
</td>
<td width="80px;" style="text-align: center;">
Age
</td>
<td width="400px;" style="text-align:center;">
profile picture
</td>
<td width="80px;" style="text-align: center;">
Creator
</td>
<td width="80px;" style="text-align: center;">
Date
</td>
</tr>
</center>
<?php
$sql = "Select * from `topics`";
$check = mysqli_query($db,$sql);
$rows = mysqli_num_rows($search_result);
if($rows != 0){
while ($row = mysqli_fetch_assoc($search_result)){
$id = $row['topic_id'];
echo "<tr>";
//echo "<td>".$row['topic_id']."</td>";
echo "<td style='text-align:center;'><a href='topic.php?id=$id'>".$row['topic_name']."</a></td>";
echo "<td>".$row['Destination']."</td>";
echo "<td>".$row['typeTravel']."</td>";
$sql_u = "Select * from users where username='".$row['topic_creator']."'";
$check_u = mysqli_query($db,$sql_u);
while ($row_u = mysqli_fetch_assoc($check_u))
{
$user_id = $row_u['id'];
$profile_pic = $row_u['profile_pic'];
$firstname = $row_u['firstname'];
$age = $row_u['age'];
echo "<td>".$firstname."</td>";
echo "<td>".$age."</td>";
echo "<td><img src='".$profile_pic."' width='10%' height='10%' alt='me'></td>";
echo "<td><a href='profile.php?id=$user_id'>".$row['topic_creator']."</a></td>";
}
$get_date = $row['date'];
echo "<td>".$row['date']."</td>";
echo "</tr>";
}
}else {
echo "No topics found";
}
echo "</table>";
if (#$_GET['action']=="logout")
{
session_destroy();
header('location:login.php');
}
}else
{
echo "You must be logged in.";
echo "<a href ='login.php'>Click here to login</a>";
}
?>
</br>
</br>
<body>
</body>
</html>
you need to set type button cause when you set type submit then form automatically submit so show second not show but it work.
<form method="post" action = "">
<input type="submit" id="button" name="search" value="Search" >
<br>
<input type="submit" name="search_close" id="submit" style="display:
none;" value="Find close results">
</form>
<?php
$submit_value = 0;
if(isset($_POST['search']))
{
echo "first search";
$submit_value = 1;
}
else if(isset($_POST['search_close']))
{
echo "first search";
echo '<br>';
echo "second search";
$submit_value = 2;
}
else {
echo "nothing";
}
?>
<script type="text/javascript">
<?php
if($submit_value == 1 || $submit_value == 2){ ?>
document.getElementById('submit').style.display = "block";
<?php } ?>
</script>
check this code
I have cleaned up your code, but the issue of having two submit buttons still persists. Even if the clicking of the first button causes the second to show, the first button will cause the page to reload with the results from the form's action resource. In this example, I have cancelled the form's submit event to show that the display of the second button works.
In the end, I think you are going about this all wrong. I think you should be making AJAX calls to your server-side resource and injecting the results of that call into your page - - no forms and no submits.
// Don't forget to add "var" to your variable declarations, otherwise the variables
// become global!
var sub1 = document.getElementById("btnSub1");
var sub2 = document.getElementById("btnSub2");
// Set up the event handler for the first button
sub1.addEventListener("click", myFunction);
function myFunction(e){
// Adjust classes, not individual styles
sub2.classList.remove("hidden");
// Cancel the native event and stop bubbling
e.preventDefault();
e.stopPropagation();
};
.hidden { display:none; }
<form>
<!-- Submit buttons don't get a name attriute unless you expect their value to be submitted
along with all the other form data. Inline styles should be avoided and internal style
sheets used instead. And, inline JavaScript event attributes (onclick, etc.) should not
be used. -->
<input type="submit" id="btnSub1" name="search" value="Search" >
<br>
<input type="submit" id="btnSub2" class="hidden" value="Find close results">
</form>
<?php
if(isset($_POST['search']))
{
echo "first search";
}
else if(isset($_POST['search_close']))
{
echo "second search";
}
else {
echo "nothing";
}
?>
I'm currently doing a final project for my school in online web programming but I'm having difficulties assign specific id from sql to button id, then open them with only one modal... Here's my coding:
<html>
<head>
<title>SICT ADMIN NEW</title>
</head>
<body>
<div id="container">
<div id="admin">Admin | Log Out</div>
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li><a class="active" href="Admin_New.php">New</a></li>
<li>Update</li>
<li>Delete</li>
<li class="icon">
☰
</li>
</ul>
<div id="content">
<div id="link_row">
<div id="link_row_1">New >> <span style="color:#900">Campus</span></div>
<div id="link_row_2">
<div id="link_row_2_text"><button id="Add" >Add</button></div>
<div id="link_row_2_img"><img src="img/add_icon.png" width="15" height="15" alt="add"></div>
</div>
</div>
<table width="87%" align="center" border="1">
<tr>
<th width="17%">Campus_ID</th>
<th width="39%">Campus_Name</th>
<th width="38%">Location</th>
<th width="3%"></th>
<th width="5%"></th>
</tr>
<?php
$servername = "localhost";
$username = "root";
$password = "mysql";
$dbname = "SICT";
//Create connection
$con = mysqli_connect($servername, $username, $password, $dbname);
//Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$Campus_Record = mysqli_query($con, "SELECT * FROM Campus");
while($row = mysqli_fetch_array($Campus_Record))
{
echo "<tr>";
echo "<td>" . $row['Campus_ID'] . "</td>";
$Campus_ID = $row['Campus_ID'];
$Temp = $row['Campus_ID'];
$Edit = $row['Campus_ID'];
echo "<td>" . $row['Campus_Name'] . "</td>";
echo "<td>" . $row['Location'] . "</td>";
echo "<td><button id='$Edit'>Edit</button></td>";
echo "<td><a href='Admin_New_Campus_Delete.php?Campus_ID=$Campus_ID' onclick='return confirm(\"Confirm Delete Record?\")'><button id='Campus_ID'>Delete</button></a></td>";
echo "</tr>";
}
?>
</table>
</div>
<div id="footer">© 2017 Institute ofTechnical Education. · Privacy · Terms</div>
<div id="Campus_Modal" class="Modal">
<!-- Modal content -->
<div class="modal-content">
<span class="Close">×</span>
<form method = "post">
<div id="Modal_Content">
Campus ID:<br>
<input type="text" name="Campus_ID_2" required /><br><br>
Campus Name:<br>
<input type="text" name="Campus_Name_2" required /><br><br>
Location:<br>
<input type="text" name="Location_2" required /><br><br>
<input type='text' id = "hidden" name="Temp" value = "<?php echo $Temp; ?>">
<div id="Submit"><input type="submit" name="submit" value="Submit" formaction ="Admin_New_Campus_Update.php" /></div>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
var modal = document.getElementById('Campus_Modal');
var btn = document.getElementById("Edit");
var span = document.getElementsByClassName("Close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
There are two ways by which you can solve your issue:
1) you need to put your modal code into while loop.
2) If you want to have single modal, then you need to bind campus data in modal dynamically at the time of modal open.So below I have updated your code to make hidden field "campus id" dynamic whenever user clicks on edit button from the campus listing table:[code]By this way you need to bind other form data of modal as well.
<html>
<head>
<title>SICT ADMIN NEW</title>
</head>
<body>
<div id="container">
<div id="admin">Admin | Log Out</div>
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li><a class="active" href="Admin_New.php">New</a></li>
<li>Update</li>
<li>Delete</li>
<li class="icon">
☰
</li>
</ul>
<div id="content">
<div id="link_row">
<div id="link_row_1">New >> <span style="color:#900">Campus</span></div>
<div id="link_row_2">
<div id="link_row_2_text"><button id="Add" >Add</button></div>
<div id="link_row_2_img"><img src="img/add_icon.png" width="15" height="15" alt="add"></div>
</div>
</div>
<table width="87%" align="center" border="1">
<tr>
<th width="17%">Campus_ID</th>
<th width="39%">Campus_Name</th>
<th width="38%">Location</th>
<th width="3%"></th>
<th width="5%"></th>
</tr>
<?php
$servername = "localhost";
$username = "root";
$password = "mysql";
$dbname = "SICT";
//Create connection
$con = mysqli_connect($servername, $username, $password, $dbname);
//Check connection
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$Campus_Record = mysqli_query($con, "SELECT * FROM Campus");
while($row = mysqli_fetch_array($Campus_Record))
{
echo "<tr>";
echo "<td>" . $row['Campus_ID'] . "</td>";
$Campus_ID = $row['Campus_ID'];
$Temp = $row['Campus_ID'];
$Edit = $row['Campus_ID'];
echo "<td>" . $row['Campus_Name'] . "</td>";
echo "<td>" . $row['Location'] . "</td>";
echo "<td><button id='$Edit' onclick ='reply_click(this);'>Edit</button></td>";
echo "<td><a href='Admin_New_Campus_Delete.php?Campus_ID=$Campus_ID' onclick='return confirm(\"Confirm Delete Record?\")'><button id='Campus_ID'>Delete</button></a></td>";
echo "</tr>";
}
?>
</table>
</div>
<div id="footer">© 2017 Institute ofTechnical Education. · Privacy · Terms</div>
<div id="Campus_Modal" class="Modal">
<!-- Modal content -->
<div class="modal-content">
<span class="Close">×</span>
<form method = "post">
<div id="Modal_Content">
Campus ID:<br>
<input type="text" name="Campus_ID_2" required /><br><br>
Campus Name:<br>
<input type="text" name="Campus_Name_2" required /><br><br>
Location:<br>
<input type="text" name="Location_2" required /><br><br>
<input type='text' id = "hidden" name="Temp" value = "">
<div id="Submit"><input type="submit" name="submit" value="Submit" formaction ="Admin_New_Campus_Update.php" /></div>
</div>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
var modal = document.getElementById('Campus_Modal');
var btn = document.getElementById("Edit");
var span = document.getElementsByClassName("Close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
function reply_click(obj)
{
var test = obj.id;
document.getElementById("hidden").value = test;
}
</script>
</body>
</html>
By this way you need to bind other form data of modal as well.
Add Comment
I would like to know how a multiple update in MySQL with checkbox because I'm not getting the id attribute checkbox someone could help me?
HTML code
<form method="post" action="../sys/fav.php">
<input type="hidden" id="id_photo" name="id" value="">
<div class="col-md-12">
<p align="right"><button class="btn btn-primary" id="final" name="final">Send</button></p>
</div>
<?php
require "../sys/connect.php";
$email = $_GET['email'];
$sql = mysqli_query($mysqli, "SELECT * FROM gallery WHERE email ='$email'");
while($row = mysqli_fetch_array($sql)){
$id = $row['id'];
$name = $row['nome_galeria'];
$emailcontact = $row['email_contact'];
$pass = $row['pass'];
$email = $row['email'];
$img = $row['img'];
print"<div class=\"col-lg-3 col-md-4 col-sm-6 col-xs-12\">
<input type=\"hidden\" name=\"contact\" value=\"$emailcontact\">
<input type=\"hidden\" name=\"login\" value=\"$email\">
<input type=\"hidden\" name=\"pass\" value=\"$pass\">
<input type=\"hidden\" name=\"name\" value=\"$name\">
<div class=\"hovereffect\">
<img id=\"he\" class=\"img-responsive\" src=\"../images/images/gallery/big/$img\" alt=\"$name\">
<div class=\"overlay\">
<div class=\"btn-group\" data-toggle=\"buttons\">
<label class=\"btn btn-primary cke\">
<input type=\"checkbox\" name=\"ck[]\" class=\"ck\" value=\"not\" id=\"ck_$id\"><i class=\"fa fa-heart\"></i>
</label>
</div>
</div>
</div>
</div>";
}
mysqli_close($mysqli)
?>
</form>
PHP Code
require "conexao.php";
if(isset($_POST['final'])){
$id = $_POST['id'];
foreach($_POST['ck'] as $ck){
$check = $ck;
$sql = mysqli_query($mysqli,"UPDATE gallery SET fav = '$check' WHERE id = '$id'")or die(mysqli_error($mysqli));
}
if($sql)
echo "Success!";
else
echo "Fail!";
}
Code Js to get the id of the checkbox
$("#final").click(function(){
var str = "";
var boxes = $(".ck");
for(var i = 0; i< boxes.length; i++){
if(boxes[i].checked == true){
var tmp = boxes[i].id.split("_");
str+=(i ? "," : "")+tmp[1];
}
}
document.getElementById('id_fotos').value=str;
});
You can get values of checkbox using below code and pass through ajax
var ckArray = new Array();
$.each($('input[name="ck[]"]:checked'),
function(index, ele){
ckArray.push($(ele).val());
});
i'm create online shop, but i have a little problem in cart product.
if i add 2 products same and different product size
this products only show last add to cart.
example i want like this
product : ABC
size : XL
product : SKSD
size : L
i want like this.
this is my code
order.php
<?php
include "connection.php";
$link = $_REQUEST['link_goods'];
$data_pr = mysqli_query($con,"select * from goods where link_goods='".$link."' ");
$pr = mysqli_fetch_object($data_pr);
?>
<section class="main-container col1-layout">
<div class="main container">
<div class="col-main">
<div class="row">
<div class="product-view">
<div class="product-essential">
<form action="#" method="post" id="product_addtocart_form">
<div class="product-shop col-lg-12 col-sm-12 col-xs-12">
<div class="product-name">
<h4><?php echo $pr->goods ?></h4>
</div>
<p class="availability in-stock">Availability: <span><?php echo $pr->stock ?> stock</span></p>
<div class="price-block">
<div class="price-box">
<p class="special-price"> <span class="price-label">Special Price</span> <span class="price"> Rp <?php echo $pr->price ?> </span> </p>
</div>
</div>
<div class="add-to-box">
<div class="add-to-cart">
<label for="qty">Quantity & Size</label>
<div class="pull-left">
<div class="custom pull-left">
<button onClick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty ) && qty > 1 ) result.value--;return false;" class="reduced items-count" type="button"><i class="icon-minus"> </i></button>
<input type="text" class="input-text qty" readonly style="color:black" value="1" maxlength="5" id="qty" name="qty">
<button onClick="var result = document.getElementById('qty'); var qty = result.value; if(qty>=<?php echo $pr->stock ?>) return false; else if( !isNaN( qty )) result.value++; return false;" class="increase items-count" type="button"><i class="icon-plus"> </i></button>
</div>
<div class="custom pull-left">
<select style="color:black" name="size" id="size" class="input-text qty">
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
</div>
<?php
echo "<input type='hidden' id='price' name='price' value='".$pr->price."'>";
echo "<input type='hidden' id='id_goods' name='id_goods' value='".$pr->id_goods."'>";
?>
</div>
<?php
if ($pr->stock=="0")
{
}
else
{
?>
<button class="button btn-cart" title="Add to Cart" type="submit"><span><i class="icon-basket"></i> Add to Cart</span></button>
<?php } ?>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(e){
var form_data = $(this).serialize();
var button_content = $(this).find('button[type=submit]');
button_content.html(' ADDING...'); //Loading button text
$.ajax({
url: "proses.php",
type: "POST",
dataType:"json",
data: form_data
}).done(function(data){
$("#myinfo").html(data.items);
button_content.html(' ADD TO CART');
if($(".shopping-cart-box").css("display") == "block"){
$(".mycart-box").trigger( "click" );
}
$(".mycart-box").trigger( "click" );
})
e.preventDefault();
});
});
</script>
proses.php
<?php
session_start(); //start session
$mysqli_conn = new mysqli("localhost", "root", "", "databaseshop");
if ($mysqli_conn->connect_error) {
die('Error : ('. $mysqli_conn->connect_errno .') '. $mysqli_conn->connect_error);
}
if(isset($_POST["id_goods"]))
{
// i think's using condtion in here when different size product
foreach($_POST as $key => $value){
$new_product[$key] = filter_var($value, FILTER_SANITIZE_STRING);
}
$statement = $mysqli_conn->prepare("SELECT goods, images_goods, price FROM goods_table WHERE id_goods=? LIMIT 1");
$statement->bind_param('s', $new_product['id_goods']);
$statement->execute();
$statement->bind_result($goods, $images_goods, $price);
while($statement->fetch()){
$new_product["goods"] = $goods;
$new_product["images_goods"] = $images_goods;
$new_product["price"] = $price;
// i think's using condtion in here when different size product
$_SESSION["products"][$new_product['id_goods']] = $new_product;
}
$total_items = count($_SESSION["products"]);
die(json_encode(array('items'=>$total_items)));
}
//################## Loop Item Cart #####################################
if(isset($_POST["load_cart"]) && $_POST["load_cart"]==1)
{
if(isset($_SESSION["products"]) && count($_SESSION["products"])>0){
$cart_box = ' <div class="top-cart-content arrow_box">';
$cart_box .= ' <ul id="cart-sidebar" class="mini-products-list">';
$total = 0;
foreach($_SESSION["products"] as $product)
{
$product_name = $product["goods"];
$product_cover = $product["images_goods"];
$product_price = $product["price"];
$product_code = $product["id_goods"];
$product_qty = $product["qty"];
$product_size = $product["size"];
$cart_box .= ' <li class="item even remove-item">';
$cart_box .= ' <a class="product-image" href="#" title="'.$product_name.'"><img alt="'.$product_name.'" src="images/barang_sampul/'.$product_cover.'" width="80"></a>';
$cart_box .= ' <div class="detail-item">';
$cart_box .= ' <div class="product-details"> ';
$cart_box .= ' <p class="product-name"> '.$product_name.' </p>';
$cart_box .= ' </div>';
$cart_box .= ' <div class="product-details-bottom"> <span class="price">'.$product_price.'</span> <span class="title-desc">Qty:</span> <strong>'.$product_qty.'</strong> </div>';
$cart_box .= ' <div class="product-details-bottom"> <span class="title-desc">Ukuran :</span> <strong>'.$product_size.'</strong> </div>';
$cart_box .= ' </div>';
$cart_box .= ' </li>';
$subtotal = ($product_price * $product_qty);
$total = ($total + $subtotal);
}
$cart_box .= ' </ul>';
$cart_box .= ' <div class="top-subtotal">Subtotal: <span class="price">'.$total.'</span></div>';
$cart_box .= ' <div class="actions">';
$cart_box .= ' <center><button style="float:none" class="view-cart" type="button"><span>View Cart</span></button></center>';
$cart_box .= ' </div>';
$cart_box .= ' </div>';
die($cart_box);
}else{
// die("Null");
}
}
################# Delete Item From Cart ################
if(isset($_GET["remove_code"]) && isset($_SESSION["products"]))
{
$product_code = filter_var($_GET["remove_code"], FILTER_SANITIZE_STRING);
if(isset($_SESSION["products"][$product_code]))
{
unset($_SESSION["products"][$product_code]);
}
$total_items = count($_SESSION["products"]);
die(json_encode(array('items'=>$total_items)));
}
?>
Help me thank's