We Keep Coding

Jquery adding only one row not 4

Hi there can someone please help me with this code:
So this is the blade
<table class="optionsForm" style="width:100%">
<thead>
<tr >
<th><button type="button" class="add">Add</button></th>
#for($c = 1; $c<=4; $c++)
<th id="column{{ $c}}">
<input type="text" name="columns[{{ $c }}]"
class="form-control" placeholder="Column {{ $c }} ">
</th> #endfor
<th><button type="button" style="width: 100px; height: 25px" class="addColumn">Add Column</button></th>
</tr>
</thead>
<tbody> #for($r = 1; $r<=4; $r++)
<tr class="prototype">
</tr> #endfor
</tbody>
</table>
and this one is the js code, I need to be able to add only one row, here it is adding 4 rows, I need first to be shown 4 rows, but than when I click add I need to be added only one row how can I achieve this can someone please help me with this thing I am stuck, thank you so much for any efforts.
$(document).ready(function () {
var id = 0;
// Add button functionality
$("table.optionsForm button.add").click(function () {
id++;
var master = $(this).parents("table.optionsForm");
// Get a new row based on the prototype row
var prot = master.find(".prototype").clone();
prot.attr("class", "")
prot.find(".id").attr("value", id);
master.find("tbody").append(prot);
});
// Remove button functionality
$("table.optionsForm button.remove").on("click", function () {
$(this).parents("tr").remove();
});
$("table.optionsForm button.addColumn").click(function () {
var $this = $(this), $table = $this.closest('table')
$('<th><input type="text" name="options" class="form-control" placeholder="Column"></th>').insertBefore($table.find('tr').first().find('th:last'))
var idx = $(this).closest('td').index() + 1;
$('<td><input type="radio" name="col' + idx + '[]" value="" /</td>').insertBefore($table.find('tr:gt(0)').find('td:last'))
});
});

The add button code is creating a collection of four elements with class "prototype" and then cloning four elements:
var prot = master.find(".prototype").clone()
To add a single element, try selecting the first DOM element from the collection and converting it to a JQuery object before applying clone:
var prot = $(master.find(".prototype")[0]).clone()
As a minimal test/demonstration case (not using blade)
var master = $("#master");
var prot = $(master.find(".prototype")[0]).clone();
master.append(prot);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="master">
<span class="prototype">proto 1</span><br>
<span class="prototype">proto 2</span><br>
<span class="prototype">proto 3</span><br>
<span class="prototype">proto 4</span><br>
</div>

jQuery: Inconsistent behavior of find between div and tbody

I am using the find selector in jQuery by Id. It is behaving differently in case of a div vs tbody. This is a bigger problem - for the sake of clarity here is the reduced version of my original issue
HTML
<div id='iamdiv'>HELLO</div>
<table>
<tbody id='iamtbody'>
<tr><td>HELLO TOO</td></tr>
</tbody>
</table>
<input type='text' id='div'/>
<input type='text' id='tbody'/>
JS
$(document).ready(function() {
var allcontent = $($('body').html()); // I am deliberately doing this to input a HTML String.
var $divcontent = allcontent.find('#iamdiv');
$('#div').val($divcontent.html());
var $tbodycontent = allcontent.find('#iamtbody');
$('#tbody').val($tbodycontent.html());
});
Fiddle: https://jsfiddle.net/bragboy/Lt8nua10/1/
I want to display the raw html in the input text boxes, however only the tbody one is getting displayed and not the div. If I use a filter method instead of find - it works for div but not the tbody.
My objective is to have one consistent way of fetching for both tbody and div.

Two issues:
find looks for descendant elements, but #iamdiv is a top-level entry in your allcontents jQuery object.
You're duplicating the elements in the
var allcontent = $($('body').html());
line, which I'm fairly sure isn't what you want to do. (You've said that's on purpose, to simulate parsing HTML from elsewhere.)
You've said your goal is to use find in both use case (rather than using filter in one and find in the other). To do that, you need to have something else as the root of your allcontent.
You've also said that for some reason you can't change the
var allcontent = $($('body').html());
line, even just to
var allcontent = $("<body>").append($('body').html());
That's okay, you can still add a new root element by adding a line after it, like this:
allcontent = $("<body>").append(allcontent);
Live example:
$(document).ready(function() {
var allcontent = $($("body").html()); // You've said we can't change this
// The added line:
allcontent = $("<body>").append(allcontent);
var $divcontent = allcontent.find('#iamdiv');
$('#div').val($divcontent.html());
var $tbodycontent = allcontent.find('#iamtbody');
$('#tbody').val($tbodycontent.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='iamdiv'>HELLO</div>
<table>
<tbody id='iamtbody'>
<tr><td>HELLO TOO</td></tr>
</tbody>
</table>
<input type='text' id='div'/>
<input type='text' id='tbody'/>

Use var allcontent = $('body'); instead of var allcontent = $($('body').html());
$(document).ready(function() {
var allcontent = $('body');
var $divcontent = allcontent.find('#iamdiv');
$('#div').val($divcontent.html());
var $tbodycontent = allcontent.find('#iamtbody');
$('#tbody').val($tbodycontent.html());
});
input {
width: 100%; /* just to show the whole content */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='iamdiv' class='somthing1'>
HELLO
</div>
<table>
<tbody id='iamtbody' class='somthing2'>
<tr>
<td>HELLO TOO</td>
</tr>
</tbody>
</table>
<input type='text' id='div' />
<br/>
<input type='text' id='tbody' />
After update in question :
You can use .closest() to achieve this. Because the cose that you picked when using $($(body).html()) has the div as on its node.
$(document).ready(function() {
var allcontent = $($('body').html());
var $divcontent = allcontent.closest('#iamdiv');
$('#div').val($divcontent.html());
var $tbodycontent = allcontent.find('#iamtbody');
$('#tbody').val($tbodycontent.html());
});
input {
width: 100%; /* just to show the whole content */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='iamdiv' class='somthing1'>
HELLO
</div>
<table>
<tbody id='iamtbody' class='somthing2'>
<tr>
<td>HELLO TOO</td>
</tr>
</tbody>
</table>
<input type='text' id='div' />
<br/>
<input type='text' id='tbody' />

showing and hiding DIV using css

I have the below code in my ASP (CLassic) page (part of a page with dozens of checkboxes set from the db):
<tr height="30px">
<td class="summarytext">Show Gender Pay Gap Options</td>
<td class="formtext">
<input class="checkbox" type="checkbox" name="chkDisplayGPGOptions" <%if g_blnchkDisplayGPGOptions = True then Response.Write("checked")%>>
</td>
<td colspan="7"> </td>
<td>
<input type="button" class="help" align="left" id="Button3" onmousemove="javascript:DisplayHelp(150,-160, 10, 'HELP', 'Select if you want to exclude this pay type in netpay for attachment calculations.', this)" onmouseout="javascript:HideHelp()" WIDTH="16px" HEIGHT="16px">
</td>
<DIV id="divGPGOptiona" style="display:none">
<table>
<tr height="30px">
<td class="summarytext">Include Bonus in calculation for GPG reporting</td>
<td class="formtext">
<input class="checkbox" type="checkbox" name="chkIncludeBonusInGPG" <%if g_blnchkDisplayGPGOptions = True then Response.Write("checked")%>>
</td>
</tr>
<tr height="30px">
<td class="summarytext">Include Gross Pay in calculation for GPG reporting</td>
<td class="formtext">
<input class="checkbox" type="checkbox" name="chkIncludeGrossPayInGPG" <%if g_blnchkDisplayGPGOptions = True then Response.Write("checked")%>>
</td>
</tr>
</table>
</DIV>
</tr>
what I'd like to do is show and hide the DIV divGPGOptiona when the checkbox chkDisplayGPGOptions is checked...
Is there was some way of using just CSS for this, or will I need to do this with JavaScript and the DOM?

Create a class that represents "hide" state and toggle it when checkbox changes.
See how:
var checkbox = document.querySelector('input[name="check"]');
var div = document.querySelector('#container');
checkbox.addEventListener('change', function (e) {
if (div.classList.contains('is-hide')) {
div.classList.remove('is-hide');
} else {
div.classList.add('is-hide');
}
});
.is-hide {
display: none;
}
<input type="checkbox" name="check" />
<div id="container">Here goes the content.</div>

One possible solution is to toggle the display with JavaScript. You don't need jQuery for this. It can be done in native JavaScript.
var checkBox = document.getElementById("check-box");
var myDiv = document.getElementById("my-div");
myDiv.style.display = "none";
checkBox.addEventListener("click", function() {
if (myDiv.style.display == "none") {
myDiv.style.display = "block";
}
else {
myDiv.style.display = "none";
}
});
<div id="my-div">This is a div</div>
<p>The div above is hidden by default. Click the checkbox to toggle on and off</p>
<input id="check-box" type="checkbox" />

CSS Code:
.hidden{
display: none;
}
html Code:
<DIV id="divGPGOptiona" class="hidden" >
Jquery Code:
$(".checkbox").on('click',function(){
if($(".checkbox").prop("checked")){
$("#divGPGOptiona").removeClass("hidden");
}
else{
$("#divGPGOptiona").addClass("hidden");
}
});

Pure CSS using the siblings + selector.
So this can be done if you have the div as a sibling of the checkbox. In order for you to replicate, you would need to change your HTML structure. Which is advised, because you are placing a div inside a table row <tr>, without a table cell. Why?
.checkboxSibling {
display: none;
}
/*.checkbox:checked + .checkboxSibling {
display: block;
}*/
input[name="chkDisplayGPGOptions"]:checked + .checkboxSibling {
display: block;
}
<div>
Input 1 -
<input class="checkbox" name="chkDisplayGPGOptions" type="checkbox"/>
<div class="checkboxSibling">Checkbox Checked</div>
</div>
<div>
Input 2 -
<input class="checkbox" name="someOtherName" type="checkbox"/>
<div class="checkboxSibling">Checkbox Checked</div>
</div>

Using Javascript How to loop through a div containing checkboxes and get the value checked from each check box

I have a table with each row containing a cell that has 8 check boxes(Column4)
Here is an example
<table id="enc-assets" class="table">
<thead>
<tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4(CONTAINS OPTIONS)</th>
</thead>
<tbody>
<tr>
<td id="sc-isrc"></td>
<td id="sc-filename"></td>
<td id="sc-path" hidden></td>
<td id="sc-platforms">
<div id="sc-inline" style="display: inline-block;">
<div >
<div ng-repeat="p in products ">
<label id="enc"><input id="Platform" ng-checked="prod[p.name]" ng-model="prod[p.name]" ng-init="prod[p.name] = true" type="checkbox"/></label>
</div>
</div>
</div>
</td>
<td>
</td>
<td><br/><br/><button id="enqueuebtn" type="button" ng-click="Show(test)" class="btn-primary"></button></td>
</tr>
</tbody>
</table>
I am trying to loop through each row and assign values from each cell into an object .
I am having problems getting the value checked from the cell that contains the 8 check boxes. I can get values from the other cells just fine.
I have tried the following:
$("#enc-assets tbody tr").each(function() {
var message;
message = new Object();
message.isrc = $(this).find('#sc-isrc').text();
message.path = $(this).find('#sc-path').text();
$("#sc-platforms div div").each(function() {
var platform, selected;
selected = $(this).find('#Platform div label input').checked;
if (selected === true) {
platform = $(this).find('#enc').text();
This is the part that I am not sure if works:
selected = $(this).find('#Platform div label input').checked;
Do I have the correct nesting here to get the values from the check boxes?

Try this:
jsFiddle here
$("#enc-assets tbody tr").each(function() {
var message;
message = new Object();
message.isrc = $(this).find('#sc-isrc').text();
message.path = $(this).find('#sc-path').text();
$("#sc-platforms>div>div").each(function() {
alert( $(this).attr('id') );
var platform, selected;
selected = $(this).find('#Platform');
if(selected.is(':checked')) {
alert('Checked');
}
platform = $(this).find('#enc').text();
alert(platform);
}); //END each #sc-platforms>div>div
}); //END each #enc-assets tbody tr

Dynamic Form IE8 Error

I’m trying to create a dynamic form that adds elements in a certain table when a button is clicked. I do this by calling a javascript function that will, in this example, create a new text box that has a name and type of “item_3” with its remove link beside it. The webpage runs just fine in firefox and chrome possibly due to the fact that they doesn’t strictly use W3C like internet explorer. It will not run in IE8 and will give the error “Unknown Runtime Error”. I’m sure that problem has to do with DOM and how I am using my elements but I need a way to add an element dynamically in a specific table. Here is the head:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="Javascript" type="text/javascript">
//Add more fields dynamically.
function addField(area,type)
{
if(!document.getElementById) return; //Prevent older browsers from getting any further.
var field_area = document.getElementById(area); //Select table to insert element
//Example, i want a textbox with id and name as item_3
var type = "item_";
var count = "3";
//Add html to insertiontable table
field_area.innerHTML += "<tr><td colspan='2'><input type='text' name='"+(type+count)+"' id='"+(type+count)+"'/><a style='cursor:pointer;color:blue;' onclick='this.parentNode.parentNode.removeChild(this.parentNode);'> Remove Box</a></td</tr>";
}
</script>
</head>
The body section contains my form. There are two tables, table1 and insertiontable. Table one contains a textbox along with a button to inserting a the new "item_3" element into insertiontable.
<body>
<form name="newbookform1" method="post" action ="">
<!--Table one-->
<table id="table1" align="left" border="0" cellspacing="0" cellpadding="3">
<tr><td><strong>What:</strong></td><td><input type="text" name="item_1" id="item_1" /></td><td><input type="button" value="Add New Item Type" onclick="addField('insertiontable','item_');" /></td></tr>
</table>
<!--Table two-->
<table id="insertiontable" align="left" border="0" cellspacing="0" cellpadding="3">
<tr><td colspan="2"><input type="text" name="item_2" id="item_2" /><a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);"> Remove Box</a></td></tr>
</table>
</form>
</body>
</html>
Cleaning this up is a headache for me, how can this work in IE8 with valid HTML? Your help is greatly appreciated.

Here's a similar question: Internet Explorer Javascript/ Dom Object add rows problem
I agree with either using jQuery to do dom manipulation or use the dom methods provided by javascript.

This should work:
replace:
//Add html to insertiontable table
field_area.innerHTML += "<tr><td colspan='2'><input type='text' name='"+(type+count)+"' id='"+(type+count)+"'/><a style='cursor:pointer;color:blue;' onclick='this.parentNode.parentNode.removeChild(this.parentNode);'> Remove Box</a></td</tr>";
with:
var row = document.createElement("tr");
var cell = document.createElement("td");
cell.innerHTML = "<input type='text' name='"+(type+count)+"' id='"+(type+count)+"'/><a style='cursor:pointer;color:blue;' onclick='this.parentNode.parentNode.removeChild(this.parentNode);'> Remove Box</a>";
row.appendChild(cell);
field_area.appendChild(row);
Simply put - innerHTML for tables is messed up. You'd have to put your HTML string into a cell and then append the cell to a row and the row to the table.

IE is real funny about modifying tables with javascript. You have to use document.createElement. This should work for you.
//Add html to insertiontable table
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
var td = document.createElement('td');
td.setAttribute('colspan', '2');
var inp = document.createElement('input');
inp.setAttribute('type', 'text');
inp.setAttribute('name', 'item_' + count);
inp.setAttribute('id', 'item_' + count);
var a = document.createElement('a');
a.setAttribute('style', 'cursor:pointer;color:blue;');
a.setAttribute('onclick', 'this.parentNode.parentNode.removeChild(this.parentNode);');
a.innerText = " Remove Box";
td.appendChild(inp);
td.appendChild(a);
tr.appendChild(td);
tbody.appendChild(tr);
field_area.appendChild(tbody);