Javascript collection of ids for form post without checkboxes - javascript

I'm designing a page which needs to post a set of IDs to a php script.
There is a table with a number of Items (with associated images) to select. Old school would be to put a check box next to each Item and post the form, then loop through the form post with php.
But the design is requesting that "no checkboxes be used". The idea being that when a user clicks one of the Items, that item gets highlighted in CSS then a button will post all the highlighted items.
The html looks like this:
<td>
<table id="cell-5" class="change_back" onclick="checkItem('cell-5',5);">
<tr>
<td>
<img src="img/5.png" />
</td>
</tr>
</table>
</td>
<td>
<table id="cell-6" class="change_back" onclick="checkItem('cell-6',6);">
<tr>
<td>
<img src="img/6.png" />
</td>
</tr>
</table>
</td>
<td>
<table id="cell-7" class="change_back" onclick="checkItem('cell-7',7);">
<tr>
<td>
<img src="img/7.png" />
</td>
</tr>
</table>
</td>
Javascript:
function checkItem(clicked, prdId){
alert(prdId + ' was selected');
var cur = document.getElementById(clicked).className;
//if not highlighted
if (cur == 'change_back'){
//add item
document.getElementById(clicked).className = 'change_back_clicked';
}
else{
//remove item
document.getElementById(clicked).className = 'change_back';
}
}
the css:
.change_back {
background-color: #FFFFFF;
}
.change_back:hover {
cursor: pointer;
}
.change_back_clicked {
background-color: #C0C0C0;
}
Thoughts on how to do this without jquery and with?

var group = document.getElementById("group"),
elements = group.getElementsByTagName("div");
group.addEventListener("click", function(e) {
e.preventDefault();
if ("DIV" === e.target.tagName) {
if ("selected" === e.target.className) {
e.target.classList.remove("selected");
} else {
e.target.classList.add("selected");
}
}
});
#group div {
cursor: pointer;
}
.selected {
background-color: #C0C0C0;
}
<div id="group">
<div>first div</div>
<div>second div</div>
<div>third div</div>
</div>

Well I probably didn't explain what I wanted very clearly, so going with my own solution:
The javascript:
function checkItem(clicked, Id){
//clicked is the table element that was clicked
//Id is the id of the hidden var
//get the current css class of the table element
var cur = document.getElementById(clicked).className;
//flip the css class and update form
if (cur == 'primaryCl')
{
document.getElementById(clicked).className = 'secondaryCl';
//set form var to 'true' for form post
document.getElementById(Id).value = 'true';
}
else
{
//reverse of the above
document.getElementById(clicked).className = 'primaryCl';
document.getElementById(Id).value = 'false';
}
}
The CSS:
.primaryCl {
background-color: #E6E6E6;
border-collapse: separate;
border-spacing: 5px;
border:solid #6A6964 1px;
padding: 0px;
}
.primaryCl:hover {
background-color: #3cb0fd;
cursor: pointer;
}
.secondaryCl {
background-color: #3cb0fd;
border-collapse: separate;
border-spacing: 5px;
border:solid #6A6964 1px;
padding: 0px;
}
The php:
/* css class set dynamically (code removed for brevity) */
$ibClass = "primaryCl";
/* hidden set dynamically (code removed for brevity) */
$hiddenTag = "<input type=\"hidden\" name=\"tp_$Id\" id=\"tp_$Id\" value=\"$hiUpd\">";
/* inside while loop, looping through query results */
$out .= "
<td>
$hiddenTag
<table id=\"cp_$Id\" class=\"$ibClass\" onclick=\"checkItem('cp_$Id', 'tp_$Id');\">
<tr>
<td>
<img alt=\"pic\" height=\"70\" width=\"60\" src=\"$thumbnailDir/$imageMini\" />
</td>
<td>
<span class=\"b12\">$prodName</span>
</td>
</tr>
</table>
</td>";

Related

How to create a fully functional contact form within an HTML form

I have a small HTML form. Basically my goal is to have the first tab to display a contact form that will unlock the rest of the form and give the user the ability to edit the contact form after submit (incase of an error) without refreshing the page and deleting the form values that display in the form. After the contact portion is submitted the values entered will display throughout the form.
https://jsfiddle.net/yq7hon4u/
// Contact Form
function submitButton() {
document.getElementById('submitButton').style.display = "none";
document.getElementById('contactBar').style.display = "block";
return false;
}
function contact() {
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var email = document.getElementById("email").value;
document.getElementById("firstName1").textContent = firstName;
document.getElementById("lastName1").textContent = lastName;
document.getElementById("email1").textContent = email;
}
//Form Tabs
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form ...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
if (n == 0) {
document.getElementById("prevBtnBottom").style.display = "none";
document.getElementById("prevBtnTop").style.display = "none";
} else {
document.getElementById("prevBtnBottom").style.display = "inline";
document.getElementById("prevBtnTop").style.display = "inline";
}
//Form 5 displays only Previous button, Next button is disabled.
if (n == 3) {
document.getElementById("nextBtnBottom").style.display = "none";
document.getElementById("nextBtnTop").style.display = "none";
} else {
document.getElementById("nextBtnBottom").style.display = "inline";
document.getElementById("nextBtnTop").style.display = "inline";
}
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form... :
if (currentTab >= x.length) {
//...the form gets submitted:
document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false:
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class to the current step:
x[n].className += " active";
}
/* Style the form */
#regForm {
margin: 20px auto;
width: 70%;
min-width: 300px;
}
/* Style for Select */
select.select {
font-size: 15px;
width: 55%;
Border: none;
background-color: #e9e9e9;
}
/* Style for buttons */
button {
background-color: #faa51a;
font-size: 16px;
}
/* Hidden */
.hide {
display: none;
}
/* Hide all steps by default: */
.tab {
display: none;
}
/* Make circles that indicate the steps of the form: */
.step {
height: 24px;
width: 20px;
margin: 0 2px;
background-color: #b8cce4;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
/* Mark the active step: */
.step.active {
opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #b8cce4;
}
/* Used for blue background headings */
tr.blueHead {
background-color: #b8cce4;
}
/* Resposive table */
table {
border-collapse: collapse;
box-shadow: 0px 0px 25px 15px rgba(0, 0, 0, 0.20);
background-color: #e9e9e9;
}
table.center {
margin-left: auto;
margin-right: auto;
}
table.summary {
background-color: e9e9e9 border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
/* Sets padding around the table cells */
th,
td {
padding: 3px;
/* text-align: left;*/
}
/* Subtotal */
td.subtotal {
text-align: right;
font-weight: bold;
}
/* Indents table cells */
td.indent {
text-indent: 2%;
}
img.center {
text-align: center;
display: block;
margin: 0 auto;
}
td,
th {
border: 1px solid #ddd;
}
.center {
text-align: center;
}
<!-- Start of RegForm -->
<div id="tab">
<div id="regForm">
<br>
<div style="float:right;">
<button type="button" id="prevBtnTop" onclick="nextPrev(-1)">🢀</button>
<button type="button" id="nextBtnTop" onclick="nextPrev(1)">🢂</button>
</div>
<br>
<br>
</head>
<body>
<div class="tab">
<center>
</center>
<h4><u>Fill out the folowing required fields</u></h4>
<center>
<form action="" onsubmit="return submitButton()">
<div id="submitButton" style="margin-bottom: -20px">
<input id="firstName" type="text" class="feedback-input" placeholder="First Name" required/>
<input id="lastName" type="text" class="feedback-input" placeholder="Last Name" required/>
<input id="email" type="text" class="feedback-input" placeholder="Email" required/>
<button onclick="contact(); nextPrev(1);" value="submit">Submit</button>
<br>
</center>
</div>
<div id="contactBar" style="display:none; margin-bottom: -30px">
<table id="contact" class="noDecor">
<tr class="noDecor">
<td class="noDecor"><b><span id="firstName1"></span></b></td>
<td class="noDecor"><b><span id="lastName1"></span></b></td>
<td class="noDecor"><b><span id="email1"></span></b></td>
</tr>
</table>
</div>
<br><br>
</form>
<!-- A.-->
<div class="tab">
<table id="sectionA">
<tr class="blueHead">
<th colspan="3"><b>Section A </b></th>
</tr>
<tr>
<td></td>
</tr>
</table>
<table id="table1">
<tr>
<td>Question 1:</td>
<td>
<select>
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Question 2:</td>
<td>
<select>
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
</table>
<br>
</div>
<!-- B. -->
<div class="tab">
<table id="sectionB">
<tr class="blueHead">
<th colspan="3"><b>Section B </b></th>
</tr>
</table>
<table id="table2">
<tr>
<td>Question 3:</td>
<td>
<select>
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Question 4:</td>
<td>
<select>
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
</table>
<br>
</div>
<!-- C. -->
<div class="tab">
<table id="sectionC">
<tr class="blueHead">
<th colspan="3"><b>Section C </b></th>
</tr>
</table>
<table id="table3">
<tr>
<td>Question 5:</td>
<td>
<select>
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
<tr>
<td>Question 6:</td>
<td>
<select>
<option value="0">0</option>
<option value="1">1</option>
</select>
</td>
</tr>
</table>
<br>
</div>
<!-- Next and Previous buttons -->
<div style="float:right;">
<button type="button" id="prevBtnBottom" onclick="nextPrev(-1)">🢀</button>
<button type="button" id="nextBtnBottom" onclick="nextPrev(1)">🢂</button>
</div>
</div>
<div style="text-align:center;margin-top:40px;">
<span class="step"><b>S</a></span>
<span class="step">A</span>
<span class="step">B</span>
<span class="step">C</span>
</span>
</div>
<br>
</div>
</div>

setting a value in the dropdowns in table based on imported values [javascript, jquery]

I have a table that is filled dynamically with a csv file. I created a table that inside itself has dropdowns in some columns.
What I want to do now is to check if a value exists in the cell where the dropdown is supposed to be, if so to check if it exists in the dropdownlist if yes then set this as selected in dropdown list otherwise selected is at default value and the cell gets red margine around.
Here is a jsFiddle with an example as how my code currently looks like:
https://jsfiddle.net/r236uy5k/
EDIT : I corrected my jsfiddle:
https://jsfiddle.net/kcau7jhd/
$(function(){
var firstDDM = ['aaa','bbb','ccc','ddd'];
var firstshortcut = ['a','b','c','d'];
var option = "",
select = "";
for(var i=0; i<firstDDM.length;i++){
option += '<option value="'+ firstshortcut[i] + '">' + firstDDM[i] + '</option>';
}
select = '<select class="firstDDM" type="firstDDM">' + option + '</select>';
$("tr").each(function() {
$(this).find("td:eq(3)").append(select);
});
});
$(function(){
var secondDDM = ['Default','AAA','BBB','B1','C'];
var secondshortcut = ['Default','a','b','b1','c'];
var option = "",
select = "";
for(var i=0; i<secondDDM.length;i++){
option += '<option value="'+ secondshortcut[i] + '">' + secondDDM[i] + '</option>';
}
select = '<select class="secondDDM" type="secondDDM">' + option + '</select>';
$("tr").each(function() {
$(this).find("td:eq(5)").append(select);
});
});
$("#addRow").click(function(){
$("#my_id").each(function(){
var tds='<tr>';
jQuery.each($('tr:last th', this), function(){
tds += '<th>' +'<input type="checkbox" name="record" tittle="Delete this row"></input>' + '</th>';
});
jQuery.each($('tr:last td', this), function(){
if($('select',this).length){
tds+= '<td>' + $(this).html() + '</td>';
}else{
tds+= '<td></td>';
}
});
tds+= '</tr>';
$('tbody',this).append(tds);
$('#my_id tbody tr:last').attr("contentEditable", true);
});
});
//for the columns that need to be imported with dropdowns create editable option - temporarlly
$(function() {
$("tr").each(function() {
$(this).find("td:eq(3), td:eq(4),td:eq(5)").attr("contentEditable", true);
});
});
//Find and remove selected table rows
$('#delete-row').click(function(){
var r = confirm('Are you sure you want to delete them all?');
$("tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
if(r == true){
$(this).parents("tr").remove();
}else{
return false;
}
}
});
});
table {
border-collapse: collapse;
border: 1px black solid;
font: 12px sans-serif;
width: 100%;
table-layout:auto;
}
td {
border: 1px black solid;
text-align: left;
padding: 2px;
}
thead:hover{
text-decoration: none !important;
}
thead tr:first-child{
color:white;
text-align: center;
background-color: #5bc0de;
padding: 10px;
}
tr:nth-child(even){
background-color: #f2f2f2
}
tr:hover{
background-color: #5bc0de;
}
button{
display: inline;
padding: 50px;
}
input button{
display: inline;
}
.dropbtn{
background-color: blue;
}
.table-responsive {
overflow-y: auto;
height: 800px;
}
.table-responsive table {
border-collapse: collapse;
width: 100%;
}
.table-responsive thead th{
position: sticky;
top: 0;
background-color: #5bc0de;
padding: 2px;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
.myButtons{
display: inline;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Filtered CSV File</title>
</head>
<body>
<h1>
Filtered CSV FIle
</h1>
<br/>
<br/>
<div class="myButtons">
<input type="button" value="Add new row" class="btn btn-info" id="addRow">
<input type="button" value="Delete rows" id="delete-row" class="btn btn-info">
</div>
<br/>
<div class="table-responsive">
<table class="dataframe my_class" id="my_id">
<thead>
<tr style="text-align:right;">
<th> </th>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>col6</th>
<th>col7</th>
<th>col8</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>row1</td>
<td>row1</td>
<td>row1</td>
<td></td>
<td>row1</td>
<td>B1</td>
<td>row1</td>
<td>row1</td>
</tr>
<tr>
<th>2</th>
<td>row2</td>
<td>row2</td>
<td>row2</td>
<td></td>
<td>row2</td>
<td>AAA</td>
<td>row2</td>
<td>row2</td>
</tr>
<tr>
<th>3</th>
<td>row3</td>
<td>row3</td>
<td>row3</td>
<td></td>
<td>row3</td>
<td>C</td>
<td>row3</td>
<td>row3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You can edit the select text you are entering. Following are the things which I think you want to achieve:
Identify if the dropdown has a certain value and preselect them if possible.
If the dropdown does not have correct value for pre selection then mark them as error field.
If the above mentioned points are incorrect please let me know i will make the relevant changes which are required.
I have added a condition check if (firstshortcut[i] == $(this).find("td:eq(3)")[0].innerHTML) you can replace it with any condition that you want.
Replace the following jquery snippets
$("tr").each(function () {
var option = "",
select = "",
classObject = '',
isSelected = false;
if($(this).find("td:eq(3)")[0]){
for (var i = 0; i < firstDDM.length; i++) {
if (firstshortcut[i] == $(this).find("td:eq(3)")[0].innerHTML) {
option += '<option selected="selected" value="' + firstshortcut[i] + '">' + firstDDM[i] + '</option>';
isSelected = true;
}
else
option += '<option value="' + firstshortcut[i] + '">' + firstDDM[i] + '</option>';
}
classObject = !isSelected ? 'errorDropDown' : '';
select = '<select class="firstDDM' + ' ' + classObject + '" type="firstDDM">' + option + '</select>'
$(this).find("td:eq(3)").append(select);
}
});
Add this class to the css file:
.errorDropDown {border: 1px solid red;}

Cannot read property 'childNodes' checkbox to get value from same row

Below code should get me the value of the column next to the checked box in the table, but, once the button is clicked, I am getting:
Cannot read property childNodes of null
Note: database from firebase which where the values from the table come from
Table image :
rootRefReAgents.on("child_added", snap => {
var AgentName = snap.child("Name").val();
$("#table_body_Test").append("<tr><td>" + AgentName + "</td><td><INPUT TYPE=\"Checkbox\"> </Input></td></tr>");
});
}
function ActionData(){
let agents = [];
let table = document.getElementById("table_body_Test");
let childNodes = Array.from(table.childNodes);
// let childNodes = table.childNodes;
for (let child of childNodes.values()) {
console.log(`child: ${child}`);
if (child.constructor.name !== "HTMLTableRowElement") {
continue;
}
let agent = child.childNodes.item(1).innerHTML;
console.log(`agent: ${agent}`);
let checkbox = child.childNodes.item(3).childNodes.item(1);
console.log(`checkbox: ${checkbox}`);
console.log(checkbox.checked);
if (checkbox.checked) {
agents.push(agent);
}
}
console.log(`agents: ${agents}`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="testTable" align="center">
<thead>
<tr style="color: #D2002E; background: #FFCC01; height:32px;">
<td>Agents</td>
<td>Select</td>
</tr>
</thead>
<tbody id="table_body_Test">
</tbody>
</table>
<button id="submitBtn" onclick="ActionData()">Next</button>
ES6 brought new methods that simplify the code and its reading
const tableBody = document.querySelector('#testTable tbody' );
document.querySelector('#submitBtn').onclick=()=>
{
let agents = [];
console.clear();
for (let rowX of tableBody.rows )
{
let
agent = rowX.cells[0].textContent,
checkbox = rowX.cells[1].querySelector('input[type=checkbox]')
;
console.log( 'agent:', agent, 'checked:', checkbox.checked);
if (checkbox.checked) { agents.push(agent); }
}
console.log( 'agents (array):', agents.join(' / '));
}
/// bonus info :
/*
rootRefReAgents.on("child_added", snap=>{
let
newRow = tableBody.insertRow(-1);
newRow.insertCell(0).textContent = snap.child("Name").val();
newRow.insertCell(1).innerHTML = '<input type="Checkbox">';
});
*/
#testTable { margin: auto; border-collapse: collapse }
#testTable thead tr {
color: #D2002E;
background: #FFCC01;
height:32px;
font-weight: bold;
}
#testTable tr:nth-child(even) {background-color: lightgrey }
#testTable td { border:1px solid grey; padding: 0 20px; }
#testTable td:nth-child(2) { text-align: center }
<table id="testTable">
<thead>
<tr> <td>Agents</td> <td>Select</td> </tr>
</thead>
<tbody>
<tr> <td>AMC</td> <td> <input type="checkbox" > </td> </tr>
<tr> <td>Mygulfex</td> <td> <input type="checkbox" > </td> </tr>
<tr> <td>topStar</td> <td> <input type="checkbox" > </td> </tr>
<tr> <td>WMC</td> <td> <input type="checkbox" > </td> </tr>
</tbody>
</table>
<button id="submitBtn" >see Selects in console</button>

How to display 3 records in a single row of table

In the code below, I tried to show three records in the card in single row of a table. However, instead it displays only one record per row.
Also, I'm required to pass the item code to a modal popup but couldn't understand how to do that. Despite searching, I can't get complete clarification on how to do this.
My Complete code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/business-casual.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 2px 16px;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%;
/* Could be more or less, depending on screen size */
}
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
</style>
</head>
<body>
<?php
$cnt=0;
$rslt = mysqli_query($conn,"SELECT Name,Size,Style FROM productinfo");
if(!$rslt)
{
die(mysqli_error($conn));
}
else
{
while($row = mysqli_fetch_assoc($rslt))
{
echo "<table width='100%'>";
if($cnt==0)
{
$cnt = $cnt + 1;
echo "<tr>
<td width='30%'>
<div class='card'>
<img src='upload/download.jpg' alt='Avatar' style='width:100%' >
<div class='container'>
<h4><b>".$row['Name']."</b></h4>
<p>".$row['Size']."</p>
</div>
</div>";
?>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Inquiry</button>
<?php
echo "</td>";
}
else
{
echo "<td width='30%'>
<div class='card'>
<img src='upload/"."download.jpg"."' alt='Avatar' style='width:100%' >
<div class='container'>
<h4><b>".$row['Name']."</b></h4>
<p>".$row['Size']."</p>
</div>
</div>
";
?>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Inquiry</button>
<?php
echo "</td>";
if($cnt==2)
{
$cnt=0;
echo "</tr>";
}
else
{
$cnt = $cnt + 1;
}
}
}
echo "</table>";
}
?>
<div id="id01" class="modal">
<div align="center">
<form action="ViewProd.php" method="post" role="form" class="modal-content animate" ><br/>
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="upload/download.jpg" alt="Avatar" class="avatar">
</div>
<table border="0px" cellpadding="1" cellspacing="0">
<tr >
<td width="25%">
Name
</td>
<td width="100%"> <!--<input type="text" tabindex="1" id="Icode" />-->
<input tabindex='1' accesskey='i' name='Nm' type='text' maxlength='200' id='Nm' width="100%" required="required"/>
</td>
</tr>
<tr >
<td width="25%">
Company Name
</td>
<td>
<input type="text" tabindex="1" name="Compnm" id="Compnm" border="0" required="required"/>
</td>
</tr>
<tr >
<td width="25%">
How do you Know about us?
</td>
<td>
<input type="text" tabindex="1" id="HowKnow" name="HowKnow" />
</td>
</tr>
<tr >
<td width="25%">
Email Address
</td>
<td>
<input type="text" tabindex="1" id="EmailAdd" name="EmailAdd" required="required"/>
</td>
</tr>
<tr >
<td width="25%">
Contact No.
</td>
<td>
<input type="text" tabindex="1" id="Phone" name="Phone" />
</td>
</tr>
<tr>
<td width="25%">
City
</td>
<td>
<input type="text" tabindex="1" id="City" name ="City"/>
</td>
</tr>
<tr >
<td width="25%">
Message
</td>
<td>
<input type="text" tabindex="1" id="Remarks" name="Remarks"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="submit">Submit</button>
</td>
</tr>
</table>
</form>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
BTW, Where is your database connection?
Anyway...
1) On your first loop, inside the first condition, you increment $cnt by one, then on the condition below before the loop repeats, else will also increment $cnt. I also made your code lesser, but with the same display.
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:100%" >
<div class="container">
<h4><b>'.$row['Name'].'</b></h4>
<p>'.$row['Size'].'</p>
</div>
</div>';
?>
<button class="view-data" data-artid="<?=($row['id'])?>" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Inquiry</button>
<?php
echo '</td>';
if($cnt == 2){
$cnt = 0;
echo '</tr>';
} else {
$cnt = $cnt + 1;
}
}
echo '</table>';
2) Your second concern requires more work. You will need to use Ajax for this.
First, lets assign a class attribute and set the id of each data to each of their corresponding button, which you will notice on the code on item #1. You also have to indicate the id column on your query (lets assume that you call named it id, just replace it with the right one):
$rslt = mysqli_query($conn,"SELECT id, Name,Size,Style FROM productinfo");
Then lets create the script that will listen to the button when it is clicked:
$(document).on('click', '.view-data', function(){
var elem = $(this),
id = elem.attr('data-artid');
$.ajax({
method: 'POST',
url: 'getdata.php',
data: {'id' : id},
dataType: 'json',
success: function(result){
$("#Nm").val(result.Name);
$("#Compnm").val(result.CompanyName); /** REPLACE NECESSARY COLUMN NAME **/
/** DO THE REST HERE WITH THEIR RESPECTIVE COLUMN NAME **/
}
});
});
We have to create the getdata.php file, which you'll notice in our script above. That is where we will get the corresponding data of the clicked button.
<?php
/*** INCLUDE YOUR DB CONNECTION HERE ***/
$stmt = $conn->prepare("SELECT * FROM productinfo WHERE id = ?");
$stmt->bind_param("i", $_POST['id']);
$stmt->execute();
$meta = $stmt->result_metadata();
while ($field = $meta->fetch_field()) {
$params[] = &$row[$field->name];
}
call_user_func_array(array($stmt, 'bind_result'), $params);
while ($stmt->fetch()) {
foreach($row as $key => $val) {
$productinfo[$key] = $val;
}
}
$stmt->close();
echo json_encode($productinfo); /** WE WILL THROW THIS DATA BACK TO THE AJAX REQUEST **/
?>
Be mindful of your console log to look for errors when testing this.

Multiple checkboxes with same id and one needs to be selected - jquery

There are multiple checkboxes with same id, in asp.net repeater control. User can select either email or phone against each record in repeater rows.
In following example; there are two rows, if you select the email icon in first row then it ticks relavent checkbox which is fine but if you tick the email icon on the next row then it will untick the first row checkbox instead of ticking the one next to it.
$(function() {
$("[id*=divchkemail]").click(function() {
$(this).toggleClass("image-email");
if ($('#chkemail').prop('checked')) {
$("#chkemail").prop('checked', false);
} else {
if ($('#chkphone').prop('checked')) {
$("#chkphone").prop('checked', false);
$("#divchkphone").toggleClass("image-phone");
}
$("#chkemail").prop('checked', true);
}
});
$("[id*=divchkphone]").click(function() {
$(this).toggleClass("image-phone");
if ($('#chkphone').prop('checked')) {
$("#chkphone").prop('checked', false);
} else {
if ($('#chkemail').prop('checked')) {
$("#chkemail").prop('checked', false);
$("#divchkemail").toggleClass("image-email");
}
$("#chkphone").prop('checked', true);
}
});
});
.image-phone-disabled {
background-image: url('http://i.imgur.com/74FcgdS.png');
background-repeat: no-repeat;
width: 34px;
height: 34px;
}
.image-phone {
background-image: url(http://i.imgur.com/LwsHkOt.png);
background-repeat: no-repeat;
width: 34px;
height: 34px;
}
.image-email-disabled {
background-image: url('http://i.imgur.com/khd2NG8.png');
background-repeat: no-repeat;
width: 34px;
height: 34px;
}
.image-email {
background-image: url(http://i.imgur.com/y5KE9jx.png);
background-repeat: no-repeat;
width: 34px;
height: 34px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table border=0>
<tr>
<td>
<div id="divchkemail" class="image-email-disabled" />
</td>
<td>
<input id="chkemail" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl01$chkemail"></input>
</td>
</tr>
<tr>
<td>
<div id="divchkphone" class="image-phone-disabled" />
</td>
<td>
<input id="chkphone" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl01$chkphone"></input>
</td>
</tr>
</table>
<br/>
<br/>
<br/>
<span>
</span>
<table border=0>
<tr>
<td>
<div id="divchkemail" class="image-email-disabled" />
</td>
<td>
<input id="chkemail" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl02$chkemail"></input>
</td>
</tr>
<tr>
<td>
<div id="divchkphone" class="image-phone-disabled" />
</td>
<td>
<input id="chkphone" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl02$chkphone"></input>
</td>
</tr>
</table>
<span>
</span>
JSFiddle
http://jsfiddle.net/g8Xuz/48/
although you must use unique id's for elements, given your scenario I've written down this fiddle.
i've used this $(this).parent().next('td').find('input:checkbox'); to find the checkboxes
please try this http://jsfiddle.net/g8Xuz/50/
This works.
I gave the rows a class of contact. It can also work without the class on the rows by using $("table > tr") instead. No need to know the exact class names and can handle any number of sets allowing the correct unique IDs for the fields.
FIDDLE
$(function () {
$(".contact").on("click", function (e) {
var $div = $(this).find("div"); // the div on the clicked row
var divClass = $div.prop("class"); // its class
var $checkbox = $(this).find("input"); // the checkbox
var check = $checkbox.is(":checked"); // whether or not it is checked
if (e.target.type != "checkbox") { // we clicked somewhere else
check = !check; // toggle
$checkbox.prop("checked", check); // set the check
}
if (check) { // are we enabling?
if (divClass.indexOf("disabled") != -1) { // disabled?
$div.removeClass(divClass).addClass(divClass.replace("-disabled", ""));
}
}
else { // disable it
$div.removeClass(divClass).addClass(divClass + "-disabled");
}
var $otherContact=$(this).siblings("tr"); // the sibling row
if (check) {
$div = $otherContact.find("div");
divClass=$div.prop("class");
if (divClass.indexOf("disabled") == -1) {
$div.removeClass(divClass).addClass(divClass+"-disabled");
}
$checkbox=$otherContact.find("input"); // the checkbox
if ($checkbox.is(":checked")) $checkbox.prop("checked",false);
}
});
});
It's happening because you are selecting element by id and which is duplicate. You have to find your required element traversing up through its ancestors in the DOM tree so that selector only select elements within current row by setting a area of elements. Here is working code.
$(function () {
$("[id*=divchkemail]").click(function (e) {
var currentRow = $(e.target).parents().closest('table');
$(this).toggleClass("image-email");
if ($(currentRow).find('#chkemail').prop('checked')) {
$(currentRow).find('#chkemail').prop('checked', false);
}
else {
var chkPhoneInCurrentRow = $(currentRow).find('#chkphone')
var divchkInCurrentRow = $(currentRow).find('#divchkphone')
if ($(chkPhoneInCurrentRow).prop('checked')) {
$(chkPhoneInCurrentRow).prop('checked', false);
$(divchkInCurrentRow).toggleClass("image-phone");
}
$(currentRow).find('#chkemail').prop('checked', true);
}
});
$("[id*=divchkphone]").click(function (e) {
var currentRow = $(e.target).parents().closest('table');
$(this).toggleClass("image-phone");
if ($(currentRow).find('#chkphone').prop('checked')) {
$(currentRow).find('#chkphone').prop('checked', false);
}
else {
var chkEmailInCurrentRow = $(currentRow).find('#chkemail')
var divchkInCurrentRow = $(currentRow).find('#divchkemail')
if ($(chkEmailInCurrentRow).prop('checked')) {
$(chkEmailInCurrentRow).prop('checked', false);
$(divchkInCurrentRow).toggleClass("image-email");
}
$(currentRow).find('#chkphone').prop('checked', true);
}
});
});
.image-phone-disabled {
background-image:url('http://i.imgur.com/74FcgdS.png');
background-repeat:no-repeat ;
width:34px;
height:34px;
}
.image-phone {
background-image:url(http://i.imgur.com/LwsHkOt.png);
background-repeat:no-repeat ;
width:34px;
height:34px;
}
.image-email-disabled {
background-image:url('http://i.imgur.com/khd2NG8.png');
background-repeat:no-repeat ;
width:34px;
height:34px;
}
.image-email {
background-image:url(http://i.imgur.com/y5KE9jx.png);
background-repeat:no-repeat ;
width:34px;
height:34px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border=0>
<tr>
<td>
<div id="divchkemail" class="image-email-disabled" /> </td>
<td> <input id="chkemail" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl01$chkemail"></input>
</td>
</tr>
<tr>
<td>
<div id="divchkphone" class="image-phone-disabled" />
</td>
<td>
<input id="chkphone" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl01$chkphone"></input>
</td>
</tr>
</table>
<br/>
<br/>
<br/>
<span>
</span>
<table border=0>
<tr>
<td><div id="divchkemail" class="image-email-disabled" /></td>
<td>
<input id="chkemail" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl02$chkemail"></input>
</td>
</tr>
<tr>
<td><div id="divchkphone" class="image-phone-disabled" /></td>
<td>
<input id="chkphone" type="checkbox" name="ctl00$ContentPlaceHolder1$tabContainer$tabRequests$Requests$cndt1$FindInspector$rptSearch$ctl02$chkphone"></input>
</td>
</tr>
</table>
<span>
</span>
Here is working fiddle.
http://jsfiddle.net/hannnan/noukkjsq/
This is happening because you are using the same IDs for everything - the JS cannot differentiate between the two rows. So you click the second row's icon, the first element it finds with your ID (#divchkemail) it performs the action on, which is in the first row.

Categories