Question

我如何使用JavaScript从表单中添加一些值？我想在表单底部的只读文本字段中显示该值。这是我的代码到目前为止，我已经使每个表单值成为我想要添加的值：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<script type="text/javascript">
function checkAll(){
document.getElementById("notop").checked=false;
}

function uncheckAll(field)
{
for (i = 0; i < field.length; i++)
    field[i].checked = false ;
}



</script>

</head>

<body>
<div class="head">
<h3 align="center">Gourmet Pizza</h3>
</div>
<div class="main">
<form action="" method="get" name="pizza">
<table border="1" cellpadding="5" cellspacing="3">
  <tr>
    <td>Name:</td>
    <td><input name="name" type="text" id="name" /></td>
  </tr>
  <tr>
    <td>E-Mail:</td>
    <td><input name="email" type="text" id="email" /></td>
  </tr>
  <tr>
    <td>Phone:</td>
    <td><input name="name" type="text" id="phone"/></td>
  </tr>
  <tr>
    <td style="border:none"><input name="size" type="radio" value="8.00"  id="small" onclick="this.form.total.value=calculateTotal(this);" > <label for="small">Small ($8.00)</label></td>
    <td style="border:none">
    <input type="checkbox" name="topping" id="pepperoni" value="0.50" onClick="checkAll(document.pizza.topping)" class="top"/>
    <label for="pepperoni">Pepperoni
    </label> 
    <input type="checkbox" name="topping" id="sausage" value="0.50" onClick="checkAll(document.pizza.topping)" class="top" />
    <label for="sausage">Sausage
    </label>
    </td>
  </tr>
  <tr>
    <td style="border:none"><input name="size" type="radio" value="10.00" id="medium" onclick="this.form.total.value=calculateTotal(this);" /> <label for="medium">Medium ($10.00)</label></td>
    <td style="border:none">
    <input type="checkbox" name="topping" id="mushroom" value="0.50" onClick="checkAll(document.pizza.topping)" class="top"/>
    <label for="mushroom">Mushroom
    </label> 
    <input type="checkbox" name="topping" id="olive" value="0.50" onClick="checkAll(document.pizza.topping" class="top"/>
    <label for="olive">Olive
    </label>
    </td>
  </tr>
  <tr>
    <td style="border:none"><input name="size" type="radio" value="12.00" id="large" onclick="this.form.total.value=calculateTotal(this);" onselect="addTwelve()"/> <label for="large">Large ($12.00)</label></td>
    <td style="border:none">
    <input type="checkbox" name="Un_CheckAll" value="0.00" id="notop" class="none" onClick="uncheckAll(document.pizza.topping)"/>
    <label for="notop">No Toppings (Cheese Pizza)
    </label> 
    </td>
  </tr>
  <tr>
    <td colspan="2">
    Your Order:<br />s
    <textarea name="" colums="2">

    </textarea>
    </td>
  </tr>
  <tr align="center">
    <td colspan="2"><input type="submit" name="button" id="button" value="Process Order" />
      <input type="reset" name="button2" id="button2" value="Clear Order" /></td>
  </tr>
</table>
</form>
</div>
</body>
</html>

非常感谢任何帮助！

Answer 1

你可以做这样的事情

var total = 0;
window.onload = function() {
    var toppings = document.pizza.topping;
    for (var i = 0, l = toppings.length; i < l; i++) {
        toppings[i].addEventListener("change", function() {
            if (this.checked) {
                total += parseFloat(this.value);
            } else {
                total -= parseFloat(this.value);
            }
            alert(total);
        }, false);
    }
};

see example here

使用JavaScript添加表单值

1 个答案: