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.
Related
**UPDATED 3/25/20 11:20 est **
The issue I am having now is the code is not using num3 as intended. It is set up like the rest of the code in the HTML and script. This is the set up of my form:
<form name = "arrowCalc">
<table>
<caption>Weight Calculator</caption>
<tr>
<td><label>Draw Length:</label></td>
<td><input type="text" name="txtDraw"></td>
</tr>
<tr>
<td><label>Spine:</label></td>
<td>
<input type="radio" id="spine400" name="spineType" value="8.9"><label>400 Spine</label><br>
<input type="radio" id="spine350" name="spineType" value="9.8"><label>350 Spine</label><br>
<input type="radio" id="spine300" name="spineType" value="11.2"><label>300 Spine</label><br>
<input type="radio" id="spine250" name="spineType" value="12.5"><label>250 Spine</label>
</td>
</tr>
<tr>
<td><label>Nock Weight:</label></td>
</td>
<td>
<input type="radio" id="standardNock" name="nocType" checked="checked" value="6"><label>Standard</label><br>
<input type="radio" id="nockTurnal" name="nocType" value="21"><label>Nockturnal</label><br>
</td>
</tr>
<tr>
<td><label>Insert Weight:</label></td>
<td><input type="text" name="txtInsert"></td>
</tr>
<tr>
<td><label>Broadhead Weight:</label></td>
<td><input type="text" name="txtBroad"></td>
</tr>
<tr>
<td><label>Vane Weight:</label></td>
<td>
<input type="radio" id="vaneR" name="vaneType" value="6" ><label>Rapt-X</label><br>
<input type="radio" id="vaneD" name="vaneType" value="8"><label>DVX 8</label><br>
<input type="radio" id="vaneF2" name="vaneType" value="7"><label>Fusion 2.1</label><br>
<input type="radio" id="vaneF3" name="vaneType" value="7.5"><label>Fusion 3.0</label>
</td>
</tr>
<tr>
<td><label>Number of Vanes:</label></td>
<td>
<input type="radio" id="vanes3" name="vaneNumber" value="3"><label>3</label><br>
<input type="radio" id="vanes4" name="vaneNumber" value="4"><label>4</label><br>
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Calculate" onClick="weightFormula()" align="right"></td>
</tr>
<tr>
<td><label>Weight:</label></td>
<td><input type="text" name="txtRes"></td>
</tr>
</table>
This is my function:
function weightFormula() {
var num1, num2, num3, num4, num5, num6, num7, res;
num1=Number(document.arrowCalc.txtDraw.value)-.5;
num2=document.querySelector('input[name=spineType]:checked').value;
num3=document.querySelector('input[name=nocType]:checked').value;
num4=Number(document.arrowCalc.txtInsert.value);
num5=Number(document.arrowCalc.txtBroad.value);
num6=document.querySelector('input[name=vaneType]:checked').value;
num7=document.querySelector('input[name=vaneNumber]:checked').value;
res=(num1*num2)+num4+num5+(num6*num7)+10+num3;
document.arrowCalc.txtRes.value=res;
}
With the exception as num3, all other variables are working as expected. If I would make num3 a text input or a dropdown box, the code also works as expected. Currently num3 will just add the value to the end of the total number. For instance if I am expecting an answer of 775.25 and I select the Standard nock (value of 6) the answer would be 769.256. The same thing happens when I move num3 to other spots in the res= line, it will just place the values at the end of the decimal.
The numbers I have been using for this are:
Draw Length (num1) = 29
Spine (num2) = 12.5 (spine250)
Nock (num3) = 6 (standard)
Insert (num4) = 175
Broadhead (num5) = 200
Vane type (num6) = 7 (Fusion 2.1)
Vane number (num7) = 4
As previously stated, this should equal 775.25
Try using eval()
function weightFormula() {
var num1, num2, num3, num4, num5, num6, num7, res;
num1=document.arrowCalc.txtDraw.value-.5+"";
num2=document.querySelector('input[name=spineType]:checked').value;
num3=document.querySelector('input[name=nocType]:checked').value; /*This is part of the issue*/
num4=document.arrowCalc.txtInsert.value;
num5=document.arrowCalc.txtBroad.value;
num6=document.querySelector('input[name=vaneType]:checked').value;
num7=document.querySelector('input[name=vaneNumber]:checked').value;
debugger;
res=eval(`${num1}*${num2}+${num4}+${num5}+(${num6}*${num7})+10+${num3}`);
document.arrowCalc.txtRes.value=res;
}
function weightFormula() {
var num1, num2, num3, num4, num5, num6, num7, res;
num1=document.arrowCalc.txtDraw.value-.5+"";
num2=document.querySelector('input[name=spineType]:checked').value;
num3=document.querySelector('input[name=nocType]:checked').value; /*This is part of the issue*/
num4=document.arrowCalc.txtInsert.value;
num5=document.arrowCalc.txtBroad.value;
num6=document.querySelector('input[name=vaneType]:checked').value;
num7=document.querySelector('input[name=vaneNumber]:checked').value;
debugger;
res=eval(`${num1}*${num2}+${num4}+${num5}+(${num6}*${num7})+10+${num3}`);
document.arrowCalc.txtRes.value=res;
}
<form name = "arrowCalc">
<table>
<caption>Weight Calculator</caption>
<tr>
<td><label>Draw Length:</label></td>
<td><input type="text" name="txtDraw"></td>
</tr>
<tr>
<td><label>Spine:</label></td>
<td>
<input type="radio" id="spine400" name="spineType" value="8.9"><label>400 Spine</label><br>
<input type="radio" id="spine350" name="spineType" value="9.8"><label>350 Spine</label><br>
<input type="radio" id="spine300" name="spineType" value="11.2"><label>300 Spine</label><br>
<input type="radio" id="spine250" name="spineType" value="12.5"><label>250 Spine</label>
</td>
</tr>
<tr>
<td><label>Nock Weight:</label></td>
<td>
<input type="radio" id="standardNock" name="nocType" checked="checked" value="6"><label>Standard</label><br>
<input type="radio" id="nockTurnal" name="nocType" value="21"><label>Nockturnal</label><br>
</td>
</tr>
<tr>
<td><label>Insert Weight:</label></td>
<td><input type="text" name="txtInsert"></td>
</tr>
<tr>
<td><label>Broadhead Weight:</label></td>
<td><input type="text" name="txtBroad"></td>
</tr>
<tr>
<td><label>Vane Weight:</label></td>
<td>
<input type="radio" id="vaneR" name="vaneType" value="6" ><label>Rapt-X</label><br>
<input type="radio" id="vaneD" name="vaneType" value="8"><label>DVX 8</label><br>
<input type="radio" id="vaneF2" name="vaneType" value="7"><label>Fusion 2.1</label><br>
<input type="radio" id="vaneF3" name="vaneType" value="7.5"><label>Fusion 3.0</label>
</td>
</tr>
<tr>
<td><label>Number of Vanes:</label></td>
<td>
<input type="radio" id="vanes3" name="vaneNumber" value="3"><label>3</label><br>
<input type="radio" id="vanes4" name="vaneNumber" value="4"><label>4</label><br>
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Calculate" onClick="weightFormula()" align="right"></td>
</tr>
<tr>
<td><label>Weight:</label></td>
<td><input type="text" name="txtRes"></td>
</tr>
</table>
</form>
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>
So, i have a form as below.I want to select all in working when the checkbox(For All Day) is selected. Is there any way i can do it through html or should i go for php or javascript?
<form>
<table>
<tr>
<td colspan="4">
<!--on selecting the checkbox below all radio buttons under working must get selected-->
<input type="checkbox" name="day" />All Day
</td>
<td><b>Working</b></td>
<td><b>Close</b></td>
</tr>
<tr>
<td colspan="4"><b>Monday</b></td>
<td><input type="radio" name="mday" value="work" /></td>
<td><input type="radio" name="mday" /></td>
</tr>
<tr>
<td colspan="4"><b>Tuesday</b></td>
<td><input type="radio" name="tday" value="work" /></td>
<td><input type="radio" name="tday" /></td>
</tr>
<tr>
<td colspan="4"><b>Wednesday</b></td>
<td><input type="radio" name="wday" value="work" /></td>
<td><input type="radio" name="wday" /></td>
</tr>
<tr>
<td colspan="4"><b>Thursday</b></td>
<td><input type="radio" name="thday" value="work" /></td>
<td><input type="radio" name="thday" /></td>
</tr>
<tr>
<td colspan="4"><b>Friday</b></td>
<td><input type="radio" name="fday" value="work" /></td>
<td><input type="radio" name="fday" /></td>
</tr>
<tr>
<td colspan="4"><b>Saturday</b></td>
<td><input type="radio" name="sday" value="work" /></td>
<td><input type="radio" name="sday" value="close" /></td>
</tr>
<tr>
<td colspan="4"><b>Sunday</b></td>
<td><input type="radio" name="suday" value="work" /></td>
<td><input type="radio" name="suday" /></td>
</tr>
</table>
</form>
You won't be able to do this with php, at least without reloading the page or making an Ajax request but this would be impractical. The best option is JavaScript; refer to this question, it solves your problem: How to implement "select all" check box in HTML?
Basically, all you have to do is bind an onClick event on the checkbox "All days" that triggers the JavaScript function. The function then takes the list of checkboxes, iterates through all of them, and checks them. The html (taken from the link I provided) should be similar to this:
<input type="checkbox" onClick="toggle(this)" />All days<br/>
And then the script:
function toggle(source) {
checkboxes = document.getElementsByName('x');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
The easiest method would be to use a javascript function that would be called upon the All Day check box value changed.
Then your function would be IF checked, run through the list and check all days
Try This Using jquery
Live Demo Here
Script
$("#allday").click(function() {
$("input:radio[value='work']").attr("checked", "checked");
});
Snippet Example Below
$("#allday").click(function() {
$("input:radio[value='work']").attr("checked", "checked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" name="allday" id="allday"/>All Day Working Close <br>
<table>
<tr>
<td colspan="4"><tr>
<td colspan="4">
<b>Monday</b>
</td>
<td>
<input type="radio" name="mday" value="work" /></td>
<td>
<input type="radio" name="mday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Tuesday</b>
</td>
<td>
<input type="radio" name="tday" value="work" /></td>
<td>
<input type="radio" name="tday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Wednesday</b>
</td>
<td>
<input type="radio" name="wday" value="work" /></td>
<td>
<input type="radio" name="wday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Thursday</b>
</td>
<td>
<input type="radio" name="thday" value="work" /></td>
<td>
<input type="radio" name="thday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Friday</b>
</td>
<td>
<input type="radio" name="fday" value="work" /></td>
<td>
<input type="radio" name="fday" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Saturday</b>
</td>
<td>
<input type="radio" name="sday" value="work" /></td>
<td>
<input type="radio" name="sday" value="close" />
</td>
</tr>
<tr>
<td colspan="4">
<b>Sunday</b>
</td>
<td>
<input type="radio" name="suday" value="work" /></td>
<td>
<input type="radio" name="suday" />
</td>
</tr>
</table>
</form>
Use jQuery for checking/unchecking all week days based on checking/unchecking of "All days":
$(document).ready(function(){
$(':checkbox[name="day"]').click(function(){
if($(this).is(':checked')){
$("input:radio[value='work']").prop("checked", true);
} else {
$("input:radio[value='work']").prop("checked", false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table border="1" colspan="0" cellpadding="0">
<tr>
<td colspan="4">
<!--on selecting the checkbox below all radio buttons under working must get selected-->
<input type="checkbox" name="day" />All Day
</td>
<td><b>Working</b></td>
<td><b>Close</b></td>
</tr>
<tr>
<td colspan="4"><b>Monday</b></td>
<td><input type="radio" name="mday" value="work" /></td>
<td><input type="radio" name="mday" /></td>
</tr>
<tr>
<td colspan="4"><b>Tuesday</b></td>
<td><input type="radio" name="tday" value="work" /></td>
<td><input type="radio" name="tday" /></td>
</tr>
<tr>
<td colspan="4"><b>Wednesday</b></td>
<td><input type="radio" name="wday" value="work" /></td>
<td><input type="radio" name="wday" /></td>
</tr>
<tr>
<td colspan="4"><b>Thursday</b></td>
<td><input type="radio" name="thday" value="work" /></td>
<td><input type="radio" name="thday" /></td>
</tr>
<tr>
<td colspan="4"><b>Friday</b></td>
<td><input type="radio" name="fday" value="work" /></td>
<td><input type="radio" name="fday" /></td>
</tr>
<tr>
<td colspan="4"><b>Saturday</b></td>
<td><input type="radio" name="sday" value="work" /></td>
<td><input type="radio" name="sday" value="close" /></td>
</tr>
<tr>
<td colspan="4"><b>Sunday</b></td>
<td><input type="radio" name="suday" value="work" /></td>
<td><input type="radio" name="suday" /></td>
</tr>
</table>
</form>
I have inventory list, I want to create invitation from the list.
All products have 2 inputs: price and counts (qtys) that are disabled.
I tried to create function that make the inputs enabled when the user clicked on the checkbox, but it's working only after 2 clicks...
function niv(id)
{
$("input:checkbox").click(function() {
$('#'+id).attr("disabled", !this.checked);
$('#p'+id).attr("disabled", !this.checked);
});
}
The HTML:
<tr class="even">
<td>225/45/17</td>
<td id=Bridgestone>Bridgestone</td>
<td>Putenza <h6>91y</h6></td>
<td><input type="text" id="p21" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 650</small> ₪</td>
<td><input type="checkbox" name="check[]" value="21" onclick="niv(21)"></td>
<td><input type="text" id="21" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr>
<tr class="even">
<td>225/45/19</td>
<td id=Bridgestone>Bridgestone</td>
<td>Putenza <h6>96w</h6></td>
<td><input type="text" id="p20" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 1100</small> ₪</td>
<td><input type="checkbox" name="check[]" value="20" onclick="niv(20)"></td>
<td><input type="text" id="20" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr>
<tr class="even">
<td>225/55/17</td>
<td id=Bridgestone>Bridgestone</td>
<td>Turanza runflat <h6>97y</h6></td>
<td><input type="text" id="p18" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 850</small> ₪</td>
<td><input type="checkbox" name="check[]" value="18" onclick="niv(18)"></td>
<td><input type="text" id="18" name="counts[]" disabled="disabled" /><small> מתוך 9 במלאי</small></td>
</tr>
<tr class="even">
<td>225/55/18</td>
<td id=Bridgestone>Bridgestone</td>
<td>t001 <h6>98v</h6></td>
<td><input type="text" id="p19" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 550-600</small> ₪</td>
<td><input type="checkbox" name="check[]" value="19" onclick="niv(19)"></td>
<td><input type="text" id="19" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr>
<tr class="even">
<td>255/50/20</td>
<td id=Bridgestone>Bridgestone</td>
<td>Hp Sport <h6>109v</h6></td>
<td><input type="text" id="p14" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 850</small> ₪</td>
<td><input type="checkbox" name="check[]" value="14" onclick="niv(14)"></td>
<td><input type="text" id="14" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr>
Your niv function is wrong. Try to change it to:
function niv(id)
{
var isCheck = $("input:checkbox[value='" + id + "']").is(':checked');
$('#'+id).prop("disabled", !isCheck);
$('#p'+id).prop("disabled", !isCheck);
}
Another possible solution is to pass the this value to the niv function in the call:
onclick="niv(this)"
And so the new niv function will be:
function niv(obj)
{
$('#'+obj.value).prop("disabled", !obj.checked);
$('#p'+obj.value).prop("disabled", !obj.checked);
}
My snippet:
function niv(id)
{
var isCheck = $("input:checkbox[value='" + id + "']").is(':checked');
$('#'+id).prop("disabled", !isCheck);
$('#p'+id).prop("disabled", !isCheck);
}
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<table>
<tr class="even">
<td>225/45/17</td>
<td id=Bridgestone>Bridgestone</td>
<td>Putenza <h6>91y</h6></td>
<td><input type="text" id="p21" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 650</small> ₪</td>
<td><input type="checkbox" name="check[]" value="21" onclick="niv(21)"></td>
<td><input type="text" id="21" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr><tr class="even">
<td>225/45/19</td>
<td id=Bridgestone>Bridgestone</td>
<td>Putenza <h6>96w</h6></td>
<td><input type="text" id="p20" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 1100</small> ₪</td>
<td><input type="checkbox" name="check[]" value="20" onclick="niv(20)"></td>
<td><input type="text" id="20" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr><tr class="even">
<td>225/55/17</td>
<td id=Bridgestone>Bridgestone</td>
<td>Turanza runflat <h6>97y</h6></td>
<td><input type="text" id="p18" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 850</small> ₪</td>
<td><input type="checkbox" name="check[]" value="18" onclick="niv(18)"></td>
<td><input type="text" id="18" name="counts[]" disabled="disabled" /><small> מתוך 9 במלאי</small></td>
</tr><tr class="even">
<td>225/55/18</td>
<td id=Bridgestone>Bridgestone</td>
<td>t001 <h6>98v</h6></td>
<td><input type="text" id="p19" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 550-600</small> ₪</td>
<td><input type="checkbox" name="check[]" value="19" onclick="niv(19)"></td>
<td><input type="text" id="19" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr><tr class="even">
<td>255/50/20</td>
<td id=Bridgestone>Bridgestone</td>
<td>Hp Sport <h6>109v</h6></td>
<td><input type="text" id="p14" name="price[]" value="" disabled="disabled" /> <br /><small>מחיר מומלץ: 850</small> ₪</td>
<td><input type="checkbox" name="check[]" value="14" onclick="niv(14)"></td>
<td><input type="text" id="14" name="counts[]" disabled="disabled" /><small> מתוך 4 במלאי</small></td>
</tr>
</table>
Use the change() event listener, it's better for this purpose.
As the checkbox is in a table, I've just found the parent <tr> and then found all the text inputs within that row.
$('input[type="checkbox"]').change(function () {
$(this).closest('tr').find('input[type="text"]').attr("disabled", !this.checked);
})
You'll notice that this does away with the inline call to JavaScript, abstracting your JS code from your HTML. It also means that you don't need to be concerned with IDs and making sure they are sensible - possibly reducing BE workload and making everything more simple.
The reason that your code didn't work - and more specifically why it required two clicks is as follows:
You have an inline click event - which then calls a function to set a listener. Only when your inline click is called, is the listener applied.
The second time you click the new listener - with your logic - has been created, which means that it's used.
Additionally, every time you click on this checkbox element, you create a new listener - which means that within a couple of clicks, there is a big list of duplicated event listeners.
jsFiddle example: https://jsfiddle.net/likestothink/kgL4q0jg/
I am doing an assignment for school and it is a restaurant website. I am working on the "order online" page. I must include a table in my website so I put it in my form with all of my menu items and their cost and the total. The problem I am having is: I have each menu item wrapped in a form element in order to make my Javascript work but when I try to validate it, I get errors because my fieldset is outside of a form element and if I move it around I go from 3 errors to 150 and I just don't really understand why. Also, this is causing a problem with my reset button because the reset button is in a different form element then each menu item, and finally I can't get my grand total at the bottom working.
<!DOCTYPE html>
<html>
<head>
<title>Lefebvre-Oliver Final Assignment</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="Final2.css" media="screen">
</head>
<body>
<script type="text/javascript">
function multiply(element) {
var row = element.parentNode.parentNode;
row.querySelectorAll('input[name=TOTAL]')[0].value = element.value * row.querySelectorAll('input[name=PRICE]')[0].value;
}
</script>
<form id="contact-form" action="script.php" method="post">
<input type="hidden" name="redirect" value="file:///D:/Final%20Project/index.html"/>
<h1>Order Online</h1>
<fieldset>
<legend>Basic Information</legend>
<ul>
<li>
<label for="name">Name:</label>
<input type="text" name="name" id="name" value=""/>
</li>
<li>
<label for="address">Address:</label>
<input type="text" name="address" id="address" value=""/>
</li>
<li>
<label for="pwd">City</label>
<input type="text" name="city" id="city" value=""/>
</li>
</ul>
<div>Would you like the same order as last time?</div>
<label for="yes">Yes</label>
<input type="radio" name="yes" id="yes" value="yes" checked="checked">
<label for="no">No</label>
<input type="radio" name="yes" id="no" value="no"/>
<div>Special Instructions:</div>
<textarea name="comments" id="comments" cols="25" rows="3"></textarea>
</fieldset>
<fieldset>
<legend>Order</legend>
<table id="OrderTable" style="width:100%">
<tr>
<th>Food Item</th>
<th>Quantity</th>
<th>Unit Price in ($)</th>
<th>Total Price in ($)</th>
</tr>
<tr>
<th>Appetizers</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="8" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Spiedini di Albicocca al Prosciutto Crudo</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="9" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Tortino di Gorgonzola</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="8" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<th>Soup and Salads</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Zuppa di Giorno</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="5" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Minestrone Piemontese</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="5" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Zuppa de Pesce</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="8" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Insalata Mista</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="6" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Insalata Fagioli</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="6" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<th>Pizza</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Margherita</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="10" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Sicilian</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="12" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Chicken Florentine</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="12" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<th>Pasta</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Bucatini all'Amatriciana</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="16" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Rigatoni Alla Siciliana</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="12" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Paglia e Fieno</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="14" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Orecchiette con Rapini</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="14" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Pappardelle con Sugo di Coniglio</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="15" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<th>Dessert</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Chocolate Zabaglione Cake</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="6" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Zuccotto</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="6" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Tira Misu</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="6" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<th>Beverages</th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Sparkling Water</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="2" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Coke, Iced Tea, Root Beer, Cream Soda</td>
<td><input name="QTY"></td>
<td><input name="PRICE" value="2" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Coffee and Brewed Decaf</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="3" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Cappuccino or Americano</td>
<td><input name="QTY"/></td>
<td><input name="PRICE" value="3" readonly/></td>
<td><input name="TOTAL" readonly/></td>
</tr>
<tr>
<td>Total Cost:</td>
<td></td>
<td></td>
<td><label>Total amount</label>
<input disabled></td>
</tr>
</table>
<input type="submit" id="submit" value="Submit"/>
<input type="reset" id="reset" value="Reset"/>
</fieldset>
</form>
</body>
</html>
Use a single form element around everything and you can still access the correct inputs, relative to the row.
For example, your function could look like:
function multiply(element) {
var row = element.parentNode.parentNode;
row.querySelectorAll('input[name=TOTAL]')[0].value = element.value * row.querySelectorAll('input[name=PRICE]')[0].value;
}
First it gets the row that contains the three inputs, then from there it finds the TOTAL and PRICE inputs by name using querySelectorAll.
Note: querySelectorAll isn't supported by IE7 or lower but I doubt that will matter for an assignment.