html 我的Javascript函数被完全忽略了，所发生的一切就是当我单击“提交”时，我被发送回网页的顶部[已关闭]

已关闭。此问题需要更多focused。当前不接受答案。
**想要改进此问题吗？**更新问题，使其仅关注editing this post的一个问题。

1小时前关闭。
Improve this question
我的问题是什么？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flower/Ornament Order Exercise</title>
<style>
*       { box-sizing: border-box; font-family: Georgia, sans-serif; }
header      { border: 2px solid black; padding: 20px; background-color: #FF6A6A; height: 150px; border: 2px solid purple; border-radius: 15px; }
h1, h3      { color: #000000; text-align: center; margin-top: 5px; }
fieldset    { background-color: #FF6A6A; border: 2px solid #000000; border-radius: 15px; margin-left: auto; margin-right: auto; }
.row        { display: inline-block; margin-left: auto; margin-right: auto; width: 100%; }
.left       { float: left; width: 25%; padding: 5px; height: 200px; margin: 5px; border: 4px solid black; }
.right      { float: right; width: 70%; height: 200px; margin: 5px; color: #000000; margin-left: auto; margin-right: auto; }
.one        { width: 50%; float: left; color: #000000; }
.two        { width: 50%; float: right; color: #000000; margin-right: auto; }
.major      { width: 80%; background-image: url('Roses.jpg'); margin-left: auto; margin-right: auto; border-radius: 15px; padding: 5px 5px; 
          border: 2px solid #6AFFFF; background-size: cover; }
.minor      { color: #000000; }
.middle     { border-bottom: 3px solid #000000; }
legend      { background-color: #6AFF8C; color: #000000; border: 3px solid black; border-radius: 15px; font-size: 20px; font-weight: bold; }
a       { color: #FFFFFF; }
footer      { text-align: center; color: #FFFFFF; }
</style>
<script>
 function validateEntries() {
    var first;
    var last;
    var email;
    var phone;

    first = document.getElementById("firstName").value;
    last = document.getElementById("lastName").value;
    email = document.getElementById("email").value;
    phone = document.getElementById("phone").value;

    if (first == "" && last == "" && email == "" && phone == "") {
        alert("You Didn't Enter Any Contact Info!");
    } else if (first == "") {
        alert == "Please Enter your First Name!");
    } else if (last == "") {
        alert("Please Enter your Last Name!");
    } else if (phone == "" and email == "") {
        alert("Please Enter a Means of Contacting You!");
    } else if (phone.length != 10 && phone == "") {
        alert("Please Enter a Valid Phone Number in ########## Format (No Dashes!)");
    } else if (!email == "" && !email.includes("@") {
        alert("Please Enter a Valid Email Address!");
    } else {
        window.open(*not showing web address*);
    }
 }

 function CalcOrderTotal() {
    var poinsettiaTotal;
    var mistletoeTotal;
    var customTotal;
    var poinsettiaCost;
    var mistletoeCost;
    var customCost;
    var totalCost;

    poinsettiaTotal = document.getElementById("poinsettiaAmount").value;
    mistletoeTotal = document.getElementById("mistletoeAmount").value;
    customTotal = document.getElementById("customAmount").value;
    poinsettiaCost = Number(poinsettiaTotal) * 12.98;
    mistletoeCost = Number(mistletoeTotal) * 4.98;
    customCost = Number(customTotal) * 39.75;

    totalCost = poinsettiaCost + mistletoeCost + customCost;

    if (poinsettiaTotal > 20 || mistletoeTotal > 20 || customTotal > 20) {
        alert("Quantity Over 20 - Please Call for Discounted Rate!");
    } else {
        alert("Your Purchase will be $" + totalCost +"<br>Thank you for your Order!");
    }
    poinsettiaAmount.focus();
 }
</script>
</head>

<body onload="poinsettiaAmount.focus();">
<div class="major">
 <header>
    <h1>I Can't Think of a Clever Name for this Flower Store</h1>
    <h3>----<br>
        Open Monday through Thursday from 9 AM until 8 PM, closed Friday through Sunday</h3>        
 </header>
 <div>
 <form name="orderForm" id="orderForm" onsubmit="return CalcOrderTotal()">
  <fieldset>
    <legend>Flower Order Form</legend>
    <div class="middle">
        <div class = "row">
        <div class="left" style="background-image: url('Poinsettia.jpg'); background-size:    cover;"></div>
        <div class="right">
            <h2>Poinsettia</h2>
            <label>The bright red leaves of the Poinsettia will fill your home with color!</label><br>
            <label>Number of Plants Ordered: </label>
            <input type="text" id="poinsettiaAmount" name="poinsettiaAmount">
            <label> $12.98 each</label><br>
            <label>For orders OVER 20, CALL to receive Quantity Discount and Shipping Prices</label></div><br>
        </div>
        <div class="row">
        <div class="left" style="background-image: url('Mistletoe.jpg'); background-size: cover;"></div>
        <div class="right">
            <h2>Mistletoe</h2>
            <label>Start the season with a kiss under the mistletoe!</label><br>
            <label>Number of Plants Ordered: </label>
            <input type="text" id="mistletoeAmount" name="mistletoeAmount">
            <label> $4.98 each</label><br>
            <label>For orders OVER 20, CALL to receive Quantity Discount and Shipping Prices</label></div><br>
        </div>
        <div class="row">
        <div class="left" style="background-image: url('Custom.jpg'); background-size: 100%; height: 140px; "></div>
        <div class="right">
            <h2>Custom Floral Arrangement</h2>
            <label>Let our talented florists create a beautiful flower arranagement to decorate your holiday table!</label><br>
            <label>Number of Plants Ordered: </label>
            <input type="text" id="customAmount" name="customAmount">
            <label> $39.75 each</label><br>
            <label>For orders OVER 20, CALL to receive Quantity Discount and Shipping Prices</label></div><br>
        </div><br><br>
    </div><br>
    <fieldset>
        <legend>Contact Information</legend>
        <label for="firstName" style="margin-left: 30px">First Name: </label>
        <input type="text" id="firstName" name="firstName" size="50"><br>
        <label for="lastName" style="margin-left: 33px">Last Name: </label>
        <input type="text" id="lastName" name="lastName" size="50"><br>
        <label for="email" style="margin-left: 67px">Email: </label>
        <input type="text" id="email" name="email" size="60"><br>
        <label for="phone" style="margin-left: 64px">Phone: </label>
        <input type="text" id="phone" name="phone" size="30"><br>
    </fieldset><br>
    <fieldset>
        <legend>Delivery Information</legend>
        <div>
            <div class="one">
                <label for="date">Requested Delivery Date: </label>
                <input type="date" id="date" name="date"><br><br>
                <p>If not one is home to receive the plants, <br>where would you like them left?</p>
                <label>Check All that Apply!</label><br>
                <input type="checkbox" id="porch" name="porch" value="Porch">
                    <label for="porch"> Leave on front porch</label><br>
                <input type="checkbox" id="backDoor" name="backDoor" value="BackDoor">
                    <label for="backDoor"> Leave at back door</label><br>
                <input type="checkbox" id="garage" name="garage" value="Garage">
                    <label for="garage"> Leave in garage</label><br>
                <input type="checkbox" id="no" name="no" value="No">
                    <label for="no"> Do not leave outside</label>
            </div>
            <div class="two">
                <label for="instructions">Special Delivery Instructions</label><br>
                <textarea id="instructions" name="instructions" rows="10" cols="50"></textarea>
            </div>
        </div>
    </fieldset><br><br>
    <input type="reset" value="CLEAR" style="margin-right: auto; font-size: 20px;">
    <input type="submit" form="orderForm" value="SUBMIT" style="font-size: 20px;">
</fieldset>
</form>
</div>
<br>
<footer>
<a href="../index.htm">Home</a><br><br>
<script>
document.write("This page was last modified by --: ");
document.write(document.lastModified);
</script>
</footer>
</div>
</body>             
</html>

我已经编辑了提交输入和表单输入中的onsubmit行，使用了其中一个或另一个（返回到validateEntries（）），或者两个都使用。我还将CalcOrderTotal（）放在onsubmit部分中，但仍然没有成功。我知道Javascript代码的.focus（）部分是有效的，因为它总是刷新回该部分，但由于某种原因，我的其余函数没有被读取。

html 我的Javascript函数被完全忽略了，所发生的一切就是当我单击“提交”时，我被发送回网页的顶部[已关闭]

1条答案

相关问题

热门标签

最新问答