We Keep Coding

How do I check 1 checkbox or radial button as N/A and make all the items in the same table also get checked N/A automatically?

I have a simple table with 4 columns.
A row label and 1 column for PASS, FAIL AND N/A.
I have it so each row only allows 1 selection which seems to be working fine.
My header row only has N/A. I want it so if I check N/A in my header row all other rows below in the same table will also be marked N/A automatically.
I'm a novice to HTML and scripts FYI :(
Any help you can provide would be greatly appreciated!
This is what I tried.
<table>
<tr>
<TD><label>HEADING:</label> </td>
<TD><label></label></td>
<TD> </td>
<TD> </td>
<TD><label></label></td>
<TD> </td>
<TD><label>N/A</label></td>
<TD><input type="checkbox" name="HEADING1"id="is_HEADING1"/></td>
</tr>
<tr>
<TD><label>Q1:</label> </td>
<TD><label>PASS</label></td>
<TD><input type="radio" name="Q1" id="is_PASS" /></td>
<TD> </td>
<TD><label>FAIL</label></td>
<TD><input type="radio" name="Q1" id="is_FAIL" /></td>
<TD><label>N/A</label></td>
<TD><input type="radio" name="Q1" id="is_N/A" /></td>
</tr>
<tr>
<TD><label>Q2:</label> </td>
<TD><label>PASS</label></td>
<TD><input type="radio" name="Q2" id="is_PASS" /></td>
<TD> </td>
<TD><label>FAIL</label></td>
<TD><input type="radio" name="Q2" id="is_FAIL" /></td>
<TD><label>N/A</label></td>
<TD><input type="radio" name="Q2" id="is_N/A" /></td>
</tr>
</table>
<script>
function valueChanged() {
if (document.getElementByid("is_PASS").checked == true) {
document.getElementById("is_FAIL").value = 1;
document.getElementById("is_N/A").value = 0;
} else {
document.getElementById("is_PASS").value = 0;
document.getElementById("is_FAIL").value = 1;
document.getElementById("is_N/A").value = 1;
}
console.log(document.getElementById("is_PASS").value);
console.log(document.getElementById("is_FAIL").value)
console.log(document.getElementById("is_N/A").value)
}
<script>
function valueChanged() {
if (document.getElementByNameId("is_PASS").checked == true) {
document.getElementById("is_FAIL").value = 1;
document.getElementById("is_N/A").value = 0;
} else {
document.getElementById("is_PASS").value = 0;
document.getElementById("is_FAIL").value = 1;
document.getElementById("is_N/A").value = 1;
}
console.log(document.getElementById("is_PASS").value);
console.log(document.getElementById("is_FAIL").value)
console.log(document.getElementById("is_N/A").value)
}
</script>
I believe I need an if then else scenario that will state
if (document.getElementByid("is_HEADING1").checked == true) {
NAME "Q1" ID"N/A".VALUE = 0
NAME "Q2" ID"N/A".VALUE = 0
: } else {
:}
:<script>
I just don't know the correct syntax to reference an element Name and ID

when checkbox is checked not able to fetch data that are against that checkbox

I have data that is displayed in the form of a table and each row has a checkbox.
I am trying to fetch the data of each row when the checkbox is clicked against that row.
<tr>
<td><input type="text" name="child_name"></td>
<td><input type="text" name="child_age"></td>
<td><input type="checkbox" ></td>
</tr>
<tr>
<td><input type="text" name="child_name"></td>
<td><input type="text" name="child_age"></td>
<td><input type="checkbox" ></td>
</tr>
These will get generated dynamically, so the naming needs to same for the input box, however when i am fetching the value typed by the user,it fetches the value of only first row, and the values is getting repeated multiple times
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).prop("checked") == true){
$tr = $(this).closest('tr');
var arr = [];
var data = $tr.children("td").map(function(){
var one = $("[name='child_name']").val();
var two = $("[name='child_age']").val();
arr.push(one)
arr.push(two)
return arr;
}).get();
console.log(data);
$('#post-result').append(data);
}
else if($(this).prop("checked") == false){
console.log("Checkbox is unchecked.");
}
});
});
Can anyone please tell how to resolve the issue

The name attribute in this case could complicate things a little bit. What I would do is use data-attributes to have specific identifiers for each row. Something like this:
UPDATED
I changed the behavior to work with dynamically added rows.
Using $(document).on("click"... you can affect future elements of the same type while $("[type='checkbox']").click() works only for currently existing elements.
I also took some liberty in expanding the example.
var children = [];
$(document).on("click", ".child-selector", function() {
var id = $(this).data("id");
if($(this).is(":checked")) {
var info = [];
info.push($(".child-name[data-id='"+ id +"']").val());
info.push($(".child-age[data-id='"+ id +"']").val());
console.log(info);
// An example of using objects to give some structure to the data
// and then store it to an array with all the checked rows
var child = {};
child.id = id;
child.name = $(".child-name[data-id='"+ id +"']").val();
child.age = $(".child-age[data-id='"+ id +"']").val();
children.push(child);
console.log(children);
} else {
console.log("Checkbox is unchecked.");
// An example of removing the specific children from the array
children.forEach(function(child, index) {
if(child.id == id) {
children.splice(index, 1);
}
});
console.log(children);
}
});
var clickCounter = 0;
var dataCounter = 13;
$("#add-child").click(function() {
var html = '<tr>'+
'<td><input type="text" class="child-name" data-id="'+ dataCounter +'" value="Child '+ clickCounter +'"></td>'+
'<td><input type="text" class="child-age" data-id="'+ dataCounter +'" value="'+ clickCounter +'"></td>'+
'<td><input class="child-selector" type="checkbox" data-id="'+ dataCounter +'"></td>'+
'</tr>';
$("table").append(html);
clickCounter++;
dataCounter++;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" class="child-name" data-id="9" value="John Connor"></td>
<td><input type="text" class="child-age" data-id="9" value="12"></td>
<td><input class="child-selector" type="checkbox" data-id="9"></td>
</tr>
<tr>
<td><input type="text" class="child-name" data-id="10" value="Jane Connor"></td>
<td><input type="text" class="child-age" data-id="10" value="12"></td>
<td><input class="child-selector" type="checkbox" data-id="10"></td>
</tr>
<tr>
<td><input type="text" class="child-name" data-id="11" value="Tom Connor"></td>
<td><input type="text" class="child-age" data-id="11" value="13"></td>
<td><input class="child-selector" type="checkbox" data-id="11"></td>
</tr>
<tr>
<td><input type="text" class="child-name" data-id="12" value="T800"></td>
<td><input type="text" class="child-age" data-id="12" value="1"></td>
<td><input class="child-selector" type="checkbox" data-id="12"></td>
</tr>
</table>
<button type="button" id="add-child">Add Child</button>
Now, if you need to send the data via post you should review your usage of name because as it currently is it would only send one value.

You can use the context parameter of $(selector [, context]) to only search inside the current <tr>:
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
if ($(this).prop("checked") == true) {
$tr = $(this).closest('tr');
var arr = [];
var one = $("[name='child_name']", $tr).val();
var two = $("[name='child_age']", $tr).val();
arr.push(one)
arr.push(two);
console.log(arr);
$('#post-result').append(arr);
} else if ($(this).prop("checked") == false) {
console.log("Checkbox is unchecked.");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" name="child_name" value="A Name"></td>
<td><input type="text" name="child_age" value="A Age"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="text" name="child_name" value="B Name"></td>
<td><input type="text" name="child_age" value="B Age"></td>
<td><input type="checkbox"></td>
</tr>
</table>
<pre id="post-result"></pre>

How I can put the required input fields in my Js code

How I can put the required fields in my Js code
I set required = true in xml view but it does blocker all the form
how to add required for the js code jQuery
this my code jQuery :
// table course
jQuery(document).ready(function() {
var id = 0;
var cr = 0;
jQuery("#addcourserow").click(function() {
id++;
var row = jQuery('.courserow tr').clone(true);
var c = 1;
row.find("input").each(function(){
if (c === 1) {
$(this).attr('name','course_name_'+id);
}
else if (c === 2) {
$(this).attr('name','course_duration_'+id);
}
else if (c === 3) {
$(this).attr('name','course_date_'+id);
}
c++;
});
row.appendTo('#CourseTable');
return false;
});
$('.remove').on("click", function() {
$(this).parents("tr").remove();
});
});
and this my XML
<!-- Course -->
<table id="CourseTable">
<thead>
<th>name</th>
<th>duration</th>
<th>date</th>
</thead>
<tr id="tr_course">
<td><input type="text" name="course_name_1" id="course_name"/></td>
<td><input type="text" name="course_duration_1" id="course_duration"/></td>
<td><input type="date" name="course_date_1" id="course_date" /></td>
<td><button class="remove">Remove</button></td>
</tr>
</table>
<input type="button" id="addcourserow" value="add row" />
<table class="courserow" style="display:none">
<tr>
<td><input type="text" id="course_name" /></td>
<td><input type="text" id="course_duration"/></td>
<td><input type="date" id="course_date"/></td>
<td><button class="remove">Remove</button></td>
</tr>
</table>
</div>
I added here in codepen

Please consider the following code.
$(function() {
var id = 0;
var cr = 0;
var names = [
"course_name",
"course_duration",
"course_date"
];
$("#addcourserow").click(function() {
var row = $('#course-row-template tr').clone(true);
id++;
var c = 0;
row.find("input").each(function() {
var inpId = $(this).attr("id") + "_" + id;
$(this).attr({
id: inpId,
name: names[c++] + "_" + id
}).prop("required", true);
console.log($(this));
});
row.appendTo('#CourseTable');
return false;
});
$('.remove').on("click", function() {
$(this).parents("tr").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<table id="CourseTable">
<thead>
<th>name</th>
<th>duration</th>
<th>date</th>
</thead>
<tr id="tr_course">
<td><input type="text" id="course_name_0" /></td>
<td><input type="text" id="course_duration_0" /></td>
<td><input type="date" id="course_date_0" /></td>
<td><button class="remove">Remove</button></td>
</tr>
</table>
<input type="button" id="addcourserow" value="Add New Row" />
<table id="course-row-template" style="display:none">
<tr>
<td><input type="text" id="course_name" /></td>
<td><input type="text" id="course_duration" /></td>
<td><input type="date" id="course_date" /></td>
<td><button class="remove">Remove</button></td>
</tr>
</table>
This will ensure that each <input> has a unique ID and name. It also adds the required property to each of them.
Hope that helps.

i find answer
jQuery(document).ready(function() {
var id = 0;
jQuery("#addcourserow").click(function() {
id++;
var row = jQuery('.courserow tr').clone(true);
var c = 1;
row.find("input").each(function(){
if (c === 1) {
$(this).attr('name','course_name_'+id).prop("required", true);
}
else if (c === 2) {
$(this).attr('name','course_duration_'+id).prop("required", true);
}
else if (c === 3) {
$(this).attr('name','course_date_'+id).prop("required", true);
}
c++;
});
row.appendTo('#CourseTable');
return false;
});
$('.remove').on("click", function() {
$(this).parents("tr").remove();
});
});
and i add required in my Xml
<table id="CourseTable">
<thead>
<th>name</th>
<th>duration</th>
<th>date</th>
</thead>
<tr id="tr_course">
<td><input type="text" name="course_name_1" id="course_name" required="required"/></td>
<td><input type="text" name="course_duration_1" id="course_duration" required="required"/></td>
<td><input type="date" name="course_date_1" id="course_date" required="required"/></td>
<td><button class="remove">Remove</button></td>
</tr>
</table>

How to get value of checkbox in table?

How can I get value of checkbox in table? I want use it for in this case in order get parameter. Now, please see html table:
<table id="div_func" class="table table-bordered" style="width: 100%">
<thead>
<tr>
<th>
<input type="checkbox" id="chk_all" /></th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="D01" /></td>
<td>Banana </td>
</tr>
<tr>
<td> <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="D02" /></td>
<td>Orange </td>
</tr>
<tr>
<td> <input type="checkbox" class="checkbox1" id="chk" name="check[]" value="D03" /></td>
<td>Apple </td>
</tr>
</tbody>
</table>
And this is my script , I use for get value in checkbox , then put parameter
function add_funcgroup() {
var func_group = [];
var chk_allow = "";
var table = document.getElementById("div_func");
for (var i = 0; i < table.rows.length; i++) {
if ($('#chk')[i].is(':checked')) {
chk_allow = "True";
}
else {
chk_allow = "False";
}
var group_func = {
GROUP_MOD_ID: id_temp,
FUNCTION_MOD_ID: $('#chk')[i].val(),
ALLOW: chk_allow
};
func_group[i] = group_func;
}
var func_group_temp = {
FUNC_MOD: func_group
};
var DTO = {
'func_group_temp': func_group_temp
};
$.ajax(
{
And it's not working.

What you have done is right, but you are not outputting it to the table!
var table = $("#div_func");
var value_check = "";
for (var i = 1; i < table.rows.length; i++) {
if ($('#chk')[i].is(':checked')) {
value_check += i + ": " + $('#chk')[i].val();
}
}
alert(value_check);
And you aren't appending it, instead saving!

Try to this
$('#div_func tbody tr input:checkbox').each(function() {
if (this.checked) {
//Do something
}
});.

Why the text contained in textarea is not coming in the $_POST array in PHP?

I've following HTML form:
<form name="question_issue_form" id="question_issue_form" class="login_box" method="post" action="{$site_url}question_issue.php">
<input type="hidden" name="form_submitted" id="form_submitted" value="yes"/>
<input type="hidden" name="post_url" id="post_url" value="question_issue.php"/>
<input type="hidden" name="op" id="op" value="question_issue"/>
<input type="hidden" name="question_id" id="question_id" value="{$question_id}"/>
<table class="trnsction_details" width="100%" cellpadding="5">
<tbody>
<tr>
<td></td>
<td>
<input type="checkbox" name = "que_issue[]" value = "Question is wrong" id ="chkQueWrong">Question is wrong</input>
</td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name = "que_issue[]" value = "Answers are wrong" id ="chkAnsWrong">Answers are wrong</input></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name = "que_issue[]" value = "Question direction is incorrect" id ="chkDirIncorrect">Question direction is incorrecct</input></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name = "que_issue[]" value = "Other" id ="chkOther">Other</input></td>
</tr>
<tr>
<td></td>
<td class="set_message" style="display:none;"><textarea name="que_issue_comment" id = "que_issue_comment" rows="4" cols="25" maxlength="100"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="Submit" id="report_question_issue" class="c-btn submit_form"/></td>
</tr>
</tbody>
</table>
</form>
I'm submitting the form using AJAX. When I print the $_POST[] array I'm able to get all the values entered by user, values from hidden fields, etc. except the text from the textarea having name que_issue_comment. Can anyone guide me why such thing is happening? For your reference I'm putting below the AJAX code I've written.
<script language="javascript" type="text/javascript">
$(document).on("click","input[id='chkOther']", function (e) {
$('.set_message').toggle(this.checked);
});
$(document).on('click', "input[id='report_question_issue']", function(e) {
e.preventDefault();
//for confirmation that status change
var ans = confirm("Are you sure to report the question issue?");
if (!ans) {
return false;
}
var post_url = $('#post_url').val();
$.ajax({
type: "POST",
url: post_url,
data: $('#question_issue_form').serialize(),
dataType: 'json',
success: function(data) {
var error = data.error_message;
if(error)
alert(error);
else {
alert("Question issue has been reported successfully.");
$.colorbox.close();
}
}
});
});
</script>
The array $_POST[] printed after form submission is as follows:
(
[form_submitted] => yes
[post_url] => http://localhost/abc/pqr/web/question_issue.php
[op] => question_issue
[question_id] => 77104
[que_issue_comment] =>
)
Why the index value [que_issue_comment] is coming blank even after filling up the text area?