I have a repeating table with a hidden row and when clicking the a checkbox I have the row appearing, however when adding more than one table the same row always appears instead of the row that has just been cloned. I would appreciate any help with this.
My code looks like the following:
HTML:
<table class="repeatingTable">
<tr>
<td>
<label for="name">Name</label>
</td>
<td>
<input type="text" name="name" id="InputName" class="InputID_1" />
</td>
<td>
<label for="req">Required</label>
</td>
<td>
<input type="checkbox" name="req" id="CheckBox" class="ChexkBox_1" readonly="readonly" />
</td>
</tr>
<tr id="HiddenFields" class="HiddenFields_1">
<td>
<label for="Box">Box Number</label>
</td>
<td>
<input type="number" name="Box" id="InputBoxNo" class="InputBoxNo_1" readonly="readonly" />
</td>
<td>
<label for="id">ID Number</label>
</td>
<td>
<input type="number" name="id" id="inputNo" class="InputNo_1" />
</td>
</tr>
</table>
<div class="expensesBtns">
<input id="repeatingBtn" type="button" value="Add Another" />
</div>
Javascript:
document.getElementById("HiddenFields").style.visibility = "hidden";
$('.ChexkBox_1').click(function () {
if (!$(this).is(':checked')) {
document.getElementById("HiddenFields").style.visibility = "hidden";
}
else {
document.getElementById("HiddenFields").style.visibility = "visible";
}
})
$('#repeatingBtn').click(function (e) {
//$('.expensesSection').clone(false).find("*[id]").andSelf().each(function () {
// $(this).attr("id", $(this).attr("id") + "_cloned");
//})
e.preventDefault();
var lastRepeatingGroup = $('.repeatingTable').last();
var cloned = lastRepeatingGroup.clone(true);
cloned.insertAfter(lastRepeatingGroup);
cloned.find("input").val("");
//resetAttributeNames(cloned);
});
I have a js fiddle here: jsfiddle
Any help is greatly appreciated.
Check your UPDATED FIDDLE.
Worked after some changes in ChexkBox_1 click event, you have to use $(this) instead of document.getElementById("HiddenFields") to deal with current checkbox clicked :
$('.ChexkBox_1').click(function () {
if (!$(this).is(':checked')) {
$(this).parents('table').find(".HiddenFields_1").css('visibility',"hidden");
}
else {
$(this).parents('table').find(".HiddenFields_1").css('visibility',"visible");
}
});
NOTE : when you clone the row you have to change id because element IDs should be unique within the entire document.
Related
A new row is dynamically creating on clicking "add Row" button through function in jQuery.
But when I select radio input in new row then selected value of previous radio input is removing.
Please run and see the codes as below:
enter image description here
function add_row(table_row_count)
{
$("#add-row_"+table_row_count).hide();
$("#delete-row_"+table_row_count).hide();
var table_row_count = parseInt(table_row_count);
table_row_count += 1;
var markup =
'<tr id="tbl_row_'+table_row_count+'" >'+
'<td><label>'+table_row_count+'</label></td>'+
'<td>'+
'<label>Value in Range? :</label>'+
'<input type="radio" name="option" id="option_1_row_'+table_row_count+'" value="1" > YES'+
'<input type="radio" name="option" id="option_2_row_'+table_row_count+'" value="2" > NO'+
'</td>'+
'<td id="capacity_from_row_'+table_row_count+'" >'+
'<label>Range From :</label><br>'+
'<input type="text" name="capacity_from[]" id="capacity_from_'+table_row_count+'" />'+
'</td>'+
'<td>'+
'<label id="lbl_capacity_range_'+table_row_count+'" >Range Upto :</label><br>'+
'<input type="text" name="capacity_upto[]" id="capacity_upto_'+table_row_count+'" />'+
'</td>'+
'<td class="align-middle"></i> Add Row</td>'+
'<td class="align-middle"></i> Delete Row</td>'+
'</tr>';
var table = $("#tbl_details tbody");
table.append(markup);
}
function delete_row(table_row_count)
{
var r = confirm("Are you sure to delete row");
if(r == false){
return;
}
var table_row_count = parseInt(table_row_count);
var previous_row = table_row_count - 1;
$("#add-row_"+previous_row).show();
if(previous_row != 1){
$("#delete-row_"+previous_row).show();
}
$("#tbl_row_"+table_row_count).remove();
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="add.js"></script>
</head>
<body>
<h3>Enter Details</h3>
<table class="table table-striped" id="tbl_details">
<tbody>
<tr id="row_1">
<td>1.</td>
<td>
<label>Value in Range? :</label>
<input type="radio" name="option" id="option_1_row_1" value="1" checked="checked" > YES
<input type="radio" name="option" id="option_2_row_1" value="2" > NO
</td>
<td id="capacity_from_row_1" >
<label>Range From :</label><br>
<input type="text" name="capacity_from[]" id="capacity_from_1" />
</td>
<td>
<label id="lbl_capacity_range_1" >Range Upto :</label><br>
<input type="text" name="capacity_upto[]" id="capacity_upto_1" />
</td>
<td class="align-middle"></i> Add Row</td>
<td class="align-middle"></td>
</tr>
</tbody>
</table>
</body>
</html>
How to solve the issue. kindly help me.
Thanks in advance.
Different radio button groups are created when the name attribute of the radio buttons is different. Also, in the solution below, I made it easier to express dynamic content by using template literals.
Note the following statement in the dynamic element written into the markup variable in the add_row() method:
<input type="radio" name="option${counter}" id="option_1_row_${table_row_count}" value="1"> YES
<input type="radio" name="option${counter}" id="option_2_row_${table_row_count}" value="2"> NO
/* This variable will be used to create new radio button groups. */
let counter = 0;
function add_row(table_row_count) {
$("#add-row_"+table_row_count).hide();
$("#delete-row_"+table_row_count).hide();
var table_row_count = parseInt(table_row_count);
table_row_count += 1;
/* With each iteration, the content of the counter variable is incremented. */
++counter;
var markup =
`<tr id="tbl_row_${table_row_count}">
<td>
<label>${table_row_count}</label>
</td>
<td>
<label>Value in Range? :</label>
<!-- Note the name="option${counter}" statement so that the radio buttons have different groups. -->
<input type="radio" name="option${counter}" id="option_1_row_${table_row_count}" value="1"> YES
<input type="radio" name="option${counter}" id="option_2_row_${table_row_count}" value="2"> NO
</td>
<td id="capacity_from_row_${table_row_count}">
<label>Range From :</label><br>
<input type="text" name="capacity_from[]" id="capacity_from_${table_row_count}"/>
</td>
<td>
<label id="lbl_capacity_range_${table_row_count}">Range Upto :</label><br>
<input type="text" name="capacity_upto[]" id="capacity_upto_${table_row_count}"/>
</td>
<td class="align-middle">
<a href="javascript:void(0)" class="text-success add-row" id="add-row_${table_row_count}" onClick="add_row('${table_row_count}');" >
<i class="fa fa-plus fa-lg text-success" aria-hidden="true"></i> Add Row
</a>
</td>
<td class="align-middle">
<a href="javascript:void(0)" class="text-danger delete-row" id="delete-row_${table_row_count}" onClick="delete_row('${table_row_count}');" >
<i class="fa fa-trash fa-lg text-danger" aria-hidden="true"></i> Delete Row
</a>
</td>
</tr>`
var table = $("#tbl_details tbody");
table.append(markup);
}
function delete_row(table_row_count) {
var r = confirm("Are you sure to delete row");
if(r == false){
return;
}
var table_row_count = parseInt(table_row_count);
var previous_row = table_row_count - 1;
$("#add-row_"+previous_row).show();
if(previous_row != 1){
$("#delete-row_"+previous_row).show();
}
$("#tbl_row_"+table_row_count).remove();
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="add.js"></script>
</head>
<body>
<h3>Enter Details</h3>
<table class="table table-striped" id="tbl_details">
<tbody>
<tr id="row_1">
<td>1.</td>
<td>
<label>Value in Range? :</label>
<input type="radio" name="option" id="option_1_row_1" value="1" checked="checked" > YES
<input type="radio" name="option" id="option_2_row_1" value="2" > NO
</td>
<td id="capacity_from_row_1" >
<label>Range From :</label><br>
<input type="text" name="capacity_from[]" id="capacity_from_1" />
</td>
<td>
<label id="lbl_capacity_range_1" >Range Upto :</label><br>
<input type="text" name="capacity_upto[]" id="capacity_upto_1" />
</td>
<td class="align-middle"></i> Add Row</td>
<td class="align-middle"></td>
</tr>
</tbody>
</table>
</body>
</html>
This is happening because you are using the same name for radio button. And it is default behavior of radio that if you are using the same name for radio button then only one can be selected at time.
For Example
1.) If you have two radios with same name
Only one value can be selected at a time.
2.) Now after adding another row your code will look like
<input name="option" type="radio" value="true"/>
<input name="option" type="radio" value="false"/
<input name="option" type="radio" value="true"/>
<input name="option" type="radio" value="false"/>
name is same for all radio buttons so only one will be selected at a time.
Fix:
In order to fix this issue while adding new row append row number in front of name. That will fix the issue like you did for id attribute.
'<td>'+
'<label>Value in Range? :</label>'+
'<input type="radio" name="option_'+table_row_count+'" id="option_1_row_'+table_row_count+'" value="1" > YES'+
'<input type="radio" name="option_'+table_row_count+'" id="option_2_row_'+table_row_count+'" value="2" > NO'+
'</td>'+
Fixing this will fix the issue.
*** Change dynamic radio input name. here, your code create all dynamic radio input with the same name. ***
I have results shows up inside a table, I designed it to show as grid by separating them by td for each.
I used a JS code to filter the results by a text written in textbox, but the only results shows is the labels!
I want each td shows as a result, complete with the contents (Image + Input + label).
Here's the JS code & example of a table same what I have:
$(document).ready(function() {
$("#filter").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#table *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<table>
<input type="text" id="filter">
<div name="table">
<td>
<label>Product1</label>
<img src='/img/a.jpg'>
<input type="text" value="55">
</td>
<td>
<label>Product2</label>
<img src='/img/b.jpg'>
<input type="text" value="70">
</td>
<td>
<label>Product3</label>
<img src='/img/c.jpg'>
<input type="text" value="20">
</td>
</div>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Use closest this link to get parent td from your search and then toggle visibility.
below is logic to your solution.
$(this).closest("td").toggle($(this).text().toLowerCase().indexOf(value) > -1)
$(document).ready(function() {
$("#filter").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("table label").filter(function() {
$(this).closest("td").toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<input type="text" id="filter">
<div name="table">
<td>
<label>Product1</label>
<img src='/img/a.jpg'>
<input type="text" value="55">
</td>
<td>
<label>Product2</label>
<img src='/img/b.jpg'>
<input type="text" value="70">
</td>
<td>
<label>Product3</label>
<img src='/img/c.jpg'>
<input type="text" value="20">
</td>
</div>
</table>
I am trying to send records of my table as form using javascript. I have tried using method below.
I know my foreach function is not capturing the tag. How do I solve it so i can send to php and receive as POST['SHOWTITLE']
<tbody>
<tr id="0">
<td class="d-none">
<input type="text" class="form-control transparent-input" name="1" value="1">
</td>
<td>
<input type="text" class="form-control transparent-input" name="SHOWTITLE" value="The Accidental Astronauts" disabled="">
</td>
</tr>
<tr>
<td>
<button onclick="submitRowAsForm(0)" id="btnRoom" class="btn btn-outline-success">Room</button>
</td>
</tr>
</tbody>
function submitRowAsForm(id) {
form=document.createElement('form');
form.method='POST';
form.action='orderTicket.php';
$("#"+id+" td").children().each(function() {
$(this).clone().appendTo(form);
});
document.body.appendChild(form);
form.submit();
}
You could iterate all input tags like this:
function submitRowAsForm(id) {
form=document.createElement('form');
form.method='POST';
form.action='orderTicket.php';
$("tbody input[type=text]").each(function() {
$(this).clone().appendTo(form);
});
document.body.appendChild(form);
form.submit();
}
Please try this i.e. remove disabled="" to readonly. If an element is disabled, its value is not sent to the server. So, the correct code is as below:
<tbody>
<tr id="0">
<td class="d-none">
<input type="text" class="form-control transparent-input" name="1" value="1">
</td>
<td>
<input type="text" class="form-control transparent-input" name="SHOWTITLE" value="The Accidental Astronauts" readonly>
</td>
</tr>
<td>
<button onclick="submitRowAsForm(0)" id="btnRoom" class="btn btn-outline-success">Room</button>
</td>
</tbody>
function submitRowAsForm(id) {
form=document.createElement('form');
form.method='POST';
form.action='orderTicket.php';
$("#"+id+" td").children().each(function() {
$(this).clone().appendTo(form);
});
document.body.appendChild(form);
form.submit();
}
function submitRowAsForm(id) {
form=document.createElement('form');
form.method='POST';
form.action='orderTicket.php';
$("#"+id).children().each(function() {
$(this).children().each(function(){
$(this).clone().appendTo(form);
});
});
document.body.appendChild(form);
form.submit();
}
This html is not require any javascript to submit the form and yes you need to write CSS to make those inner DIV inline that can be easily achieve using CSS flex and please keep in mind this is only for one row, you have to iterator the whole html to create another row.
<div>
<form action="orderTicket.php" method="POST">
<div>
<input type="text" class="form-control transparent-input" name="1" value="1">
</div>
<div>
<input type="text" class="form-control transparent-input" name="SHOWTITLE" value="The Accidental Astronauts" readonly>
</div>
<div>
<button type="submit" class="btn btn-outline-success">Room</button>
</div>
</form>
</div>
I have a form with multiple checkboxes and a button, by default the button will be disable but after checking at least 2 or more than 2 checkboxes, the button should become active. How can i do this in javascript. code is
<form id="world" name="world">
<table>
<tr>
<td>
<input type='checkbox' name='seatdata[]' value='0|12' id="A11" />
<label for="A11">A11</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|11' id="A10" />
<label for="A10">A10</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|10' id="A9" />
<label for="A9">A9</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|9' id="A8" />
<label for="A8">A8</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|6' id="A7" />
<label for="A7">A7</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|5' id="A6" />
<label for="A6">A6</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|4' id="A5" />
<label for="A5">A5</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|3' id="A4" />
<label for="A4">A4</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|2' id="A3" />
<label for="A3">A3</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|1' id="A2" />
<label for="A2">A2</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' value='0|0' id="A1" unchecked />
<label for="A1">A1</label>
</td>
</tr>
</table>
<button type="submit" name="next" />
</form>
Try below JQuery snippet;
<script type="text/javascript">
$(document).ready(function () {
$(":checkbox").click(function () {
var n = $("input:checked").length;
if (n < 2) {
$("button").attr("disabled", "disabled");
}
else {
$("button").removeAttr("disabled");
}
});
});
</script>
You can do it in this way.
window.onload = function() {
var arrCheckbox = document.getElementsByName('seatdata[]');;
arrCheckbox = Array.prototype.slice.call(arrCheckbox);
arrCheckbox.forEach(function(oneCheckbox, key) {
oneCheckbox.onchange = function() {
var intCheckedLength = document.querySelectorAll('input[name="seatdata[]"]:checked').length;;
if (intCheckedLength >= 2) {
document.getElementById("next").removeAttribute('disabled');
} else {
document.getElementById("next").setAttribute('disabled', true);
}
}
})
}
I have given id next to submit button
<form id="world" name="world">
<table>
<tr>
<td>
<input type='checkbox' name='seatdata[]' onclick = "checkUncheck(this)" value='0|12' id="A11" />
<label for="A11">A11</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' onclick = "checkUncheck(this)" value='0|11' id="A10" />
<label for="A10">A10</label>
</td>
<td>
<input type='checkbox' name='seatdata[]' onclick = "checkUncheck(this)" value='0|10' id="A9" />
<label for="A9">A9</label>
</td>
</tr>
</table>
<button id = "butId" type="submit" name="next">
</form>
<script>
$(document).ready(function(){
$('#butId').attr("disabled","disabled");
}
function checkUncheck(obj){
var count = 0;
if(obj.value != 1){
$('#'+obj.id).val(1);
count+=1;
}else{
$('#'+obj.id).val(0);
}
var allCheck = document.getElementsByName('seatdata[]');
for(var i=0;i<allCheck.length;i++){
if(allCheck[i].value == 1){
count+=1;
}
if(count >= 2){
$('#butId').removeAttr("disabled");
}else{
$('#butId').attr("disabled","disabled");
}
}
}
</script>
<script>
var count;
function checkseat()
{
count = $('input[type="checkbox"][name="seatdata[]"]:checked').length;
alert(count);
if(count > 2)
{
$("#next").removeAttr("disabled");
}
else
{
$("#next").attr("disabled", true);
}
}
Add id="next" disabled to submit and add onChange="checkseat()" to each checkbox named as seatdata[]
First, you want to change your button so it starts disabled and add an id:
<button type="submit" name="next" disabled id="enable-on-two" >Stuff</button>
Next, write a function to count the number of selected checkboxes:
function numberOfCheckboxesSelected() {
return document.querySelectorAll('input[type=checkbox][name="seatdata[]"]:checked').length;
}
Then, write your event handler to actually change the state of the button:
function onChange() {
document.getElementById('enable-on-two').disabled = numberOfCheckboxesSelected() < 2;
}
Finally, bind that event handler to your whole form, since the individual change events from the checkboxes will bubble up:
document.getElementById('world').addEventListener('change', onChange, false);
Here's a fiddle demonstration: https://jsfiddle.net/wphgs09r/
var checkboxes = $('[type="checkbox"]')
checkboxes.change(() => {
$("button").prop( "disabled", checkboxes.filter(":checked" ).length >= 2 ? false : true )
})
I have a row in a table something like this
<table>
<tr>
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="button" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>
I am trying to access the value of column number 3 that is email when i click on the Save button.
My script is something like this
$(document).on('click', '#guardarBtn', function (event) {
alert('yo');
var tr = $(this).parents('tr');
tr.each('td', function () {
alert($(this).html()) ;
});
// $(".validate", this).css("border", "1px solid #ddd");
});
Js Fiddle for the question is HERE
Thanks in Advance
You can select the td by index using :eq():
$(document).on('click', '#guardarBtn', function (event) {
var $tr = $(this).closest('tr');
var email = $tr.find('td:eq(3) input').val();
alert(email);
});
Example fiddle
You can use eq() and .find() as shown below :-
$(document).on('click', '#guardarBtn', function (event) {
var tr = $(this).parents('tr:first');
alert(tr.find('td:eq(3) input:text').val());
});
You can also go directly to named inputs with jQuery via attribute searches. For instance
var email = $('input[name="email"]').val();