Question

我正在尝试设计一个表单。接受输入并在点击计算后给出输出。文本字段＆＃39;状态＆＃39;只接受2个大写字母

我被困在创建计算按钮。

计算按钮需要确定客户行驶的里程数和客户应付的总费用。

以下是我的表格：

＆＃13;

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;
  }
}

＆＃13;

body {
  background-color: powderblue;
}

.upper {
  text-transform: uppercase;
}

＆＃13;

<!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>

＆＃13;

我设计了一个脚本来验证该州应该只包含大写字母。

我想计算不。驾驶里程可以通过获得起步里程和结束里程来实现。

计算客户应付的总费用：          我必须使用常数，每天15美元的费用和0.12美元的里程费。

有没有办法在单击提交按钮时获得所有这些结果。

Answer 1

我创建了2个输入字段，一个用于存储总距离，另一个用于存储成本。两者都被禁用。

添加按钮进行计算。

然后添加这样的函数，并在按钮单击时调用它。

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>

提交html后计算表单的文本框值

1 个答案: