I have a html page which takes hour and minute inputs for exams.
- In another html or css document I would like to essentially run a countdown timer of HH:MM. i.e. if input was 1 hour and 10 min it would countdown from 01:10 to 00:00. I am assuming there is some way of calling the input values from one module to another.
- I would also like to make this countdown start when a start button is pressed
- The display module (Exam Display) is split into 4 quarters such that 4 exam timers can run concurrently. (I am hoping that in the case that there is no input value, when the start button is pressed nothing will happen with that particular timer)
I am attaching both jsfiddle and the code.
For ExamSetup.html & ExamSetup.css
-https://jsfiddle.net/vf113tux/1/
OR
ExamSetup.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" type="text/css" href="ExamSetup.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div id="Exam 1">
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Exam 1</legend>
<label for="Exam Name">Name</label>
<input id="Name1" type="text" placeholder="Name">
<label for="Exam Writing Time">Writing Time</label>
<input id="Writing1H" type="number" placeholder="Hours" min="0" max="12">
<input id="Writing1M" type="number" placeholder="Minutes" min="0" max="60">
</fieldset>
</form>
</div>
<div id="Exam 2">
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Exam 2</legend>
<label for="Exam Name">Name</label>
<input id="Name2" type="text" placeholder="Name"
<label for="Exam Writing Time">Writing Time</label>
<input id="Writing2H" type="number" placeholder="Hours" min="0" max="12">
<input id="Writing2M" type="number" placeholder="Minutes" min="0" max="60">
</fieldset>
</form>
</div>
<div id="Exam 3">
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Exam 3</legend>
<label for="Exam Name">Name</label>
<input id="Name3" type="text" placeholder="Name">
<label for="Exam Writing Time">Writing Time</label>
<input id="Writing3H" type="number" placeholder="Hours" min="0" max="12">
<input id="Writing3M" type="number" placeholder="Minutes" min="0" max="60">
</fieldset>
</form>
</div>
<div id="Exam 4">
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>Exam 4</legend>
<label for="Exam Name">Name</label>
<input id="Name4" type="text" placeholder="Name">
<label for="Exam Writing Time">Writing Time</label>
<input id="Writing4H" type="number" placeholder="Hours" min="0" max="12">
<input id="Writing4M" type="number" placeholder="Minutes" min="0" max="60">
</fieldset>
</form>
<div class ="span7 text-center">
<a href="Display.html"><button type="submit" button id="button" class="btn btn-lg btn-primary">Next</button>
</div>
</div>
</body>
</html>
ExamSetup.css:
#charset "utf-8";
/* CSS Document */
html, body { height: 100%; padding: 0; margin: 0; }
div { width: 50%; height: 50%; float: left; }
button {
text-align: center;
}
For ExamDisplay.html & ExamDisplay.css
- https://jsfiddle.net/890e2dmq/ (Note for backgrounds are there simply to show the quarter partitions)
OR
ExamDisplay.html:
Untitled Document
<body>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
<button id="button" class="btn btn-lg btn-success">Start</button>
</body>
</html>
ExamDisplay.css:
#charset "utf-8";
/* CSS Document */
html, body { height: 100%; padding: 0; margin: 0; }
div { width: 50%; height: 50%; float: left; }
#div1 { background: #DDD; }
#div2 { background: #AAA; }
#div3 { background: #777; }
#div4 { background: #444; }
Thank you very much! And I have checked through quite extensively for the last day but have found it rather difficult to find a proper simple countdown that I require. Many of the developed programs out are mainly for dates or they are for DD:HH:MM:SS and I was unable to edit the code to incorporate only HH:MM.
Ok, now the improoved version with 4 timers (CSS is up to you).
JSFIDDLE (full version)
$(document).ready(function(){
function start1(){
var h1 = $('input:text[name=h1]').val();
var m1 = $('input:text[name=m1]').val();
$('.counter1').html(h1+' : '+m1);
var inter1 = setInterval(function(){
m1--;
if(m1 == 0 && h1 != 0){
m1 = 59;
h1--;
}else{
if(h1 == 0 && m1 == 0){
clearInterval(inter1);
}
}
$('.counter1').html(h1+' : '+m1);
},60000)
}
$('#sub1').click(function(){
start1();
})
});
body{
position: relative;
}
.counter1{
width: 50%;
height: 50px;
background-color: rgba(255,0,0,0.5);
left: 0%;
top: 0px;
}
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src ="yourPathToYourJavascript.js"></script>
<div class="counter1"></div>
<input type="text" name="h1" value="Hours"></input><br>
<input type="text" name="m1" value="Minutes"></input><br>
<input type="submit" id="sub1" value="Couter #1"></input><br>
Related
I am trying to make an HTML form, and I am trying to insert the "Plus" icon to the Input field. How would I do that, since I've already tried modifying it via CSS? Can someone help?
Also, I also want to create a "click" event which leads me to a secondary page where I can choose the Rooms and the capacity in my form, and go back once I am done with it. Any thoughts how I would do that?
This is my CSS Code:
*{
margin:0;
box-sizing: border-box;
padding:0px;
}
body{
height:100vh;
display: flex;
background-color: rgb(87,189,130);
}
.field-property,
.field-room,
.field-name-room,
.field-capacity,
.base-tariff{
position: relative;
top:30%;
left:100%;
}
.allinputs{
margin:10px;
padding:5px;
border-radius: 10px;
width:100%;
}
.client-form{
align-items: center;
justify-content: center;
display: flex;
}
This is my HTML Code:
<body>
<h1 class="client-form">Client Integration Form</h1>
<form>
<div class="field-property">
<label for="property Name">Property Name
<input type="text" class= "allinputs" name="name" placeholder="Property Name" required />
</label>
</div>
<div class="field-room">
<label for="rooms">Rooms
<input type="text" class="allinputs" name="name" placeholder="Rooms" required />
<div class="material-icon">
<i class="fa fa-plus-circle fa-2x" aria-hidden="true"></i>
</label>
</div>
</div>
<!-- Adding the Icon for Adding Rooms -->
<div class="field-name-room">
<label for="room Selected">Room Selected
<!-- Adding a Drop Down Value for the rooms -->
<select class="all inputs">
<option class="options">Pink Room</option>
<option class="options">Red Room</option>
<option class="options">Green Room</option>
</select>
</label>
</div>
<div class="field-capacity">
<label for="capacity">Capacity</label>
<input type="number" class="allinputs">
</div>
<div class="base-tariff">
<label for="base Tariff">Base Tariff of the Room:</label>
<input type="value" class="allinputs" name="name" placeholder="Base Tariff">
</div>
<!-- Yet to be decided how to integrate this -->
<!-- <div class="field-billing">
<label for="billing">Billing:</label>
</div>
<div class="field-phone">
<label for="phone Number">Phone Number</label>
<input type="number" class="allinputs">
</div>
</form>
</div>
</body>
</html>
To insert the '+' sign use a placeholder.
<input type="" id="" name="" placeholder="+">
A click event could be achieved by a simple hyperlink <a href=''>Example Hyperlink</a>
when submit with empty value, there will should be error-msg at both of inputs. However, it is working correctly.
In side of script is validation for empty value if input empty value error-msg will be changed to display:block
this is the code below, anyone could help me i am very appreciate.
function validation(thisForm) {
//validation of fName
if (!thisForm.fname.value.length) {
document.getElementById('fname-error').style.display = "block";
return false;
}
//validation of lName
if (!thisForm.lname.value.length) //if there is no input to lName
{
document.getElementById('lname-error').style.display = "block";
return false;
}
return true;
}
.error-msg {
display: none;
color: red;
border: 1px solid;
width: 120px;
margin-left: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8">
<title>error-msg will not display correctly at the same time</title>
</head>
<body>
<form action="#" onSubmit="return validation(this);">
<fieldset>
<legend>Application Name</legend>
<div class="name">
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<span class="error-msg" id="fname-error">First name is required</span>
</div>
<div class="name">
<label for="lname">Last Name </label>
<input type="text" id="lname" name="lname" size="50">
<span class="error-msg" id="lname-error">Last name is required</span>
</div>
</fieldset>
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
The problem is that you're returning early in your validation() function. Change it to this:
<!DOCTYPE html>
<html>
<head>
<link rel ="stylesheet" type="text/css" href="456.css">
<meta charest ="utf-8">
<title>error-msg will not display correctly at the same time</title>
<script>
function validation(thisForm) {
//validation of fName
if(!thisForm.fname.value.length)
{
document.getElementById('fname-error').style.display="block";
}
else
{
document.getElementById('fname-error').style.display="none";
}
//validation of lName
if(!thisForm.lname.value.length) //if there is no input to lName
{
document.getElementById('lname-error').style.display="block";
}
else
{
document.getElementById('lname-error').style.display="none";
}
if(!thisForm.fname.value.length || !thisForm.lname.value.length)
{
return false
}
return true;
}
</script>
<style>
.error-msg {
display: none;
color:red;
border: 1px solid;
width: 120px;
margin-left: 10px;
}
</style>
</head>
<body>
<form action="#" onSubmit="return validation(this);">
<fieldset>
<legend>Application Name</legend>
<div class="name">
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<span class="error-msg" id="fname-error">First name is required</span>
</div>
<div class="name">
<label for="lname">Last Name </label>
<input type="text" id="lname" name="lname" size="50">
<span class="error-msg" id="lname-error">Last name is required</span>
</div>
</fieldset>
<input type="submit" name="submit" value="submit"/>
</form>
</body>
</html>
I have used bootstrap form but submit button is not getting aligned below Name and Number field in form. I tried to use various css styles but could not align it. See screenshot submit button is not aligned properly.
In app.js:
function editContact(id) {
document.getElementById("search").style.display = 'none';
document.getElementById("contactlist").style.display = 'none';
document.getElementById("editcontact").style.display = '';
document.getElementById("editcontact").innerHTML =
`
<form>
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
`;
}
In index.css:
.form-group{
padding-left: 30px;
padding-right: 30px;
}
.form .btn-primary{
padding-left: 30px;
}
I also tried to wrap submit button inside div tag but still no effect.
form .btn-primary{
margin-left: 30px;
}
not .form this should also be margin otherwise the text would be shifted 30 pixels but the button remain in the same place
Instead of adding padding to .form-group and .btn what you can do is add padding to the form itself, just add a class to the form and add css against it.
Working example -
function editContact(id) {
document.getElementById("editcontact").innerHTML =
`
<form class="form">
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
`;
}
editContact(1);
.form{
padding: 0 30px;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="editcontact">
</div>
</body>
</html>
Notice, I added .form class, and adding to it.
Here is a plunker of the above snippet https://plnkr.co/edit/R2ku3opNtn3KsBDYKYr3?p=preview
wrap button inside form-group div (new ) P.S try this snippet in expanded snippet view
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<form>
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
I am working on simple feedback form where I have 3 fields Name,rating(Poor, fair, good) and feedback comment.
In my form I want user to select a single rating at a time and submit the form with selected rating & feedback comments.
I have created the <div> elements for each rating and make them as radio type.
I don't want to show the radio button on the form, but I want my Div to behave as radio button.
Also how to fix the border of Divs?
I am attaching the screenshots.
First one, how I want it to appear and second one is how my current code is appearing on UI.
Below is my form code & CSS
<div id="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>
<p><Strong>We'd love your feedback.</Strong><br></p>
<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>
<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
Your Name :<br>
<input type="text" name="name" value=""><span></span><br>
<div class="feedbackCl" >
<input id="overall_0" name="overall" type="radio" value="1" tabindex="0" aria-describedby="o1-l">
<label for="overall_0" class="labelClass">— —</label>
<span class="screen_reader" id="o1-l">Poor</span>
</div>
<div class="feedbackCl">
<input id="overall_1" name="overall" type="radio" value="2" tabindex="0" aria-describedby="o2-l">
<label for="overall_1" class="labelClass">—</label>
<span class="screen_reader" id="o2-l">Fair</span>
</div>
<div class="feedbackCl">
<input id="overall_2" name="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l">
<label for="overall_2" class="labelClass">+ —</label>
<span class="screen_reader" id="o3-l">Good</span>
</div>
<br>
<span><br></span><br>
<textarea style="overflow-x: hidden;" id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" >
</textarea><br>
<span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br>
<input type="submit" name="feedbackForm" value="Submit">
</form>
</div>
</div>
CSS Code
.feedbackCl {
float: left;
box-sizing: border-box;
padding-top: 5px;
width: 9%;
text-align: center;
height: 40px;
}
input[type="radio" i] {
-webkit-appearance: radio;
box-sizing: border-box;
}
.labelClass{
margin-right: 0 !important;
height: 28px;
background-color: #fff !important;
color: #0511ac;
box-sizing: border-box;
}
You can do something like the following:
$('.radio-group .feedbackCl').click(function(){
$(this).parent().find('.feedbackCl').removeClass('selected');
$(this).addClass('selected');
var val = $(this).attr('data-value');
$(this).parent().find('input').val(val);
console.log('You have selected: '+val);
});
.feedbackCl {
display: inline-block;
width: 70px;
height: 30px;
border: 2px solid lightblue;
cursor: pointer;
margin: 2px 0;
text-align: center;
line-height: 30px;
}
.radio-group{
position: relative;
}
.feedbackCl.selected{
border-color: blue;
background-color: orange;
}
span{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>
<p><Strong>We'd love your feedback.</Strong><br></p>
<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>
<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
Your Name :<br>
<input type="text" name="name" value=""><span></span><br>
<div class="radio-group">
<div class="feedbackCl" data-value="1">— —
<span>Poor</span>
</div>
<div class="feedbackCl" data-value="2">-
<span>Fair</span>
</div>
<div class="feedbackCl" data-value="3">+ —
<span>Good</span>
</div>
<div class="feedbackCl" data-value="4">+
<span>Very good</span>
</div>
</div>
<br>
<span><br></span><br>
<textarea style="overflow-x: hidden;" id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" >
</textarea><br>
<span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br>
</form>
</div>
</div>
Try my snippet! I dont use any js code, just html and css! hope this can help you!
.feedback{float:left;width:100%;margin-top:10px}
.feedbackCl{float:left;width:15%}
.feedbackCl>input[type="radio"]{display:none}
.feedbackCl>input[type="radio"]:checked+label>.sight{border:solid 2px #00f;background:orange}
.feedbackCl>label{width:100%;height:100%;display:inline-block;text-align:center}
.feedbackCl>label>.sight{width:100%;float:left;border:solid 1px #ccc;padding:10px 0;color:#00f;margin-left:1px}
.feedbackCl>label>.screen_reader{width:100%;float:left;padding-top:10px}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>
<p><Strong>We'd love your feedback.</Strong><br></p>
<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>
<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
Your Name :<br>
<input type="text" name="name" value=""><span></span><br>
<div class="feedback">
<div class="feedbackCl" >
<input id="overall_0" name="overall" type="radio" value="1" tabindex="0" aria-describedby="o1-l">
<label for="overall_0" class="labelClass">
<span class="sight">— —</span>
<span class="screen_reader" id="o1-l">Poor</span>
</label>
</div>
<div class="feedbackCl">
<input id="overall_1" name="overall" type="radio" value="2" tabindex="0" aria-describedby="o2-l">
<label for="overall_1" class="labelClass">
<span class="sight">—</span>
<span class="screen_reader" id="o2-l">Fair</span>
</label>
</div>
<div class="feedbackCl">
<input id="overall_2" name="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l">
<label for="overall_2" class="labelClass">
<span class="sight">+—</span>
<span class="screen_reader" id="o3-l">Good</span>
</label>
</div>
<div class="feedbackCl">
<input id="overall_3" name="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l">
<label for="overall_3" class="labelClass">
<span class="sight">+</span>
<span class="screen_reader" id="o3-l">Very Good</span>
</label>
</div>
</div>
<br>
<span><br></span><br>
<textarea style="overflow-x: hidden;" id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" >
</textarea><br>
<span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br>
<input type="submit" name="feedbackForm" value="Submit">
</form>
</div>
</div>
</body>
</html>
Rather than using radio buttons, you can add an onClick event to each div which will populate a hidden input.
<input type="text" name="name" value=""><span></span><br>
<div class="feedbackCl" onclick="setRating(1)">
<label for="overall_0" class="labelClass">- -</label>
<span class="screen_reader" id="o1-l">Poor</span>
</div>
<div class="feedbackCl" onclick="setRating(2)">
<label for="overall_1" class="labelClass">-</label>
<span class="screen_reader" id="o2-l">Fair</span>
</div>
Javascript
<script>
function setRating(v) {
document.getElementById('overall').value = v;
}
</script>
I think you wish to use the radio inputs, because you don't know another way to get only one form field to track on submit.
Here, I use a hidden input field to store which div (poor - fair - good) has been selected.
And divs are easy to style like you want.
;)
$(".feedbackCl").on("click",function(){
$(".feedbackCl").removeClass("selected").css({"opacity":1});;
$(this).addClass("selected");
$(".feedbackCl").not(".selected").css({"opacity":0.6});
console.log("Value stored in the hidden input of the form: "+$(this).attr("id"));
$("#feedbackResult").val( $(this).index() );
});
.feedbackCl {
float: left;
box-sizing: border-box;
padding-top: 5px;
width: 9%;
text-align: center;
height: 40px;
border:1px solid grey;
display:block;
}
.feedbackCl.selected{
border:2px solid blue;
}
#poor{
background-color:red;
}
#fair{
background-color:yellow;
}
#good{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;">
<a id="modal_close" href="#">close <b>X</b></a>
</div>
<p><Strong>We'd love your feedback.</Strong><br></p>
<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>
<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
Your Name :<br>
<input type="text" name="name" value=""><span></span><br>
<br>
<div class="feedbackCl" id="poor">
Poor
</div>
<div class="feedbackCl" id="fair">
Fair
</div>
<div class="feedbackCl" id="good">
Good
</div>
<input type="hidden" id="feedbackResult" name="feedbackResult">
<br>
<br>
<br>
<textarea id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" ></textarea><br>
<span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br>
<br>
<input type="submit" name="feedbackForm" value="Submit">
</form>
<br>
</div>
</div>
The drupal page: http://www.vertexwaterfeatures.com/herbicide-calculators
The point is that I do not want the template so I figured I would just make a plain html page to drop in the site but the js wont work - I tried link but that didn't work either.
I am obviously missing something...
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Herbicide Calculators</title>
<style type="text/css">
.calculator {float: left;width: 280px;padding: 5px;margin: 0 5px 5px;border-radius: 5px;-moz-border-radius: 5px;border-width: thin;border-style: solid;color: #000;}
.calculator .form-row {overflow: auto;padding: 2px 2px;border: thin solid #D6D6D6;font-family: Arial, Helvetica, sans-serif;font-size: 14px;}
.calculator .form-row LABEL {float: left;width: 150px;line-height: 1.1em;}
.calculator .form-row INPUT {float: right;width: 110px;}
.calculator .form-row.last-row {background-color: #E0E0E0;}
.calculator .form-row-buttons {text-align: center;margin-top: 5px;}
.calculator SMALL {line-height: 0.7em;font-size: 10px;}
.calculator DD {font-size: 11px;font-style: italic;margin-bottom: 0;}
.calculator DT {font-size: 11px;
font-weight: bold;
}
</style>
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('#a_qty_calculator').submit(function() {
a_qty_calc();
return false;
});
$('#b_qty_calculator').submit(function() {
b_qty_calc();
return false;
});
});
function a_qty_calc() {
var pr = parseFloat($('#pr').val());
var sw = parseFloat($('#sw').val());
var ad = parseFloat($('#ad').val());
var dc = parseFloat($('#dc').val());
var pg = parseFloat($('#pg').val());
var ta = document.getElementById('totalPrice')
var ta = Math.round((pr * sw) / 43560 * 100) / 100;
var taf = Math.round(ad * ta * 100) / 100;
var ga = Math.round((taf * dc * 2.72) / pg * 100) / 100;
var oa = Math.round(ga * 128 * 100) / 100;
var gab = Math.round(ga / 1000 * 100) / 100;
var oab = Math.round(gab * 128 * 100) / 100;
$('#ta').val(ta);
$('#taf').val(taf);
$('#ga').val(ga);
$('#oa').val(oa);
$('#gab').val(gab);
$('#oab').val(oab);
}
function b_qty_calc() {
var wad = parseFloat($('#wad').val());
var wdc = parseFloat($('#wdc').val());
var wpg = parseFloat($('#wpg').val());
var wta = parseFloat($('#wta').val());
var wtaf = Math.round(wad * wta * 100) / 100;
var wga = Math.round((wtaf * wdc * 2.72) / wpg * 100) / 100;
var woa = Math.round(wga * 128 * 100) / 100;
var wgab = Math.round(wga / 1000 * 100) / 100;
var woab = Math.round(wgab * 128 * 100) / 100;
$('#wtaf').val(wtaf);
$('#wga').val(wga);
$('#woa').val(woa);
$('#wgab').val(wgab);
$('#woab').val(woab);
}
</script>
</head>
<body>
<form action="" class="calculator" id="a_qty_calculator" method="post">
<h3>Perimeter Treatment</h3>
<div class="form-row optional">
<label for="pr">Perimeter</label>
<input id="pr" name="pr" type="text" value="0" />
</div>
<div class="form-row optional">
<label for="sw">Swath Width</label>
<input id="sw" name="sw" type="text" value="0" />
</div>
<div class="form-row optional">
<label for="ad">Average Depth</label>
<input id="ad" name="ad" type="text" value="0" />
</div>
<div class="form-row optional">
<label for="dc">Desired Concentration</label>
<input id="dc" name="dc" type="text" value="0" />
</div>
<div class="form-row optional">
<label for="pg">Lbs of AI/Gallon</label>
<input id="pg" name="pg" type="text" value="0" />
</div>
<div class="form-row optional last-row">
<label for="ta">Treatment Acres</label>
<input id="ta" name="ta" type="text" value="0" />
</div>
<div class="form-row optional last-row">
<label for="taf">Treatment Area Acre Ft</label>
<input id="taf" name="taf" type="text" value="0" />
</div>
<div class="form-row optional last-row">
<label for="ga">Gallons to Apply PPM</label>
<input id="ga" name="ga" type="text" value="0" />
</div>
<div class="form-row optional last-row">
<label for="oa">Ounces to Apply PPM</label>
<input id="oa" name="oa" type="text" value="0" />
</div>
<div class="form-row optional last-row">
<label for="gab">Gallons to Apply PPB</label>
<input id="gab" name="gab" type="text" value="0" />
</div>
<div class="form-row optional last-row">
<label for="oab">Ounces to Apply PPB</label>
<input id="oab" name="oab" type="text" value="0" />
</div>
<div class="form-row-buttons">
<input type='submit' id='submit' value="Calculate" />
<input name="reset" type="reset" value="Reset" />
</div>
</form>
<form action="" class="calculator" id="b_qty_calculator" method="post">
<h3>Whole Lake Treatment</h3>
<div class="form-row optional">
<label for="wta">Treatment Acres</label>
<input id="wta" name="wta" type="text" value="0" />
</div>
<div class="form-row optional">
<label for="wad">Average Depth</label>
<input id="wad" name="wad" type="text" value="0" />
</div>
<div class="form-row optional">
<label for="wdc">Desired Concentration</label>
<input id="wdc" name="wdc" type="text" value="0" />
</div>
<div class="form-row optional">
<label for="wpg">Lbs of AI/Gallon</label>
<input id="wpg" name="wpg" type="text" value="0" />
</div>
<div class="form-row optional last-row">
<label for="wtaf">Treatment Area Acre Ft</label>
<input id="wtaf" name="wtaf" type="text" value="0" />
</div>
<div class="form-row optional last-row">
<label for="wga">Gallons to Apply PPM</label>
<input id="wga" name="wga" type="text" value="0" />
</div>
<div class="form-row optional last-row">
<label for="woa">Ounces to Apply PPM</label>
<input id="woa" name="woa" type="text" value="0" />
</div>
<div class="form-row optional last-row">
<label for="wgab">Gallons to Apply PPB</label>
<input id="wgab" name="wgab" type="text" value="0" />
</div>
<div class="form-row optional last-row">
<label for="woab">Ounces to Apply PPB</label>
<input id="woab" name="woab" type="text" value="0" />
</div>
<div class="form-row-buttons">
<input name="submit" type="submit" value="Calculate"/>
<input name="reset" type="reset" value="Reset" />
</div>
</form>
</body>
</html>
You should include jquery library before your <script> tag, just like below;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Then it will probably work..
i dont see where you're including the a jquery library, all your code is in a jquery document .ready to use it in html you'll have to include jquery: "". by the way drupal might have it included automatically which is why its working there.
Yes it seems you are, where is your jquery library included?