I am trying to design a form. which takes input and after clicking on calculate gives output.
text field 'State' accepts only 2 uppercase letters
I am stuck in creating Calculate button.
The calculate button needs to determine the number of miles traveled by the customer and the total charge due from the customer.
below is my form:
function ValidateData() {
var InputText = document.getElementById('state').value;
var Expression = /^[zA-Z]*$/
if (InputText.search(Expression) == -1) {
alert("Must contain only A-Z");
return false;
}
}
body {
background-color: powderblue;
}
.upper {
text-transform: uppercase;
}
<!DOCTYPE html>
<html>
<head><b>Calculate Rental Charges</b></head><br>
<body>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="">
<br> Address:
<br>
<input type="text" name="address" value="">
<br> city:
<br>
<input type="text" name="city" value="">
<br> State:
<br>
<input type="text" id="state" name="State" cssclass="upper" value="">
<br> Zip code:<br>
<input type="text" name="zipcode" value="">
<br> Beginning odometer reading(in miles):<br>
<input type="text" name="zipcode" value="">
<br> Ending odometer reading(in miles):<br>
<input type="text" name="zipcode" value="" maxlength="10">
<br>
<br>
<input type="submit" value="Submit" OnClientClick="return ValidateData()">
</form>
I have designed one script which validates that state should have only upper case letters.
I want to calculate no. of miles driven which can be done by getting difference of starting miles and ending miles.
For calculating the total charge due from the customer.:
i have to use a constant for the $15 per day charge and the $0.12 mileage rate.
IS there any way to get all this result on single click of submit button.
I created 2 input fields, one to store the total distance and other one is to store the cost. Both are disabled.
Add a button to calculate.
Then add a function like this and call it on button click.
function calc(){
var totalMile = parseInt(document.getElementsByName("endMile")[0].value)-parseInt(document.getElementsByName("startMile")[0].value)
document.getElementById("result").value=totalMile;
var cost=(totalMile*0.12)+15
document.getElementById("cost").value='$'+cost;
}
function ValidateData() {
var InputText = document.getElementById('state').value;
var Expression = /^[A-Z]*$/
if (InputText.search(Expression) == -1) {
alert("Must contain only A-Z");
return false;
}
}
function calc(){
var totalMile = parseInt(document.getElementsByName("endMile")[0].value)-parseInt(document.getElementsByName("startMile")[0].value)
document.getElementById("result").value=totalMile;
var cost=(totalMile*0.12)+15
document.getElementById("cost").value='$'+cost;
}
body {
background-color: powderblue;
}
.upper {
text-transform: uppercase;
}
<!DOCTYPE html>
<html>
<head><b>Calculate Rental Charges</b></head><br>
<body>
<form method="post" action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="">
<br> Address:
<br>
<input type="text" name="address" value="">
<br> city:
<br>
<input type="text" name="city" value="">
<br> State:
<br>
<input type="text" id="state" name="State" cssclass="upper" value="">
<br> Zip code:<br>
<input type="text" name="zipcode" value="">
<br> Beginning odometer reading(in miles):<br>
<input type="text" name="startMile" value="">
<br> Ending odometer reading(in miles):<br>
<input type="text" name="endMile" value="" maxlength="10">
<br>
<button type="button" onclick="calc();">Calc</button>
<br />
Total Miles : <br />
<input disabled id="result" />
<br />
Total Cost <br />
<input disabled id="cost" />
<br />
<br>
<input type="submit" value="Submit" Onclick="return ValidateData();">
</form>
Related
how can i do dynamic form calculation without submit? submitting is about php server. I need to calculate this form with limiting max values. Example result value can't be above buy value. when above must give error submit button disabled.
I can't find any solution.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("#storage","#result","#account").on(keyup, change(function(){
var abc = $("#abc").val();
var price = $("#price").val();
var storage = $("#capacity").val() - $("#abc").val();
$("#storage").val(storage);
var result = $("#price").val() * $("#abc").val();
$("#result").val(result);
var account = buy - result;
$("#account").val(account);
});
});
</script>
</head>
<body>
<form method="post" action="" >
<input id="buy" type="hidden" class="form-control" name="buy" value="5000000" />
<input type="hidden" id="capacity" class="form-control" name="capacity" value="1000000" />
Storage : <input id="storage" type="text" class="form-control" name="storage" min="0" max="1000000" value=""/><br>
Abc: <input id="abc" type="text" class="form-control" name="abc" min="0" max="1000000" value="" /> <br>
Price: <input id="price" type="text" class="form-control" name="price" value="15" /> <br>
Result: <input id="result" type="text" class="form-control" name="result" value=""/> <br>
Account: <input id="account" type="text" class="form-control" name="account" max="5000000" value="" /> <br>
<input type="button" id="submit" value="submit">
</form>
</body>
</html>
Use an input / keyup event listener. For example (Vanilla JS):
document.getElementById('myInput').addEventListener("keyup", function() {
console.log(document.getElementById("myInput").value);
// Do your stuff here
});
<input id="myInput" />
Or with jQuery:
$('#myInput').keyup(function() {
console.log($("#myInput").val());
// Do your stuff here
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myInput" />
Although this is heplful, JavaScript (besides Node) is client-side and can be easily overriden, so make sure you evaluate the input in the backend too.
function myFunc() {
console.log("entered");
document.write('Submitted Data');
var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;
document.writeln("Your full name is:" + firstname + lastname);
}
<form>
<label> Firstname </label>
<input type="text" name="firstname" id="fname" size="15" /> <br> <br>
<label> Lastname</label>
<input type="text" name="lastname" id="lname" size="15" /> <br> <br>
<label>
Gender :
</label><br>
<input type="radio" name="male" /> Male <br>
<input type="radio" name="female" /> Female
<br>
<br>
<input type="button" value="Submit" onclick="myFunc()" />
</form>
After clicking on submit, it is not getting first name and showing an error as value null in the console. Can anyone please help? This entire code is saved in one HTML page
That is because of this line document.write('Submitted Data');. document.write delete the existing html so in the next line where you are using document.getELementById is not able to find the dom element
function myFunc() {
var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;
document.writeln("Your full name is:" + firstname + lastname);
}
<body bgcolor="Lightskyblue">
<br>
<br>
<form>
<label> Firstname </label>
<input type="text" name="firstname" id="fname" size="15" /> <br> <br>
<label> Lastname</label>
<input type="text" name="lastname" id="lname" size="15" /> <br> <br>
<label>
Gender :
</label><br>
<input type="radio" name="male" /> Male <br>
<input type="radio" name="female" /> Female
<br>
<br>
<input type="button" value="Submit" onclick="myFunc()" />
</form>
</body>
I'm trying to get user input from an html form into an array, by using getElementsByClassName.
It works using getElementsById("...").value and then push it into the empty array. But when I try to do it with getElementsByClassName, I get a htmlcollection returned and something seems to go wrong. It doesn't register the user input.
Any help is strongly appreciated, I've been trying to find a solution all day...
<title>Word Input</title>
<form>
<input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br>
<input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br>
<input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br>
<input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br>
<input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br>
<button id="submit"> Submit </button>
</form>
<script>
document.getElementById("submit").addEventListener("click", handler9);
function handler9() {
let vocabEnglish = [];
let englishWords = document.getElementsByClassName("englishWord");
for (let i = 0; i < englishWords.length; i++) {
let englishWord = englishWords[i].innerText;
vocabEnglish.push(englishWord);
}
}
console.log(vocabEnglish);
</script>
I expect the words to be pushed into an array, but I get returned an empty one.
A few issues:
Your indentation is off, and putting it right reveals that the console.log happens outside of the function that has the local variable vocabEnglish. So obviously it is undefined outside the function.
The value of an input element is not retrieved via the innerText property, but value.
When you click the button the form is submitted, and a reload of the page happens, whereby you lose the output. Cancel the submission with e.preventDefault
Corrected code:
document.getElementById("submit").addEventListener("click", handler9);
function handler9(e) {
let vocabEnglish = [];
let englishWords = document.getElementsByClassName("englishWord");
for (let i = 0; i < englishWords.length; i++) {
let englishWord = englishWords[i].value;
vocabEnglish.push(englishWord);
}
console.log(vocabEnglish);
e.preventDefault()
}
use value instead of innerText
I've made an example here, it still prints to the console for you to view.
document.getElementById("submit").addEventListener("click", handler9);
function handler9() {
let vocabEnglish = [];
let englishWords = document.getElementsByClassName("englishWord");
for (let i = 0; i < englishWords.length; i++) {
let englishWord = englishWords[i].value;
vocabEnglish.push(englishWord);
}
console.log(vocabEnglish);
}
<form>
<input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br>
<input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br>
<input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br>
<input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br>
<input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br>
<button id="submit"> Submit </button>
</form>
<form>
<input type="text" class="englishWord"> <input type="text" class="spanishWord">
<br> <br>
<input type="text" class="englishWord"> <input type="text" class="spanishWord">
<br> <br>
<input type="text" class="englishWord"> <input type="text" class="spanishWord">
<br> <br>
<input type="text" class="englishWord"> <input type="text" class="spanishWord">
<br> <br>
<input type="text" class="englishWord"> <input type="text" class="spanishWord"> <br> <br>
<button id="submit"> Submit </button>
</form>
<script>
document.getElementById("submit").addEventListener("click", handler9);
function handler9() {
let vocabEnglish = [];
let englishWords = document.getElementsByClassName("englishWord");
for (let i = 0; i < englishWords.length; i++) {
let englishWord = englishWords[i].value;
vocabEnglish.push(englishWord);
}
}
console.log(vocabEnglish);
</script>
Why wont my popup window pop up?
My user should enter information for an appointment. Once Submit is hit a document window should pop up. The submit button appears to work. The clear button is working also. I programmed a function to handle the window and set the onSubmit to return the function.
< script type = "text/javascript" >
function popUpWindow() { //window should return user's name in a window
newWin = window.open('', 'NewWin', 'toolbar=no,status=no,width=500,height=200');
newWin.document.write("<body bgcolor='yellow'><h3>Appointment Confirmation</h3>);
newWin.document.write("
Your name is: " + document["
form "].name.value);
newWin.document.close();
}
</script>
<html>
<head>
<title>Project</title>
</head>
//this form should accept user's input
<body>
<form name="form" onSubmit="return popUpWindow();">
Please enter your name:
<input type="text" name="name" value="" size="50" />
</p>
<p>
Address:
<input type="text" name="address" size="50" />
</p>
<p>
Phone:
<input type="text" name="area_code" size="10" />
</p>
<p>
Email:
<input type="text" name="email" value="" size="20" />
</p>
<p>
<legend>Stylist</legend>
</p>
<input type="radio" name="stylist" id="stylist1" value="dream" />Dream
<input type="radio" name="stylist" id="stylist2" value="aubrey" />Aubrey
<input type="radio" name="stylist" id="stylist3" value="stag" />Stag
<input type="radio" name="stylist" id="stylist1" value="halo" />Halo
<p>
<legend>Services</legend>
</p>
<input type="checkbox" name="service" id="service1" value="cut" />Cut
<br/>
<input type="checkbox" name="service" id="service2" value="relaxer" />Relaxer
<br/>
<input type="checkbox" name="service" id="service1" value="weave" />Weave
<br/>
<input type="checkbox" name="service" id="service1" value="braids" />Braids
<br/>
<input type="checkbox" name="service" id="service1" value="wash" />Wash and Style
<br/>
<input type="checkbox" name="service" id="service1" value="natural" />Natural
<br/>
<p>Leave Comments</p>
<textarea name="comments" id="comments" align="left" rows "8" cols "75"></textarea>
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</form>
</body>
</html>
I'm using a JavaScript validator from http://www.javascript-coder.com/html-form/javascript-form-validation.phtml. The problem I'm facing is that I have one button that saves the registration (here I need to check for name and last name) and the second button which checks the entire form. However, if I press any button, it checks the entire form.
<form id="ministerial" name="register" action="" method="post">
<label>Title: </label>
<input type="text" name="title" value="" />
<label>First Name: </label>
<input type="text" name="first_name" value="" />
<label>Last Name: </label>
<input type="text" name="last_name" value="" />
<label>Organization: </label>
<input type="text" name="organization" value="" />
...
<input type="submit" name="save" value="SAVE REGISTRATION" />
<input type="submit" name="submit" value="SUBMIT REGISTRATION" />
</form>
<script type="text/javascript">
var frmvalidator = new Validator("ministerial");
frmvalidator.addValidation("title","req","Please enter a title");
frmvalidator.addValidation("first_name","req","Please enter the first name");
frmvalidator.addValidation("last_name","req","Please enter the last name");
frmvalidator.addValidation("organization","req","Please enter the organization");
</script>
Maybe this will work. Add validation for proper input fields onClick:
<form id="ministerial" name="register" action="" method="post">
<label>Title: </label>
<input type="text" name="title" value="" />
<label>First Name: </label>
<input type="text" name="first_name" value="" />
<label>Last Name: </label>
<input type="text" name="last_name" value="" />
<label>Organization: </label>
<input type="text" name="organization" value="" />
...
<input type="submit" name="save" value="SAVE REGISTRATION" onclick="return btnSave_click();" />
<input type="submit" name="submit" value="SUBMIT REGISTRATION" onclick="return btnRegister_click();" />
</form>
<script type="text/javascript">
var frmvalidator = new Validator("ministerial");
function btnSave_click(){
frmvalidator.clearAllValidations();
frmvalidator.addValidation("first_name","req","Please enter the first name");
frmvalidator.addValidation("last_name","req","Please enter the last name");
return true;
}
function btnRegister_click(){
frmvalidator.clearAllValidations();
frmvalidator.addValidation("title","req","Please enter a title");
frmvalidator.addValidation("organization","req","Please enter the organization");
return true;
}
</script>
I guess you will need to write a custom validation function