CODEWITHSUNDEEP
javascripthtmlforms
Shubham R
Shubham R

Reputation: 7644

Calculate Text box values of form after submit html

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.

Upvotes: -1

Views: 1616

Answers (1)

Sagar V
Sagar V

Reputation: 12478

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>

Upvotes: 1

Related Questions