I have a form with 4 columns.
Column 1 is a list of questions and columns 2-4 are yes/no radio buttons.
When the form first displays only column 1 should show. User would select a radio button to additionally display either columns 2&3 or column 4
I have found code that hides the column groups, but the radio buttons in side the column still display. I am trying to collapse the columns and everything inside of them too. I am teaching myself CSS and I know nothing about javascript so it could just be user error.
<!DOCTYPE html>
<!-- cg2.Style.visibility="hidden"
cg3.Style.visibility="hidden"
cg4.Style.visibility="hidden"-->
</script>
</head>
<body onload="vbscript:Startup window.dialogarguments">
<form name="baseform" id="baseform" action="" method="post">
<div id="showhide">
<label><input type="radio" name="T_097_WD" id="T_097lft" value="L1M" />this button Shows columns 2 & 3
</label>
<label><input type="radio" name="T_097_WD" id="T_097slv" value="SLV" />this button Shows column 4
</label>
</div>
<table border="1" style="width:50%" >
<COLGROUP id=cg1></COLGROUP>
<COLGROUP id=cg2></COLGROUP>
<COLGROUP id=cg3></COLGROUP>
<COLGROUP id=cg4></COLGROUP>
<tr>
<td>Never hide this column</td>
<td>column collapsed on startup</td>
<td>column collapsed on startup</td>
<td>column collapsed on startup</td>
</tr>
<tr>
<td>Q2</td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
</tr>
<tr>
<td>Q3</td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
</tr>
<tr>
<td>Q4</td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
</tr>
<tr>
<td>Q5</td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
<td><input type="radio" name="T_100_hi" id="T_100" value="1" />Yes
<input type="radio" name="T_100_hi" id="T_100" value="0" /></td>
</tr>
</table>
If I understand you correctly, the following solution should work for you.
var selection = document.getElementById("selection");
selection.addEventListener("change", function(e) {
if (e.target.tagName === "INPUT" && e.target.type === "radio") {
//get radio value
var value = document.querySelector('input[type="radio"]:checked').value;
//get items by column
var one = document.querySelectorAll("td:nth-child(1)");
var twothree = document.querySelectorAll("td:nth-child(2),td:nth-child(3)");
var four = document.querySelectorAll("td:nth-child(4)");
//hide all columns
hideOrShow(one, false);
hideOrShow(twothree, false);
hideOrShow(four, false);
//show selected columns
switch (value) {
case "one":
hideOrShow(one, true);
break;
case "twothree":
hideOrShow(twothree, true);
break;
case "four":
hideOrShow(four, true);
break;
}
}
});
function hideOrShow(nodes, show) {
[].forEach.call(nodes, function(item) {
item.style.display = show ? "inline-block" : "none";
});
}
//force change event to set to initial state
var changeEvent = new Event("change", {bubbles: true});
document.querySelector('input[type="radio"][value="one"]').dispatchEvent(changeEvent);
<div id="selection">
<label>
First
<input type="radio" name="shown" value="one" checked />
</label>
<label>
Two and Three
<input type="radio" name="shown" value="twothree" />
</label>
<label>
Four
<input type="radio" name="shown" value="four" />
</label>
</div>
<table border="1">
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
</table>
I'm making the assumption that you are not able to reference a column in a table, rather than needing information on responding to radio button events. Assuming this is the case, read on.
Add a class to each table element so that you can identify which elements belong to which rows. Then based on a radio button event, run a function to hide all elements with the appropriate class name.
For example
<tr>
<td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>
<tr>
<td class="col1"></td><td class="col2"></td><td class="col3"></td>
</tr>
Now you can use jQuery to do something like:
$('.col2').hide();
Each cell with the class col2 will be hidden, which means every cell in the second column.
You should be able to find the appropriate code to respond to radio button change events on the web if you don't already know it.
Related
How can I make a server request when the contect of a table cell is changed?
i.e. on a table like this:
<form class="formclass">
<table border="1" style="float:left">
<tr>
<td><input type="text" name="country" value="USA" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
<tr>
<td><input type="text" name="country" value="England" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
<tr>
<td><input type="text" name="country" value="Sweden" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
</table>
</form>
I tried adding an onchange function
$('.formclass').change(function() {console.log("succes")});
but this only works when every row is it's own form.
<form class="formclass">
<table border="1" style="float:left">
<tr>
<td><input type="text" name="country" value="USA" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
</table>
</form>
<form class="formclass">
<table border="1" style="float:left">
<tr>
<td><input type="text" name="country" value="Englang" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
</table>
</form>
<form class="formclass">
<table border="1" style="float:left">
<tr>
<td><input type="text" name="country" value="Sweden" readonly/></td>
<td>
<input type="radio" name="enabled" value="1" checked>enabled
<input type="radio" name="enabled" value="0">disable
</td>
</tr>
</table>
</form>
However this makes the styling really bad.
I just want a table where if on cell is changed it makes a server request with the data of that row. So here the country and radio button value if someone changes the the radio button.
Attach it to inputs instead of form
$('input[type=radio]').change(function() {console.log("succes")});
I have n radio buttons within an HTML form. A dialog box appears if not all of them are checked. How can I make an alert with the number of the buttons that are not checked?
<tr>
<td><strong>a</strong></td>
<td><input type="radio" id="RadioButton" name="a"/></td>
<td><input type="radio" id="RadioButton" name="a"/></td>
</tr>
<tr>
<td><strong>acronym</strong></td>
<td><input type="radio" id="RadioButton" name="acronym"/></td>
<td><input type="radio" id="RadioButton" name="acronym"/></td>
</tr>
<tr>
<td><strong>blockquote</strong></td>
<td><input type="radio" id="RadioButton" name="blockquote"/></td>
<td><input type="radio" id="RadioButton" name="blockquote"/></td>
</tr>
<tr>
<td><strong>br</strong></td>
<td><input type="radio" id="RadioButton" name="br"/></td>
<td><input type="radio" id="RadioButton"name="br"/></td>
</tr>
<tr>
<td><strong>div</strong></td>
<td><input type="radio" id="RadioButton" name="div"/></td>
<td><input type="radio" id="RadioButton" name="div"/></td>
</tr>
I want to display the number of the radios that are not checked
Use .reduce to identify all radio names, then use .filter over each name and :checked selector to figure out the number of unchecked radio fields:
const allRadioNames = [...document.querySelectorAll('input[type="radio"]')]
.reduce((names, { name }) => {
if (!names.includes(name)) names.push(name);
return names;
}, []);
document.querySelector('button').addEventListener('click', () => {
const checkedCount = allRadioNames.filter(name => {
return document.querySelector(`input[type="radio"][name="${name}"]:checked`);
}).length;
console.log('uncheckedCount: ' + (allRadioNames.length - checkedCount));
});
<tr>
<td><strong>a</strong></td>
<td><input type="radio" id="RadioButton" name="a" /></td>
<td><input type="radio" id="RadioButton" name="a" /></td>
</tr>
<tr>
<td><strong>acronym</strong></td>
<td><input type="radio" id="RadioButton" name="acronym" /></td>
<td><input type="radio" id="RadioButton" name="acronym" /></td>
</tr>
<tr>
<td><strong>blockquote</strong></td>
<td><input type="radio" id="RadioButton" name="blockquote" /></td>
<td><input type="radio" id="RadioButton" name="blockquote" /></td>
</tr>
<tr>
<td><strong>br</strong></td>
<td><input type="radio" id="RadioButton" name="br" /></td>
<td><input type="radio" id="RadioButton" name="br" /></td>
</tr>
<tr>
<td><strong>div</strong></td>
<td><input type="radio" id="RadioButton" name="div" /></td>
<td><input type="radio" id="RadioButton" name="div" /></td>
</tr>
<br>
<button>submit</button>
Note: this solution will fetch the number of boxes checked but will not match by name. As long as you know how may boxes should be checked, it shouldn't be a problem. The browser allows only one of the boxes with matching names to be checked. Let me know if you need something more specific.
This is a single-line solution. Simply use a query selector all within the confines of the table. Fetch :checked boxes and then alert the length.
function init() {
var table = document.getElementById('table');
var radioBoxes = table.querySelectorAll('input[type="radio"]:checked')
alert(radioBoxes.length)
}
<table id="table">
<tr>
<td><strong>a</strong></td>
<td><input type="radio" id="RadioButton" name="a" /></td>
<td><input type="radio" id="RadioButton" name="a" /></td>
</tr>
<tr>
<td><strong>acronym</strong></td>
<td><input type="radio" id="RadioButton" name="acronym" /></td>
<td><input type="radio" id="RadioButton" name="acronym" /></td>
</tr>
<tr>
<td><strong>blockquote</strong></td>
<td><input type="radio" id="RadioButton" name="blockquote" /></td>
<td><input type="radio" id="RadioButton" name="blockquote" /></td>
</tr>
<tr>
<td><strong>br</strong></td>
<td><input type="radio" id="RadioButton" name="br" /></td>
<td><input type="radio" id="RadioButton" name="br" /></td>
</tr>
<tr>
<td><strong>div</strong></td>
<td><input type="radio" id="RadioButton" name="div" /></td>
<td><input type="radio" id="RadioButton" name="div" /></td>
</tr>
</table>
<input type="button" onclick="init()" id="button" value="How many are checked?">
I am building a personality assessment page. However, I am seriously stuck and at this point, I cannot even understand where I went wrong. (Psychology student here, so this world is new to me.)
<form action="answer.html" method="get" class="personality_form" id="personality_form" onsubmit="return validateForm()">
<tr>
<td>Statement1</td>
<td><input type="radio" name="st1" class="dis" value="-1"></td>
<td><input type="radio" name="st1" class="na" value="0"></td>
<td><input type="radio" name="st1" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement2</td>
<td><input type="radio" name="st2" class="dis" value="-1"></td>
<td><input type="radio" name="st2" class="na" value="0"></td>
<td><input type="radio" name="st2" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement3</td>
<td><input type="radio" name="st3" class="dis" value="-1"></td>
<td><input type="radio" name="st3" class="na" value="0"></td>
<td><input type="radio" name="st3" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement4</td>
<td><input type="radio" name="st4" class="dis" value="-1"></td>
<td><input type="radio" name="st4" class="na" value="0"></td>
<td><input type="radio" name="st4" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement5</td>
<td><input type="radio" name="st5" class="dis" value="-1"></td>
<td><input type="radio" name="st5" class="na" value="0"></td>
<td><input type="radio" name="st5" class="agg" value="1"></td>
</tr>
<tr>
<th colspan="4"><button type="submit" onclick="get();">Get Results</button></th>
</tr>
</form>
Now I am adding here following script:
function get() {
var res1 = document.getElementsByName("st1").value;
var res2 = document.getElementsByName("st2").value;
var x = res1 + res2;
if (x < 0) {
document.getElementById('result').innerHTML = x;
}
}
And answer.html consists of
<div id="result"></div>
I cannot seem to get the value no matter how hard I try. I've tried doing id="st1_1" and getElementById, but it still won't do it.
Any suggestions or ideas what am I doing wrong?
Thank you
document.getElementsByName returns a NodeList, so there are multiple elements. As a result, it doesn't have a value property so res1 and res2 are undefined.
Try changing document.getElementsByName("st1").value to document.querySelector("[name=\"st1\"]:checked").value. If you get an error message like "TypeError: Cannot read property 'value' of null" then it means that none of the inputs with the name "st1" is checked.
Adding to James Long's answer,
Open the console on the webpage and type
document.getElementsByName("st1");
You will get
[<input type="radio" name="st1" class="dis" value="-1">, <input type="radio" name="st1" class="na" value="0">, <input type="radio" name="st1" class="agg" value="1">]
This indicates that you the above code returns an array. Now to select either of the <input> tags, you can use document.getElementsByName("st1")[0] which will select the first <input>.
To find out which input/s have been selected, iterate over the inputs and find the total sum. If you changed your values to
<input type="radio" name="st#" class="dis" value="1">
<input type="radio" name="st#" class="na" value="2">
<input type="radio" name="st#" class="agg" value="4">
Then if the sum is 1, then first one is selected, if it is 2, then second is selected, if 3 then first two were selected, if 4 then third is selected, if 5 then first and third, 6 then second and third, 7 then all three.
function get() {
var res1 = document.querySelector('input[name="st1"]:checked').value;
var res2 = document.querySelector('input[name="st2"]:checked').value;
console.log("res1="+res1);
console.log("res2="+res2);
var x = parseInt(res1) + parseInt(res2);
// if (x < 0) {
document.getElementById('result').innerHTML = x;
// }
}
<form method="get" class="personality_form" id="personality_form">
<table>
<tr>
<td>Statement1</td>
<td><input type="radio" name="st1" class="dis" value="-1"></td>
<td><input type="radio" name="st1" class="na" value="0"></td>
<td><input type="radio" name="st1" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement2</td>
<td><input type="radio" name="st2" class="dis" value="-1"></td>
<td><input type="radio" name="st2" class="na" value="0"></td>
<td><input type="radio" name="st2" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement3</td>
<td><input type="radio" name="st3" class="dis" value="-1"></td>
<td><input type="radio" name="st3" class="na" value="0"></td>
<td><input type="radio" name="st3" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement4</td>
<td><input type="radio" name="st4" class="dis" value="-1"></td>
<td><input type="radio" name="st4" class="na" value="0"></td>
<td><input type="radio" name="st4" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement5</td>
<td><input type="radio" name="st5" class="dis" value="-1"></td>
<td><input type="radio" name="st5" class="na" value="0"></td>
<td><input type="radio" name="st5" class="agg" value="1"></td>
</tr>
<tr>
<th colspan="4"><button type="button" onclick="get();">Get Results</button></th>
</tr>
</table>
</form>
<div id="result"></div>
Please review working code this may help to resolve an issue. You should not use both "onClick() on submit button" and "OnSubmit on form post" at a time.
click()
This method is a shortcut for in the first two variations and in the third. The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event. click() event bind with a mouse. There are multiple events available for the mouse.
submit()
submit() This method is a shortcut for .on( "submit", handler ) in the first variation, and .trigger( "submit" ) in the third. This method belongs to form event. There are also more events which are specifically bound with HTML form only.
The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to elements. Forms can be submitted either by clicking an explicit , , or , or by pressing Enter when certain form elements have focus.
$(document).ready(function() {
$(".personality_form").on("submit", function(e) {
e.preventDefault();
getData();
});
function getData() {
var res1 = $("input[name='st1']").val();
var res2 = $("input[name='st2']").val();
var x = parseInt(res1) + parseInt(res2);
if (x < 0) {
$('.result').html(x);
}
}
function validateForm() {
return true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" class="personality_form" id="personality_form">
<tr>
<td>Statement1</td>
<td>
<input type="radio" name="st1" class="dis" value="-1">
</td>
<td>
<input type="radio" name="st1" class="na" value="0">
</td>
<td>
<input type="radio" name="st1" class="agg" value="1">
</td>
</tr>
<tr>
<td>Statement2</td>
<td>
<input type="radio" name="st2" class="dis" value="-1">
</td>
<td>
<input type="radio" name="st2" class="na" value="0">
</td>
<td>
<input type="radio" name="st2" class="agg" value="1">
</td>
</tr>
<tr>
<td>Statement3</td>
<td>
<input type="radio" name="st3" class="dis" value="-1">
</td>
<td>
<input type="radio" name="st3" class="na" value="0">
</td>
<td>
<input type="radio" name="st3" class="agg" value="1">
</td>
</tr>
<tr>
<td>Statement4</td>
<td>
<input type="radio" name="st4" class="dis" value="-1">
</td>
<td>
<input type="radio" name="st4" class="na" value="0">
</td>
<td>
<input type="radio" name="st4" class="agg" value="1">
</td>
</tr>
<tr>
<td>Statement5</td>
<td>
<input type="radio" name="st5" class="dis" value="-1">
</td>
<td>
<input type="radio" name="st5" class="na" value="0">
</td>
<td>
<input type="radio" name="st5" class="agg" value="1">
</td>
</tr>
<tr>
<th colspan="4">
<button type="submit" class="btnSubmit">Get Results</button>
</th>
</tr>
</form>
<div class="result">
</div>
getElementsByName returns a live nodelist so you can't immediately grab the value. You need to iterate over the nodelist (or get the node you want using array notation) and then add the values.
However, what you might find easier is to use querySelectorAll to pick up all the checked buttons (document.querySelectorAll(":checked")) and iterate over those instead, making sure that you convert the string value to a number on each iteration when you add the values together.
function get() {
var checked = document.querySelectorAll(":checked");
let total = 0;
for (let i = 0; i < checked.length; i++) {
total += Number(checked[i].value);
}
document.getElementById('result').textContent = total;
}
document.querySelector('button').addEventListener('click', get, false);
<table>
<tr>
<td>Statement1</td>
<td><input type="radio" name="st1" class="dis" value="-1"></td>
<td><input type="radio" name="st1" class="na" value="0"></td>
<td><input type="radio" name="st1" class="agg" value="1"></td>
</tr>
<tr>
<td>Statement2</td>
<td><input type="radio" name="st2" class="dis" value="-1"></td>
<td><input type="radio" name="st2" class="na" value="0"></td>
<td><input type="radio" name="st2" class="agg" value="1"></td>
</tr>
</table>
<button>Get!</button>
<div id="result"></div>
My problem is that I am trying to generate some HTML code to fit on this one GIANT form. This webapp will have 12 letters with 10 textboxes for each day of the week. I want some help having this generating HTML code for each day of the week. Instead of having to hard code each letter for each day of the week. Would love some help.
I think i might be headed in the right way if I use window.onload = function() but I am not sure how to use Javascript to generate a line in HTML when loading a window.
TLDR; how can I get either jsp or JS to copy paste this HTML into a webpage 12 times for each day of the week with unique ID's and Names.
<form>
<div id="sectionpart">
<%--Monday #1
--%>
<h2>Monday Mail Piece #1</h2>
<div id ="formpart" >
<table border="0" cellspacing="3" cellpadding="3">
<tr>
<td>A. FORM*: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" name="FORM_M1" type="number" maxlength="1" id="FORM_M1" value="8" size="10" required/></td>
</tr>
<tr>
<td>B. ADDRESSEE*: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="ADDRESSEE_M1" id="ADDRESSEE_M1" value="8" size="10" maxlength="1" required/></td>
</tr>
<tr>
<td>other field: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="text" name="otherdB_M1" id="otherB_M1" value="banana" size="30" /></td>
</tr>
<tr>
<td>C. RETURN ENVELOPE*: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="RETURN_ENVELOPE_M1" id="RETURN_ENVELOPE_M1" value="3" size="10" maxlength="1" required/></td>
</tr>
<tr>
<td>D. SENDER TYPE*: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="SENDER_TYPE_M1" id="SENDER_TYPE_M1" value="10" size="10" maxlength="2" required/></td>
</tr>
<tr>
<td>other field: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="text" name="otherD_M1" id="otherD_M1" value="" size="50" /></td>
</tr>
<tr>
<td>E. PURPOSE*: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="PURPOSE_M1" id="PURPOSE_M1" value="10" size="10" maxlength="2" required/></td>
</tr>
<tr>
<td>other field: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="text" name="otherE_M1" id="otherE_M1" value="" size="50" /></td>
</tr>
<tr>
<td>F. ADVERTISING*: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="ADVERTISING_M1" id="ADVERTISING_M1" value="1" size="10" maxlength="1" required/></td>
</tr>
<tr>
<td>G. READING: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="READING_M1" id="READING_M1" value="1" size="10" maxlength="1" /></td>
</tr>
<tr>
<td>H. REACTION: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="REACTION_M1" ID="REACTION_M1" value="1" size="10" maxlength="1" /></td>
</tr>
<tr>
<td>I. RESPONSE: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="RESPONSE_M1" ID="RESPONSE_M1" value="1" size="10" maxlength="1" /></td>
</tr>
<tr>
<td>Class: 01020304 </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="Classnums_M1" ID="Classnums_M1" value="01020304" size="10" maxlength="8" /></td>
</tr>
<tr>
<td>J. CLASS*: (OK to pick more than one)</td>
<td><ol type="1" >
<li><input type="checkbox" name="Presorted-PRSRT-FP" value="ON" />Presorted First-Class <b>or</b> PRSRT, <b>or</b> FP</li>
<li><input type="checkbox" name="FirstC-Postage" value="ON" />First-Class Postage</li>
<li><input type="checkbox" name="ForeverStamp" value="ON" />Forever Stamp</li>
<li><input type="checkbox" name="AUTO" value="ON" />AUTO</li>
<li><input type="checkbox" name="ABAFMBAV" value="ON" />AB, <b>or</b> AF, <b>or</b> MB, <b>or</b> AV</li>
<li><input type="checkbox" name="SinglePiece" value="ON" />Single Piece, <b>or</b> SNGLP, <b>or</b> SP</li>
<li><input type="checkbox" name="OutsideUS" value="ON" />Mail from outside the U.S.</li>
<li><input type="checkbox" name="FRANKED" value="ON" />Federal Government with Official Signature(FRANKED)</li>
<li><input type="checkbox" name="OtherFed" value="ON" />Other Federal Government Mail</li>
<li><input type="checkbox" name="OtherClassification" value="ON" />Other classification (Specify on Answer Booklet page 4)
<input onblur="undo(this.id);"onfocus="highlight(this.id);" type="text" name="otherJ_M1" ID="otherJ_M1"value="" size="50" maxlength="50"/></li>
</ol>
</td>
</tr>
</table>
</div>
<div id="imagepart">
<img src="img/MailAustin.JPG" width="100%" height="675px" alt="MailAustin" ID="IMAGE_M1"/>
</div>
</div>
repeat
repeat
......
repeat
</form>
You can use pure JS to grab a set of html tags, clone them, and then attach them to the DOM. You could execute something like this in your onload function:
var form = document.querySelector('#form');
var inject = doucment.querySelector('#injection-point');
for ( var i = 0; i < 7; i++ ) {
var cln = form.cloneNode(true);
cln.setAttribute('id', 'form-' + i);
inject.appendChild(cln);
}
Clone Node...
https://www.w3schools.com/jsref/met_node_clonenode.asp
Also, if you have the freedom to use a framework, Polymer JS provides some excellent tools for repeating html without the need to write additional JS.
I have the following html page
I want to make a check box at the heading of every column which when checked will check all the check boxes in the column.How do I achieve that functionality? I think jquery or javascript will help but I am new to them
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="next.php" method="post">
<select style="width: 200px;" name="d">
<option value="1" id="spanDate"></option>
<option value="2" id="spanDate1"></option>
<option value="3" id="spanDate2"></option>
</select>
<br><br><br>
<table class="CSSTableGenerator">
<tr>
<th>Date</th>
<th>00:00-03:00</th>
<th>03:00-06:00</th>
<th>06:00-09:00</th>
<th>09:00-12:00</th>
<th>12:00-15:00</th>
<th>15:00-18:00</th>
<th>18:00-21:00</th>
<th>21:00-00:00</th>
</tr>
<tr>
<td>Noida Sector 1</td>
<td><input type="checkbox" name="time[]" value="1" ></td>
<td><input type="checkbox" name="time[]" value="2" ></td>
<td><input type="checkbox" name="time[]" value="3" ></td>
<td><input type="checkbox" name="time[]" value="4" ></td>
<td><input type="checkbox" name="time[]" value="5" ></td>
<td><input type="checkbox" name="time[]" value="6" ></td>
<td><input type="checkbox" name="time[]" value="7" ></td>
<td><input type="checkbox" name="time[]" value="8" ></td>
</tr>
<tr>
<td>Noida Sector 2</td>
<td><input type="checkbox" name="time1[]" value="1" ></td>
<td><input type="checkbox" name="time1[]" value="2" ></td>
<td><input type="checkbox" name="time1[]" value="3" ></td>
<td><input type="checkbox" name="time1[]" value="4" ></td>
<td><input type="checkbox" name="time1[]" value="5" ></td>
<td><input type="checkbox" name="time1[]" value="6" ></td>
<td><input type="checkbox" name="time1[]" value="7" ></td>
<td><input type="checkbox" name="time1[]" value="8" ></td>
</tr>
<tr>
<td>Noida Sector 3</td>
<td><input type="checkbox" name="time2[]" value="1" ></td>
<td><input type="checkbox" name="time2[]" value="2" ></td>
<td><input type="checkbox" name="time2[]" value="3" ></td>
<td><input type="checkbox" name="time2[]" value="4" ></td>
<td><input type="checkbox" name="time2[]" value="5" ></td>
<td><input type="checkbox" name="time2[]" value="6" ></td>
<td><input type="checkbox" name="time2[]" value="7" ></td>
<td><input type="checkbox" name="time2[]" value="8" ></td>
</tr>
<tr>
<td>Noida Sector 4</td>
<td><input type="checkbox" name="time3[]" value="1" ></td>
<td><input type="checkbox" name="time3[]" value="2" ></td>
<td><input type="checkbox" name="time3[]" value="3" ></td>
<td><input type="checkbox" name="time3[]" value="4" ></td>
<td><input type="checkbox" name="time3[]" value="5" ></td>
<td><input type="checkbox" name="time3[]" value="6" ></td>
<td><input type="checkbox" name="time3[]" value="7" ></td>
<td><input type="checkbox" name="time3[]" value="8" ></td>
</tr>
<tr>
<td>Noida Sector 5</td>
<td><input type="checkbox" name="time4[]" value="1" ></td>
<td><input type="checkbox" name="time4[]" value="2" ></td>
<td><input type="checkbox" name="time4[]" value="3" ></td>
<td><input type="checkbox" name="time4[]" value="4" ></td>
<td><input type="checkbox" name="time4[]" value="5" ></td>
<td><input type="checkbox" name="time4[]" value="6" ></td>
<td><input type="checkbox" name="time4[]" value="7" ></td>
<td><input type="checkbox" name="time4[]" value="8" ></td>
</tr>
<tr>
<td>Noida Sector 6</td>
<td><input type="checkbox" name="time5[]" value="1" ></td>
<td><input type="checkbox" name="time5[]" value="2" ></td>
<td><input type="checkbox" name="time5[]" value="3" ></td>
<td><input type="checkbox" name="time5[]" value="4" ></td>
<td><input type="checkbox" name="time5[]" value="5" ></td>
<td><input type="checkbox" name="time5[]" value="6" ></td>
<td><input type="checkbox" name="time5[]" value="7" ></td>
<td><input type="checkbox" name="time5[]" value="8" ></td>
</tr>
<tr>
<td>Noida Sector 7</td>
<td><input type="checkbox" name="time6[]" value="1" ></td>
<td><input type="checkbox" name="time6[]" value="2" ></td>
<td><input type="checkbox" name="time6[]" value="3" ></td>
<td><input type="checkbox" name="time6[]" value="4" ></td>
<td><input type="checkbox" name="time6[]" value="5" ></td>
<td><input type="checkbox" name="time6[]" value="6" ></td>
<td><input type="checkbox" name="time6[]" value="7" ></td>
<td><input type="checkbox" name="time6[]" value="8" ></td>
</tr>
</table>
<br><br><br>
<input type="submit" name="enable" value="enable">
<input type="submit" name="disable" value="disable">
</form>
<script>
var months = ['January','February','March','April','May','June','July',
'August','September','October','November','December'];
var tomorrow = new Date();
tomorrow.setTime(tomorrow.getTime() + (1000*3600*24));
document.getElementById("spanDate1").innerHTML = months[tomorrow.getMonth()] + " " + tomorrow.getDate()+ ", " + tomorrow.getFullYear();
</script>
<script>
var months = ['January','February','March','April','May','June','July',
'August','September','October','November','December'];
var tomorrow = new Date();
tomorrow.setTime(tomorrow.getTime());
document.getElementById("spanDate").innerHTML = months[tomorrow.getMonth()] + " " + tomorrow.getDate()+ ", " + tomorrow.getFullYear();
</script>
<script>
var months = ['January','February','March','April','May','June','July',
'August','September','October','November','December'];
var tomorrow = new Date();
tomorrow.setTime(tomorrow.getTime() + (1000*3600*24) + (1000*3600*24));
document.getElementById("spanDate2").innerHTML = months[tomorrow.getMonth()] + " " + tomorrow.getDate()+ ", " + tomorrow.getFullYear();
</script>
</body>
</html>
Add <input type="checkbox" name="checkall" value="1" /> at the heading of every column and change value to correspond to the value of the checkboxes in the colummn.
Then using jquery, add
$('input[name=checkall]').each(function(){
$(this).click(function(){
if(this.checked === true){
checkAll(this.value);
}else{
unCheckAll(this.value);
}
})
})
function checkAll(value){
var checkboxes = $('input:checkbox[value=' + value + ']');
checkboxes.prop( "checked" , true );
}
function unCheckAll(value){
var checkboxes = $('input:checkbox[value=' + value + ']');
checkboxes.prop( "checked" , false );
}