使用JavaScript添加表单值_Javascript_Forms

使用JavaScript添加表单值

javascript forms

使用JavaScript添加表单值,javascript,forms,Javascript,Forms,如何使用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"> <he

如何使用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>

非常感谢您的帮助

你可以这样做

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

是的，对于一门主要关注DOM和验证之类的课程来说。我还没有参加JavaScript课程，所以我真的很遗憾，我不知道家庭作业标签…请记住这在ie中不起作用。。。尽管如此，我相信你可以找到原因。只需在表单上单击一个侦听器。在IE中，除了不恰当地使用addEventListener之外，它是不正常的。