We Keep Coding

How to hide table column on submit inside a modal

On a user profile page I have a table where the headings are not on the top but on the left side, and descriptions are on the right.
When user clicks 'edit profile' a modal opens up.
In the modal I want to hide table columns or I guess in this case rows by selecting the checkboxes and then hitting the 'save changes' button. When 'save changes' is clicked their choices should also be saved and updated on their profile.
I also want a few of the checkboxes to already be checked when they visit their profile page for the first time after registering. And then they should be able to change it there after.
My code is not working and I tried everything I could find on hiding columns... I have been looking for days. Any help is much appreciated!
TABLE
<div class="row">
<table class="table table-responsive-sm" id="profileTable" id="table-pagination" cellspacing="0" style="width:100%" >
<tbody>
<?php
$sql = "SELECT `dancing_since`, `dancer_dob`, `school`, `school_code`,`teacher_name`, `class_location`, `date_enrolled`, `date_firstdance`, `first_dance_name`, `current_lvl` FROM `dancers` WHERE name = '$name' AND dancer_name = '$dancerName'";
$res = mysqli_query($con,$sql);
//if($res==FALSE){
//die('there was an error running query [' . $con->error . ']');
// }
while($row=mysqli_fetch_array($res)){
echo '
<tr>
<th class="tcol1">Dancing Since:</th>
<td class="tcol1">'.$row["dancing_since"].'</td>
</tr>
<tr>
<th class="tcol2">D.O.B:</th>
<td class="tcol2">'.$row["dancer_dob"].'</td>
</tr>
<tr>
<th class="tcol3">School:</th>
<td class="tcol3">'.$row["school"].'</td>
</tr>
<tr>
<th class="tcol4">School Code:</th>
<td class="tcol4">'.$row["school_code"].'</td>
</tr>
<tr>
<th class="tcol5">Teachers Name:</th>
<td class="tcol5">'.$row["teacher_name"].'</td>
</tr>
<tr>
<th class="tcol6">Class Location:</th>
<td class="tcol6">'.$row["class_location"].'</td>
</tr>
<tr>
<th class="tcol7">Date Enrolled:</th>
<td class="tcol7">'.$row["date_enrolled"].'</td>
</tr>
<tr>
<th class="tcol8">First Feis</th>
<td class="tcol8">'.$row["first_dance_name"].'</td>
</tr>
<tr>
<th class="tcol9">Date of First Feis:</th>
<td class="tcol9">'.$row["date_firstdance"].'</td>
</tr>
<tr>
<th class="tcol10">Current Level:</th>
<td class="tcol10">'.$row["current_lvl"].'</td>
</tr>
';
}
?>
</tbody>
MODAL
<!--POPUP MODAL FORM-->
<div class="formModal">
<div class="formModal text-right">
<button type="button" class="btn btn-outline-primary editprofile-btn" data-toggle="modal" data-target=".bd-editprofile-modal-lg">Edit Profile</button>
</div>
<!-- Modal -->
<div class="modal fade bd-editprofile-modal-lg" id="editProfile" tabindex="-1" role="dialog" aria-labelledby="editProfile" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-success modal-lg" role="document">
<div class="modal-content">
<form id="updateForm" method="post" class="form-horizontal" name="tcol" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" role="form" data-toggle="validator">
<div class="controls">
<!--Modal cascading tabs-->
<div class="modal-c-tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-2 light-blue darken-3" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel7" role="tab">Edit Profile Information</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel8" role="tab">Change visiblity</a>
</li>
</ul>
<!-- Tab panels -->
<div class="tab-content">
<!--Panel 7-->
//some code for edit profile form
<!-- PANEL 8 -->
<div class="tab-pane fade" id="panel8" role="tabpanel">
<div class="modal-body">
<div class="container-fluid">
<div class="panel-8-heading text-center">
<b>Select up to 10 abilities you would like to appear on your profile.</b>
</div>
<br>
<div class="row">
<div class="col-sm-4">
<input type="checkbox" name="col1" class="hidecol" id="col_1" data-column="0"/> Dancing Since
</div>
<div class="col-sm-4">
<input type="checkbox" name="col2" class="hidecol" id="col_2" checked="checked" data-column="1" /> D.O.B
</div>
<div class="col-sm-4">
<input type="checkbox" name="col3" class="hidecol" id="col_3" data-column="2"/> School
</div>
</div>
<div class="row">
<div class="col-sm-4">
<input type="checkbox" name="col4" class="hidecol" id="col_4" checked="checked" data-column="3"/> School Code
</div>
<div class="col-sm-4">
<input type="checkbox" name="col5" class="hidecol" id="col_5" checked="checked" data-column="4"/> Teacher's Name
</div>
<div class="col-sm-4">
<input type="checkbox" name="col6" class="hidecol" id="col_6" checked="checked" data-column="5"/> Class Location
</div>
</div>
<div class="row">
<div class="col-sm-4">
<input type="checkbox" class="hidecol" name="col7" id="col_7" checked="checked" data-column="6"/> Date Enrolled
</div>
<div class="col-sm-4">
<input type="checkbox" class="hidecol" name="col8" id="col_8" data-column="7" /> First competition
</div>
<div class="col-sm-4">
<input type="checkbox" class="hidecol" name="col9" id="col_9" checked="checked" data-column="8"/> Date of First dance
</div>
</div>
<div class="row">
<div class="col-sm-4">
<input type="checkbox" class="hidecol" name="col10" id="col_10" data-column="9" /> Current Level
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</div>
</div>
<!-- PANEL 8 END -->
</div>
</div>
<!-- MODAL FOOTER -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="save" id="save">Save changes</button>
</div>
</div>
</form>
</div>
</div>
JQUERY
$(document).ready(function() {
//modal checkbox
$('#profileTable tr td:nth-child(3)').hide();
});
EDIT
Below are images of the user table and the modal with checkboxes. I want to be able to hide the entire row. so if user deselect location then on their profile they would no longer see "location: NJ"
PROFILE TABLE
MODAL

I would suggest a slightly different approach:
you write a modal form where user selects the content he or she wants to be visible in the profile page.
submit that data to the server.
reload the page
when creating a new page, return only the data that the user has selected in the form (from settings), use filter (or a set of if conditions as this seems to be homework) to select the data your user wants to see.
return only the necessary data
render it. (You will not need to hide the data)
This approach has several benefits:
you avoid the complexity of hiding / showing data
you avoid displaying data that should not be displayed: user can still view hidden columns if they edit html, and that is a huge no-no in web development.
it is easier to add new data to the profile
you can easily save the user preferences as per your requirement
If you want to go a step further, you can try improving the above by writing ajax code to update the rows dynamically, without reloading the entire page.
Will not be giving any specific code examples as its a lengthy task, and also it looks like a class or homework task. Good luck!

HTML
<table border="1" id="myTable">
<tbody>
<tr id='trow1'>
<th>Dancing Since:</th>
<td>2012</td>
</tr>
<tr id='trow2'>
<th>D.O.B:</th>
<td>1994</td>
</tr>
<tr id='trow3'>
<th>School:</th>
<td>ABC</td>
</tr>
<tr id='trow4'>
<th>School Code:</th>
<td>1001</td>
</tr>
<tr id='trow5'>
<th>Teachers Name:</th>
<td>Badai</td>
</tr>
</tbody>
</table>
<button id="myBtn_colSwitch" style="margin-left: 2%;" onClick="columnSwitchMODAL()">Row Filter</button> <!-- onclick opens MODAL -->
<!-- The Modal Column Switch -->
<div id="myModal_colSwitch" class="modal_colSwitch">
<div class="modal-content_colSwitch">
<span class="close_colSwitch">×</span>
<input id='1' type='checkbox' onClick='javascript:displayROW(1);' checked>Dancing Since<br>
<input id='2' type='checkbox' onClick='javascript:displayROW(2);' checked>D.O.B<br>
<input id='3' type='checkbox' onClick='javascript:displayROW(3);' checked>School<br>
<input id='4' type='checkbox' onClick='javascript:displayROW(4);' checked>School Code<br>
<input id='5' type='checkbox' onClick='javascript:displayROW(5);' checked>Teachers Name<br>
</div>
</div>
<!-- Column Switching ENDS -->
CSS
/* Column Switch */
.modal_colSwitch
{
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
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 */
}
.modal-content_colSwitch
{
background-color: #fefefe;
margin: 100px auto;
padding: 60px;
border: 1px solid #888;
width: 25%;
height: 25%;
overflow-y: scroll;
box-shadow: 5px 10px 18px #888888;
}
#myBtn_colSwitch
{
background-color: #6599FF;
border: none;
color: white;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
/* The Close Button */
.close_colSwitch {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close_colSwitch:hover,
.close_colSwitch:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* Column Switch ENDS */
/* Table Style */
#myTable {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 30%;
margin: 0 auto;
}
#myTable td, #myTable th {
border: 1px solid #ddd;
padding: 8px;
}
#myTable tr:nth-child(even){background-color: #f2f2f2;}
#myTable tr:hover {background-color: #ddd;}
JAVASCRIPT
function columnSwitchMODAL()
{
var modal_colSwitch = document.getElementById('myModal_colSwitch');
var btn_colSwitch = document.getElementById("myBtn_colSwitch");
var span_colSwitch = document.getElementsByClassName("close_colSwitch")[0];
btn_colSwitch.onclick = function()
{
modal_colSwitch.style.display = "block";
}
span_colSwitch.onclick = function()
{
modal_colSwitch.style.display = "none";
}
window.onclick = function(event)
{
if (event.target == modal_colSwitch)
{
modal_colSwitch.style.display = "none";
}
}
}
function displayROW(row_no)
{
var hideDisplay = '';
if(document.getElementById(row_no).checked)
hideDisplay = 'table-row';
else
hideDisplay = 'none';
if(row_no == 1) document.getElementById('trow1').style.display = hideDisplay;
else if(row_no == 2) document.getElementById('trow2').style.display = hideDisplay;
else if(row_no == 3) document.getElementById('trow3').style.display = hideDisplay;
else if(row_no == 4) document.getElementById('trow4').style.display = hideDisplay;
else if(row_no == 5) document.getElementById('trow5').style.display = hideDisplay;
}
Hope this helps!

I don’t know if this is only an extract of the code or a mistake, because I can’t find any <table> defined in the modal. And from your jquery code you need an element with id profileTable.
I suggest you to state what have you tried and what is not working. Also you can divide the problem in a smaller scale and to identify the root cause. E.g. try the hide/show mechanism outside the modal, or break down the jquery code (if $('#profileTable tr td:nth-child(3)') return nothing then .hide() would take no effect)
Update 1
I think you are trying to hide the table column(the vertical one). First, the table has 2 ids, profileTable and table-pagination. Remove either one so the table has exactly one id. Since # is a id selector, multiple id may mess up the css. Second, let's put "modal" aside. Browser has no knowledge about modal, it just know there are bunch of nested html elements with different styling. With or without modal, javascript should work the same way. It helps you to break down your through model and find the root cause easier.
I made a demo base on the snippet you provided. Two buttons at the bottom shows how to hide and show column.
https://codepen.io/anon/pen/oMpRbq
Update 2
Understand the requirement and update the demo. Hide/show the row instead of column. The concept is almost the same, the different is to select tr instead of td. I only make 2 checkbox since they are all the same.
$('#filter-panel').on('change', 'input', function(e) {
var rowIndex = $(e.currentTarget).val();
$('#profileTable tr:nth-child(' + rowIndex + ')').toggle();
});
table {
border: 1px solid black;
border-collapse: collapse;
}
table td,
table th {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<table class="table table-responsive-sm" id="profileTable" cellspacing="0" style="width:100%">
<tbody>
<tr>
<th class="tcol1">Dancing Since:</th>
<td class="tcol1">'.$row["dancing_since"].'</td>
</tr>
<tr>
<th class="tcol2">D.O.B:</th>
<td class="tcol2">'.$row["dancer_dob"].'</td>
</tr>
<tr>
<th class="tcol3">School:</th>
<td class="tcol3">'.$row["school"].'</td>
</tr>
<tr>
<th class="tcol4">School Code:</th>
<td class="tcol4">'.$row["school_code"].'</td>
</tr>
<tr>
<th class="tcol5">Teachers Name:</th>
<td class="tcol5">'.$row["teacher_name"].'</td>
</tr>
<tr>
<th class="tcol6">Class Location:</th>
<td class="tcol6">'.$row["class_location"].'</td>
</tr>
<tr>
<th class="tcol7">Date Enrolled:</th>
<td class="tcol7">'.$row["date_enrolled"].'</td>
</tr>
<tr>
<th class="tcol8">First Feis</th>
<td class="tcol8">'.$row["first_dance_name"].'</td>
</tr>
<tr>
<th class="tcol9">Date of First Feis:</th>
<td class="tcol9">'.$row["date_firstdance"].'</td>
</tr>
<tr>
<th class="tcol10">Current Level:</th>
<td class="tcol10">'.$row["current_lvl"].'</td>
</tr>
</tbody>
</table>
<br /><br />
<div id="filter-panel">
<input type="checkbox" name="vehicle" value="1" checked/> dancing since
<input type="checkbox" name="vehicle" value="2" checked/> d.o.b
</div>

Need to use one field many times in one html form

I have two problems:
1- I need to enter more than one question in ContentQue field. First click on "Add New Question" button then enter a question, click OK, show the data, then again click on "Add New Question" button, but in this time the input is not shown?
2- I want to force the user to choose one module from select.
Thanks in advanced
<head>
<meta charset="utf-8">
<title>Add New Item</title>
<style>
#myquelist
{
overflow-y:scroll;
}
// To force the user enter data
.btn
{
background-color:#336;
color:#CC6;
border-radius:10px;
padding:10px 10px 10px 10px;
margin:10px 10px 10px 10px;
opacity:0.5;
}
.txt
{
background-color:#09F;
color:#009;
border-radius:10px;
}
.err
{
color:#F00;
}
</style>
<!-- Java Script-->
<script src="jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnquestion').click(function () {
$('#myquelist').hide('fast');
$('#Type3').show('fast');
});
$('#btnOK').click(function () {
var a=$('#ContentQue').val();
var b=$('#qlist').val();
var c=b+"<br>"+a;
$('#qlist').val(c);
$('#ContentQue').val('');
document.getElementById("Type3").style.height="150px";
document.getElementById("Type3").innerHTML=c;
$('#myquelist').show('fast');
});
$('#myquelist').hide('fast');
$('#Type3').hide('fast');
$('#Type2').hide('fast');
$('#ExamType1').click(function () {
$('#Type2').hide('fast');
$('#Type3').hide('fast');
$('#Type1').show('fast');
});
$('#ExamType2').click(function () {
$('#Type1').hide('fast');
$('#Type3').hide('fast');
$('#Type2').show('fast');
});
$('#ExamType3').click(function () {
$('#Type1').hide('fast');
$('#Type2').hide('fast');
alert("A");
//$('#myquelist').show('fast');
$('#Type3').show('fast');
});
// To force the user enter data in text box
$(" :text" ).addClass("txt");
$("p").hide();
$("#PageBody input:text select").blur(function()
{
if(!$(this).val())
{
$(this).parent("div").children("p").show();
$(this).parent("div").children("p").addClass("err");
}
else
{
$(this).parent("div").children("p").hide();
}
});
});
</script>
</head>
<body id="PageBody">
<header><h2>New Exam</h2></header>
<form id="form1">
<table width="100%" border="2" cellspacing="5px" cellpadding="5px">
<tr>
<th><b>Assignment Title :
<td><div><input type="text" name="ExamTitle" autofocus ><p>Please Exam Title</p></div></td>
</tr>
<tr>
<th><b>Exam Type</b></th>
<td>
<input type="radio" name="ExamType" value="File" id="ExamType1" checked="checked">File
<input type="radio" name="ExamType" value="Text" id="ExamType2">Text
<input type="radio" name="ExamType" value="Questions" id="ExamType3">Questions
<div id="Type1">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<div id="Type2">
<input type="text" name="ContentText" class="hidden" autofocus>
</div>
<div id="myquelist">
<button id="btnquestion" type="button" name="AddNew" class="hidden">Add New Question</button>
</div>
<div id="Type3">
<input type="text" id="ContentQue" name="ContentQue" >
<button type="button" id="btnOK" name="OK" >OK</button>
</div>
<input type="hidden" id="qlist" name="qlist">
</td>
</tr>
<tr>
<th><b>Module :</b></th>
<td>
<select id="Modl" name="Modl" >
<option selected="selected" disabled="disabled" >Choose Module</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</td>
</tr>
<!-- Other inputs -->
<tr>
<td align="center" colspan="2">
<input type="submit" name="SaveBtn" style="width:95px;height:50px"; value="Save" />
</td>
</tr>
</table>
</form>
<?php
$qlist = $_POST["qlist"];
?>
</body>
</html>

This needed a fair amount of work. I had to clean up a few HTML issues and change the logic some.
First, much easier to use an Array to store the various questions. I would pass the array to your form handler, but I populated the qlist as you were shooting for.
Second, to show the questions, I used a List. Easier to work with later.
Third, I wrapped the different parts so they are easier to hide/show.
Fourth, I added in verification that a user entered a question when clicking ok and when they submit the form, to ensure they selected a Module.
HTML
<header>
<h2>New Exam</h2>
</header>
<form id="form1">
<table width="100%" border="2" cellspacing="5px" cellpadding="5px">
<tr>
<th width="135px"><b>Assignment Title : </b></th>
<td>
<div>
<input type="text" name="ExamTitle" autofocus />
<p>Please Exam Title</p>
</div>
</td>
</tr>
<tr>
<th height="80px"><b>Exam Type :</b></th>
<td valign="top">
<input type="radio" name="ExamType" value="File" id="ExamType1" checked="checked" />File
<input type="radio" name="ExamType" value="Text" id="ExamType2" />Text
<input type="radio" name="ExamType" value="Questions" id="ExamType3" />Questions
<div id="Type1">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<div id="Type2">
<input type="text" name="ContentText" class="hidden" autofocus>
</div>
<div id="Type3">
<div id="addNew">
<button id="btnquestion" type="button" name="AddNew" class="hidden">Add New Question</button>
</div>
<div id="addQuestion" style="display: none;">
<input type="text" id="ContentQue" name="ContentQue">
<button type="button" id="btnOK" name="OK">OK</button>
</div>
<div id="showQuestions" style="display: none;">
</div>
<input type="hidden" id="qlist" name="qlist">
</div>
</td>
</tr>
<tr>
<th><b>Module :</b></th>
<td>
<select id="Modl" name="Modl">
<option selected="selected" disabled="disabled">Choose Module</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</td>
</tr>
<!-- Other inputs -->
<tr>
<td align="center" colspan="2">
<input type="submit" name="SaveBtn" style="width:95px;height:50px;" value="Save" />
</td>
</tr>
</table>
</form>
CSS
.btn {
background-color: #336;
color: #CC6;
border-radius: 10px;
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
opacity: 0.5;
}
.txt {
background-color: #09F;
color: #009;
border-radius: 10px;
}
.err {
color: #F00;
}
#Type3 ul {
list-style: none;
margin: 0;
padding: 0;
max-height: 150px;
overflow: auto;
}
#Type3 ul li {
list-style: none;
}
JQUERY
// Set Globals
var ql = [];
$(document).ready(function() {
// Set View State
$("#Type1").show();
$("#Type2").hide();
$("#Type3").hide();
// Set Action Functions
$('#btnquestion').click(function() {
$('#addNew').hide();
$('#addQuestion').show();
$("#ContentQue").focus();
});
$('#btnOK').click(function() {
var q;
q = $('#ContentQue').val();
if (q == "") {
alert("Please enter a Question.");
$("#ContentQue").focus();
return false;
}
ql.push(q);
$('#qlist').val(ql.join(","));
$('#ContentQue').val('');
if (ql.length > 0) {
var qtext = $("<ul>");
$.each(ql, function(i, v) {
qtext.append("<li id='que-" + i + "'>" + v + "</li>");
});
$("#showQuestions").html(qtext);
}
$("#addQuestion").hide();
$('#showQuestions').show();
$("#addNew").show();
});
$("#form1 input[name='ExamType']").click(function() {
var pick = $(this).val();
switch (pick) {
case "File":
$("#Type1").show();
$("#Type2").hide();
$("#Type3").hide();
break;
case "Text":
$("#Type1").hide();
$("#Type2").show();
$("#Type3").hide();
break;
case "Questions":
$("#Type1").hide();
$("#Type2").hide();
$("#Type3").show();
break;
}
});
});
$("#form1").submit(function(e){
e.preventDefault();
if($("#Modl option").eq(0).is(":selected")){
alert("Please select a Module.");
return false;
}
return true;
});
Working Example: http://jsfiddle.net/Twisty/ax2zds1o/6/
Things you may want to consider:
A button to remove a question from the list
How many questions do you want to allow? 100? 200? 1000? How will you pass a large number of questions?
Allowing the user to arrange the order of the questions in the list before submitting

Add a new row dynamically after clicking a button in jquery

I have to create a form which can dynamically adds rows after clicking a button, below is the code. So basically I want to clone the row with id="ADD" after clicking the btAdd button in the next row.
I don't know what to add inside the append function? I have tried a few things but its not working. Thanks in advance.
$(document).ready(function(){
$("#btAdd").click(function(){
$("#ADD").append(" ");
});
});
</script>
</head>
<body>
<h1></h1>
<div id = "myDiv">
<form name="form1">
<table border='1' width='700' align="center" cellpadding='5' cellspacing='10'>
<tr>
<th>Place configuration here</th>
</tr>
<tr>
<td>Server Url: <input type="text" name="surl" id="surl"></td>
</tr>
<tr>
<td>
Filter Name: <input type="text" name="fname"id="fname">
Filter Type
<select name="operation">
<option value="text">Text</option>
<option value = "List">List</option>
</select>
</td>
</tr>
<tr id="ADD">
<td>
Filter Options: <input type="text" name="foptions"id="foptions">
<input type="button" name="ADDb" value="+" id="btAdd">
</td>
</tr>
<tr>
<td>
Filter Label: <input type="button" name="filterb" id="filterb" value="Add Filter" onclick="showData();">
</td>
</tr>
<tr>
<td><input type="button" name="submitb" id="submitb" value="Submit"></td>
</tr>
</table>
</form>
</div>
</body>
</html>

try it:
$("#btAdd").click(function(){
$("#ADD").clone().removeAttr("id").insertAfter("#ADD");
});

Try this
$("#btAdd").click(function(){
$("#ADD").clone().attr("id","ADD_"+$("#table1 tbody").children("tr").length).insertAfter("#ADD");
});
where table1 is the table id.

<!DOCTYPE HTML>
<html>
<head>
<style>
#myDiv { margin: 0 auto; width: 800px; }
.tr { clear: both; border: 1px solid #ccc; margin: 0 0 10px; padding: 5px; overflow: hidden; }
.tr .label { float: left; width: 115px; }
.tr .inputs { float: left; width: 230px; }
.tr .btns { float: left; width: 100px; }
.tr ul { margin: 0; padding: 0; }
.tr li { list-style: none; }
</style>
</head>
<body>
<div id = "myDiv">
<form name="form1">
<div class="tr">
Place configuration here
</div>
<div class="tr">
Server Url:
<input type="text" name="surl" id="surl">
</div>
<div class="tr">
Filter Name:
<input type="text" name="fname" id="fname">
Filter Type
<select name="operation">
<option value="text">Text</option>
<option value = "List">List</option>
</select>
</div>
<div class="tr" id="ADD">
<div class="label">Filter Options:</div>
<ul class="inputs">
<li>
<input type="text" name="foptions[]"> <input type="button" name="ADDb" value="+" id="btAdd">
</li>
</ul>
</div>
<div class="tr">
Filter Label:
<input type="button" name="filterb" id="filterb" value="Add Filter" onclick="showData();">
</div>
<div class="tr">
<input type="button" name="submitb" id="submitb" value="Submit">
</div>
</form>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
var S = '<li><input type="text" name="foptions[]"> <input type="button" name="rm" value="-" /></li>',
$ul = $('#ADD ul'), $add = $('#ADD');
$add.on('click.add', '#btAdd', function() {
$ul.append(S);
});
$add.on('click.rm', '[name=rm]', function() {
$(this).closest('li').remove();
});
});
</script>
</body>
</html>

How to filter inputs by parent node, using JavaScript?

I have a problem with filtering inputs.
I have partial view which include sth like this:
<div class="editor">
<div class="demand-editor-label editor-label">#Html.LabelFor(m => m.WorkGroupID) #Model.WorkTypeD</div>
<div class="default-editor-field">
<div style="max-height:100px; overflow:auto;border-style:solid;border-width:1px;padding:3px; width: 98% !important; max-width:590px" id="#string.Format("uiDivWorkGroup{0}",Model.WorkTypeD)">
#Html.CheckBoxListFor(x => x.WorkGroupID, x => x.WorkGroupList, x => x.Key, x => x.Value, x => x.SelectedWorkGroups, new HtmlListInfo(HtmlTag.table, 2))
</div>
</div>
I execute it in my view like this:
<div id="uiDivWorkGroupMainNn" style="padding-top: 5px; clear: both">
#Html.PartialFor(model => model, MVC.Components.Views.Partial.WorkGroupView)
</div>
<div id="uiDivWorkGroupMainSn" style="padding-top: 5px; clear: both">
#Html.PartialFor(model => model, MVC.Components.Views.Partial.WorkGroupView)
</div>
<div id="uiDivWorkGroupMainWn" style="padding-top: 5px; clear: both">
#Html.PartialFor(model => model, MVC.Components.Views.Partial.WorkGroupView)
</div>
There is three different groups that using this partialview.
There is output:
<div id="uiDivWorkGroupMainNn" style="padding-top: 5px; clear: both;">
<div class="editor">
<div class="demand-editor-label editor-label"><label for="WorkGroupID">Work group</label> Nn</div>
<div class="default-editor-field">
<div id="uiDivWorkGroupNn" style="border-width: 1px; border-style: solid; padding: 3px; width: 98% !important; overflow: auto; max-height: 100px; max-width: 590px;">
<table cellSpacing="0">
<tbody>
<tr>
<td>
<input name="WorkGroupID" id="WorkGroupID12" type="checkbox" value="1034">
<label for="WorkGroupID12">Emergency [nN]</label>
</td>
<td>
<input name="WorkGroupID" id="WorkGroupID13" type="checkbox" value="1021">
<label for="WorkGroupID13">Cable nN</label>
</td>
</tr>
<tr>
</tr></tbody></table>
</div>
</div>
</div>
<br>
</div>
<div id="uiDivWorkGroupMainWn" style="padding-top: 5px; clear: both;">
<div class="editor">
<div class="demand-editor-label editor-label"><label for="WorkGroupID">Grupa prac</label> Wn</div>
<div class="default-editor-field">
<div id="uiDivWorkGroupWn" style="border-width: 1px; border-style: solid; padding: 3px; width: 98% !important; overflow: auto; max-height: 100px; max-width: 590px;">
<table cellSpacing="0">
<tbody>
<tr>
<td>
<input name="WorkGroupID" id="WorkGroupID12" type="checkbox" value="1014">
<label for="WorkGroupID15">Emergency [Wn]</label>
</td>
<td>
<input name="WorkGroupID" id="WorkGroupID13" type="checkbox" value="1029">
<label for="WorkGroupID16">Call Wn</label>
</td>
</tr>
<tr>
</tr></tbody></table>
</div>
</div>
</div>
<br>
</div>
Finally I want to use sth like this:
$('input[name|="WorkGroupID"]').change(some function1);
$('input[name|="WorkGroupID"]').change(some function2);
$('input[name|="WorkGroupID"]').change(some function3);
Unfortunately it collects all inputs and imposes on them 1-3function calls on change event but I want to collect them only from one group and apply them specific function. My first thought was to filter group of inputs by div parent which is for example uiDivWorkGroupMainWn but don't know how to do it. If it's even possible. I try sth like this but it doesn't work. I've read about .filter function but I don't know how to use it in this specific situation.
$('input[name|="WorkGroupID"]').parent("#uiDivWorkGroupMainNn").change(some function);
At this moment I'm not good at JS, so that's why I'm writing here.

increment the value of one td in a table

I have a page with an "add item" button. When this button is clicked, an ajax call is made and a table is returned with all the information from the database based on the sku entered. (Dummy data is there now for testing.) If the button is only clicked once, there is no trouble incrementing or decrementing the qty value. If the button is clicked two, or more, times, if you click the increment button on the second table it will increase the value in the first table.
I have added a counter that gives a unique number to each table created. I think what I want to do is figure out how to determine the counter number for the specific table that is being incremented and pass it to the javascript function so it works with that specific entry.
Here is the code with the button, ajax call, and javascript:
<script type="text/javascript">
var count = 1;
$('#items').live('pageinit',function(event){
$('#additem').click(function () {
//alert("add clicked");
var request = $.ajax({
url: "http://www.furnguy.com/app-pages/additem.php",
type: "POST",
data: {COUNTER : count},
dataType: "html"
});
request.done(function(html) {
//alert("here");
if (html != '') {
$('#salesitems').append(html).trigger('create');
}
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
count++;
});
});
function deleteItem() {
$('table').click(function(){
$(this).parent().remove();
});
};
function increaseQty() {
var currentVal = parseInt($("#qty").val());
if (currentVal != NaN) {
$("#qty").val(currentVal + 1);
}
};
function decreaseQty() {
var currentVal = parseInt($("#qty").val());
if (currentVal != NaN) {
$("#qty").val(currentVal - 1);
}
};
</script>
</head>
<body>
<div data-role="page" id="items" data-title="Sales Entry - Items">
<div data-role="header">
<h1>Sales Entry</h1>
</div><!-- /header -->
<div data-role="content">
<div id="main_nav">
<span style="float: left; display: inline; width: 100px;">
<label>Enter SKU</label>
</span>
<span style="float: left; display: inline; width: 250px;">
<input type="text" name="initialsku" id ="initialsku" />
</span>
<br /><br /><br />
<button id="additem" data-icon="plus" data-inline="true" data-mini="true" data-theme="b">Add Item</button>
<!-- <button id="removeitem" data-icon="minus" data-inline="true" data-mini="true" data-theme="b">Remove Item</button> -->
<div id="salesitems"></div>
</div>
</div><!-- /content -->
</body>
</html>
here is the page being called by the ajax:
<?php
$counter = $_POST['COUNTER'];
?>
<body>
<div data-role="fieldcontain">
<div class="addItems">
<table id="myTable" style="border-bottom: 1px solid black;">
<tr>
<td style="width: 50px;">
<label for="qty">Qty:</label>
</td>
<td style="width: 75px;">
<input type="button" value="+" id="increase" onclick="increaseQty();" style="float: left; display: inline;" />
<input type="button" value="-" id="decrease" onclick="decreaseQty();" style="float: left; display: inline;" />
<input type="text" name="qty" id="qty" value="1" style="float: left; display: inline;" />
</td>
<td style="width: 50px;">
<label for="sku">SKU:</label>
</td>
<td style="width: 350px;">
<input type="text" name="sku" id="sku" readonly="readonly" value="123526874256" />
</td>
<td style="width: 50px;">
<label for="retail">Retail:</label>
</td>
<td style="width: 250px;">
<input type="text" name="retail" id="retail" readonly="readonly" value="$1599.99" />
</td>
<td id="tableNumber">
<?php echo $counter; ?>
</td>
</tr>
<tr>
<td style="width: 50px;">
<label for="desc">Desc:</label>
</td>
<td colspan="5">
<input type="text" name="desc" id="desc" readonly="readonly" value="This is a really big couch." />
</td>
<td>
<input type="button" value="X" onclick="deleteItem();" />
</td>
</tr>
</table>
</div>
</div>
Anyone have suggestions about this? I would really appreciate the help as I have been working on this for a couple days now.
Thanks in advance!

Every time you click the button, you are inserting a new table with a #qty input. When you later try to increase quantity, jQuery just finds the first #qty in the dom: your first table.
You should probably set a unique id on your qty input, e.g.:
<input type="button" value="+" id="increase" onclick="increaseQty('qty_<?php echo $_POST['INITIALSKU']; ?>');" style="float: left; display: inline;" />
<input type="button" value="-" id="decrease" onclick="decreaseQty('qty_<?php echo $_POST['INITIALSKU']; ?>');" style="float: left; display: inline;" />
<input type="text" name="qty" id="qty_<?php echo $_POST['INITIALSKU']; ?>" value="1" style="float: left; display: inline;" />
and then rewrite the increase/decrease functions to take the id of the field to modify. I don't actually speak PHP but you get the idea