Develop Reference

Add/Remove Checked box row (Javascript/Jquery)

I'm trying to add and remove the text of the cell 2 cells of that row when they are checked.
Let's say they have 4 columns on the table and want to show/hide some row in a different section of the page.
My goal is to add/display and delete/hide the selected row value based on the checkbox value (0|1). And for each row values, it should have a button/link (X) to delete that and uncheck the checkbox in the table.
<h1 style="text-align:center">Selector/Removal</h1>
<h4 class="selected_values"></h4>
<button onclick="clearSelection();">Clear</button>
<table id="" class="table table-bordered table-responsive table-striped">
<tr class="" style="background-color: #237ec2; color: white;">
<td class="text-center"><span>A</span></td>
<td class="text-center"><span>B</span></td>
<td class="text-center"><span>C</span></td>
<td class="text-center"><span>D</span></td>
</tr>
<tr>
<td>
<input type="checkbox" class="usercheck"><span>A1</span></td>
<td>
<h5>B1</td>
<td>
<h5>C1</h5></td>
<td>
<h5>D1</h5></td>
</tr>
<tr>
<td>
<input type="checkbox" class="usercheck"><span>A2</span></td>
<td>
<h5><span class="second_col">B2</span></h5></td>
<td>
<h5>C2</h5></td>
<td>
<h5>D2</h5></td>
</tr>
<tr style="">
<td>
<input type="checkbox" class="usercheck">
<span>A3</span></td>
<td>
<h5><span class="second_col">B3</span></h5></td>
<td>
<h5>C3</h5></td>
<td>
<h5>D3</h5></td>
</tr>
</table>
JavaScript that I tried is the below:
$(document).ready(function() {
$('.usercheck').change(function() {
$('.selected_values').empty();
$(".usercheck:checked").each(function(index) {
var chain = "";
chain = $(this).html(".usercheck").val();
$('.selected_values').append(chain + ' ' + '<span id="removeVal" style="color:red;">X</span>');
});
});
});
function clearSelection(){
$('.selected_values').empty();
$('.usercheck').attr('checked','false');
}
Here is the link to the js fiddle which I tried to work.
I was able to display the content but by giving value to just one column which is not the right way to do I suppose.
https://jsfiddle.net/rahilAhmed/y4fzj66o/

Without re-writing your whole HTML here is how I made it work.
What I did was I added an ID to each span that gets created. That ID is later used to iterate over all checkboxes and find which one needs to be unchecked then un-check it.
$(document).ready(function() {
$('.usercheck').change(function() {
$('.selected_values').empty();
$(".usercheck:checked").each(function(index) {
var chain = "";
chain = $(this).html(".usercheck").val();
$('.selected_values').append(chain + ' ' + '<span id='+ chain + ' class="removeVal" style="color:red;">X</span>');
});
$(".removeVal").click(checkRemove);
});
});
function checkRemove(e) {
var removeId = e.target.id;
$(".usercheck").each(function(index,checkbox) {
if (checkbox.value == removeId) {
checkbox.checked = false;
}
});
e.target.parentNode.previousSibling.remove();
e.target.remove();
}
function clearSelection(){
$('.selected_values').empty();
$('.usercheck').prop('checked',false);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 style="text-align:center">Selector/Removal</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-3">
Selected Users
<div class="" >
<h4 class="selected_values"></h4>
</div>
</div>
<div class="col-xs-1"><button onclick="clearSelection();">Clear</button></div>
<div class="col-xs-8">
<table id="" class="table table-bordered table-responsive table-striped">
<tr class="" style="background-color: #237ec2; color: white;">
<td class="text-center" ><span >A</span></td>
<td class="text-center" ><span >B</span></td>
<td class="text-center" ><span >C</span></td>
<td class="text-center" ><span >D</span></td>
</tr>
<tr style="">
<td ><input type="checkbox" class="usercheck" value="A1[B1]"><span class="first_col" value="A1" >A1</span></td>
<td><h5><span class="second_col">B2</span></h5></td>
<td><h5>C1</h5></td>
<td><h5>D1</h5></td>
</tr>
<tr style="">
<td ><input type="checkbox" class="usercheck" value="A2[B2]"><span class="first_col" value="a2" >A2</span></td>
<td><h5><span class="second_col">B2</span></h5></td>
<td><h5>C2</h5></td>
<td><h5>D2</h5></td>
</tr>
<tr style="">
<td ><input type="checkbox" class="usercheck" value="A3[B3]">
<span class="first_col" value="a3" >A3</span></td>
<td><h5><span class="second_col">B3</span></h5></td>
<td><h5>C3</h5></td>
<td><h5>D3</h5></td>
</tr>
</table>
</div>
</div>
</div>

You can do this : JsFiddle
For unchecked Checkbox, you must do this :
.prop('checked', false);

Multi level add more button using jquery

I want to develop a multilevel add more button using jquery.
I did that functionality, but its not success. It has many bugs. Some Logical issues are there...
My actual requirement there is one "Add more" button. When we click this add more button one Div will open. In side that div there is one text box and another one "add more" button
For example, First i add the main option value is "Bajaj". Under this option i want to add some options like "Discover", "Platina",...
Then i click next add more button and add the next option value is "Yamaha" under this Option i need to add sub options like FZ,YBR, Ray...
<div id="tabularoptions">
<input id="btnAdd" type="button" value="Add Options" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
<?php
if ($form['tabularOptions'] != '') {
foreach ($form['tabularOptions'] as $opt) {
?>
<div style="border:1px solid #ccc;margin: 10px;">
<table>
<tr>
<td>Option Value :</td>
<td>
<input name = 'tabluarOptionValue_<?php echo $opt['id']; ?>' type="text" value = "<?php echo $opt['tabularOptionValue']; ?>" />
<input type="hidden" name="tabluarOptionId_<?php echo $opt['id']; ?>" value="<?php echo $opt['id']; ?>">
</td>
<td><input type="button" value="Remove" class="remove" /></td>
<?php
if ($form['tabularSubOptions'] != '') {
foreach ($form['tabularSubOptions'] as $optsub) {
if ($optsub['tabularOptionId'] == $opt['id']) {
?>
<tr>
<td>
<input type="text" name="tabularSuboptionValue_<?php echo $optsub['id']; ?>" value="<?php echo $optsub['tabularSuboptionValue']; ?>">
<input type="hidden" name="tabularSuboptionId_<?php echo $optsub['id']; ?>" value="<?php echo $optsub['id']; ?>">
<input type="button" class="subOptionRemove" value="X">
</td>
</tr>
<?php
}
}
}
?>
</tr>
<tr>
</tr>
<tr>
<table>
<tr class="subOptionDiv">
<td><input class = "btnAdd1" type="button" value = "Add Suboptions" /></td>
</tr>
</table>
</tr>
</table>
</div>
<?php
}
}
?>
</div>
<script>
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
$("body").on("click",".btnAdd1", function () {
$(this).closest("table").append('<tr>\n\
<td>\n\
<input type="text" name="tabularSuboptionValue_'+j+'[]">\n\
<input type="button" class="subOptionRemove" value="X">\n\
</td>\n\
</tr>');
});
$("body").on("click",".subOptionRemove", function () {
$(this).parent().remove();
});
});
var j = 1;
function GetDynamicTextBox(value) {
j=j+1;
$('#optionCount').val(j);
// alert(j);
return '<div id='+j+' style="border:1px solid #ccc;margin: 10px;"><table>\n\
<tr>\n\
<td>Option Value :</td>\n\
<td><input name = "tabluarOptionValue_'+j+'[]" type="text" value = "' + value + '" /></td>\n\
<td><input type="button" value="Remove" class="remove" /></td>\n\
</tr>\n\
<tr>\n\
</tr>\n\
<tr>\n\
<table>\n\
<tr class="subOptionDiv"><td><input class = "btnAdd1" type="button" value = "Add Suboptions" /></td></tr>\n\
<tr>\n\
<td>\n\
<input type="text" name="tabularSuboptionValue_'+j+'[]">\n\
<input type="button" class="subOptionRemove" value="X">\n\
</td>\n\
</tr>\n\
</table>\n\
</tr>\n\
</table></div>';
}
</script>

Please try this code may be usefull for you.
Put this jquery/javascript code where you js code is.
<script type="text/javascript">
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
Put this code in your php/html file where you want the text box.
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>

Try this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<table width="100%" cellpadding="0" cellspacing="0" id="type">
<tr >
<td align="left">Subcategory</td>
</tr>
<tr>
<td>Type : <input type="text" name="type" id="type" /></td>
</tr>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" >
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" id="subtype1">
<tr>
<td>
Subtype : <input type="text" name="type" id="type" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div>
<input type="button" name="addsub" value="Add Subtype" onclick="addmore('1')" />
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div>
<input type="button" name="add" value="Add Type" onclick="addmoretype()" />
</div>
Javascript
num = 2;
function addmore(id)
{
var tablename = "#subtype"+id;
$(tablename+' tr:last').after('<tr><td> Subtype: <input type="text" name="type" id="type" /> </td> </tr>');
}
function addmoretype()
{
$('#type tr:last').after('<tr> <td>Type : <input type="text" name="type" id="type" /></td></tr> <tr> <td><table width="100%" cellspacing="0" cellpadding="0" > <tr> <td> <table width="100%" cellspacing="0" cellpadding="0" id="subtype'+ num+'"> <tr> <td> Subtype : <input type="text" name="type" id="type" /></td></tr> </table></td> </tr><tr> <td> <div> <input type="button" name="addsub" value="Add Subtype" onclick="addmore('+ num+')" /> </div> </td> </tr></table> </td></tr>');
num++;
}
see working example

jQuery .submit() function not working inside of .ready() function

I have a Classic ASP application which uses a dynamic table to submit inventory information. All of my functions inside the jQuery script until I get down to the .submit() part. I am trying to check that an employee number is given as well as that there are no blank fields before the form is submitted. Any help?
Here's my form:
<form name="filter" id="theForm" method="GET" action="InventoryIssues.asp">
<table class="normsideBG" align="center" cellpadding="4" cellspacing="0" border="1" bordercolor="lightgrey" width="600px">
<tr class="norm">
<td class="bigger headerBG" align="center" colspan=6>
<b>Inventory Issues</b>
</td>
</tr>
<tr class="norm">
<td>
</td>
</tr>
<tr class="norm">
<td class="norm" align ="right">
<b>Enter Employee Number: </b><input type="text" id="employeeNum" name="employeeNum" value = "<%=employeeNum %>" />
<select id="hiddenBox" name="hiddenBox" style="display: none" >
</select>
<input type="hidden" name="action" value="set_filter">
</td>
</tr>
<tr>
<td class="norm">
To add more records click 'Add New Record'. Submit when all records are completed.
<br />
<br />
<input style="text-align: right" type="hidden" name="hasValues" value="false" />
<center>
<button type="button" id="addRec">Add New Record</button>
<button type="button" id="delRec">Remove Last Record</button><br /><br />
<input type="submit" id="sub" name="submit" class="norm" value="Submit"/>
</center>
</td>
</tr>
</table>
<table id= "tb1" class="norm sideBG" name="recordTable" align="center" cellpadding="4" cellspacing="0" border="1" bordercolor="lightgrey" width="600px">
<tr class="norm">
<td>
<b><u>PART #</u></b>
</td>
<td>
<b><u>LOCATION</u></b>
</td>
<td>
<b><u>QUANTITY</u></b>
</td>
<td>
<b><u>WHERE USED</u></b>
</td>
</tr>
<tbody class="theRow" id="theRow">
<tr>
<td class="norm">
<label id="partLabel" style="color : red;"></label>
<br />
<input type='text' name='txtbox0[]' id='txtbox0[]' onchange="javascript: changeLabel(this)" />
</td>
<td class="norm">
<select id="txtbox1[]" name="txtbox1[]" >
</select>
</td>
<td class="norm">
<input type='text' name='txtbox2[]' id='txtbox2[]' />
</td>
<td class="norm">
<input type='text' name='txtbox3[]' id='txtbox3[]' />
</td>
</tr>
</tbody>
</table>
</form>
Here is my jQuery
'<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function()
{
var ctr = 0;
$("#addRec").click(function ()
{
var clone = $("#tb1 > tbody.theRow:last").clone();
clone.find("input").val("");
clone.insertAfter("#tb1 > tbody.theRow:last");
$("#hasValues").val(true);
});
$("#delRec").click(function ()
{
$("#tb1:last tbody.theRow:last").remove();
});
alert("at least this works");
$("form#theForm").submit(function(event)
{
var blankEmployeeNum;
var blankFields = false;
var inp = $("#employeeNum");
if (inp.val().length == 0 || inp.val() == Null)
{
alert("blank empoyee num");
blankEmployeeNum = true;
}
else
{
alert("the employee num has a value");
blankEmployeeNum = false;
}
$("#tb1 tr").each(function()
{
$("td", this).each(function()
{
var value = $(this).find(":input").val()
if (value.val().length == 0 || value.val() == Null)
{
alert("there's a blank field");
blankFields = true;
}
});
});
if (blankEmployeeNum)
{
alert("Please go back and enter an employee number before submitting.");
event.preventDefault();
}
else if (blankFields)
{
alert("One or more of the fields submitted were blank. Please go back and try again.";
event.preventDefault();
}
});
});
'

There is a script error
Update
alert("One or more of the fields submitted were blank. Please go back and try again.";
to
alert("One or more of the fields submitted were blank. Please go back and try again.");
You are missing the closing bracket.
Please note there are some more script errors too. Please resolve then by checking in console.
I have found out few for you like changeLabel is not a function etc. You really need to work a lot on the script. There are many errors.

You need to call event.preventDefault() at first inside the submit function, otherwise the event bubbles up and the form is submitted.
$("form#theForm").submit(function(event) {
event.preventDefault();

how to change list box to editable box?

I made a listbox by table because I needed two column to show list.
and, I am trying to edit the text in the table when I hit the listbox.
I mean the selected list is changed to something like edtitable box when I click a list, so I can edit the text directly without putting a text on the other box that comes up.
Is there a way to do this??
here is the code for the listbox:
$(document).ready(function () {
$('div#selReporterList table tr:has(td)').click(function() {
$('.selected').removeClass('selected');
$('.selected').addClass('deselected');
$(this).addClass('selected');
});
});
the table is here:
<div id="selReporterList" class="srList">
<div>
<table id="list" cellspacing="0" border="1" style="border-collapse:collapse;" ndblclick="edit()">
<tr>
<td id="a" class="1" value="apple">apple</td>
<td id="b" class="2" value="good">good</td>
</tr>
<tr>
<td id="a" class="1" value="banana">banana</td>
<td id="b"class="2" value="very good">very good</td>
</tr>
</tr>
</table>
</div>
</div>

<div id="selReporterList" class="srList">
<div>
<table id="list" cellspacing="0" border="1" onclick="changeTableModeToEdit(true)" ondblclick="changeTableModeToEdit(false)" style="border-collapse:collapse;" ndblclick="edit()">
<tr>
<td id="a" class="1" value="apple"><span>apple</span></td>
<td id="b" class="2" value="good"><span>good</span></td>
</tr>
<tr>
<td id="a" class="1" value="banana"><span>banana</span></td>
<td id="b"class="2" value="very good"><span>very good</span></td>
</tr>
</tr>
</table>
</div>
<script type="text/javascript">
function changeTableModeToEdit(toEditMode){
var value;
if(toEditMode)
{
$('#list span').each(function(){
value = $(this).text();
$(this).after('<input type="text"/>');
$(this).next().val(value).focus();
$(this).remove();
});
}
else
{
$('#list input').each(function(){
value = $(this).val();
$(this).after('<span> </span>');
$(this).next().text(value);
$(this).remove();
});
}
}
</script>

Yes, you could put the text inside of an <input type=text editable="false" /> and then when it is clicked set the editable attribute to true.
P.S. when you have multiple lines of code, right it all out, highlight it and press commend+k,
the ` is for inline code.

How to handle background ajax calls in a web page

I have a situation here:
I have a user login form with a intermediate dialog popup(consists of a dropdown) to validate roles of user which is populated by an ajax call.
The issue is the when i click on submit for form the intermediate dialog popups and dropdown is not populated with roles, it populates after 5-7 secs in which the dropdown is empty.
Can we handle in ajax, using status or when ajax is complete then we can popup the dialog box with dropdown populated.
Below is my code:
Form
<form name = "loginForm" method="post" action="#">
<div class = "container">
<table>
<tr>
<td>
<h1 class = "heading">Enhanced Quality Control 2.0</h1><br>
</td>
</tr>
<tr>
<td>
<table class = "maintable">
<tr>
<td>
<table>
<tr>
<td>
<label for="login">Login ID </label>
</td>
<td>
<input id="login" type="text" onfocus="clearDefault(this.value);" onblur="setDefault();" value="Enter your Login ID" style="position:relative; margin-left: 80px; background-color:#19A053;border:none;width:100%;height:26px;color:#FFFFFF;font-size:20px;padding-left:10px;font-style:italic"/>
</td>
</tr>
<tr>
<td>
<br><label for="password" >Password </label>
</td>
<td>
<br>
<input id="password" type="password" onfocus="clearDefault(this.value);" onblur="setDefault();" value="Enter Password" style = "position:relative; margin-left: 80px; background-color:#19A053;border:none;width:100%;height:26px;color:#FFFFFF;font-size:20px;padding-left:10px;font-style:italic"/>
</td>
</tr>
<tr>
<td></td>
<td>
<br>
<input type = "checkbox" style= "background-color:#19A053" style="position:relative; margin-left: 80px; background-url:images/user.png"> Remember me next time</input>
</td>
</tr>
<tr>
<td></td>
<td>
<br>
<img class="submit" src = "images/button.PNG" name = "image" style="position:relative; margin-left: 80px; background-color:#19A053;border:none;" />
<input type="hidden" value="" id="role" />
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
Intermediate Dialog Code
<div id="dialog" title="Select User Role" style="display:none;">
<p>You have multiple user roles assigned. Please select any one of the roles and click on the 'Continue' button.</p>
<table>
<tr>
<td>Select user role</td>
<td>
<div class="dropdown" id="dropdown">
<select id="roles" name="Select user role" style="z-index: 10;"> //EMPTY DROPDOWN
</select>
</div>
</td>
</tr>
</table>
</div>
SCRIPT CODE
**
$(document).ready(function(){
// Dialog Link
$('.submit').click(function () {
makeGetRequest(); //Call for First Click and shoot ajax call
});
function makeGetRequest() { // AJAX CALL METHOD
var login = document.getElementById('login').value;
var password = document.getElementById('password').value;
http.open('get', 'ajax.jsp?login=' + login+ '&password=' + password);
http.onreadystatechange = processResponse; //CALLBACK FUNCTION
http.send(null);
}
//AJAX CALLBACK FUNCTION - Issue is the dialog opens up before the dropdown is populated i need to wait a bit
function processResponse() {
if(http.readyState == 4 && http.status == 200){
var response = http.responseText;
**
document.getElementById('roles').innerHTML = response;
$('#dialog').dialog('open'); //Dialog Opens before data is ready in my "roles" dropdown
}
}
Thanks in advance!!!!
Cheers...

consider using jQuery.get() function adding the script you want to execute on ajax return in the return function(data):
$.get('ajax/test.html', function(data) {
$('.result').html(data);
alert('Load was performed.');
});
Where data is your server response.