Question

我无法获取myFunction1（）的警报消息以正常运行。我需要它来说谢谢你的命令'firstname''姓氏'你的总数是.....

对于总数，需要将productselection值乘以quantityselection值，然后添加shippingselection值的值。然后它还会为总额增加7％的税。我有以下代码，如果没有输入您的名字，我可以收到第一条消息的警告。但是当我点击命令按钮时，名称字段被填写没有任何反应？请帮忙！谢谢！

 <!DOCTYPE html>
    <html>

    <head>
     <link rel="stylesheet" href="styles.css">   <!-- links stylesheet -->
        <h1>JS Order Form</h1> <!-- Heading -->
    </head>
    <body>

    <script src="script.js"> <!--links js -->
    </script>

    <div align="center">    
    <form id="myForm">
     <fieldset>
      <legend>Personal Information:</legend>                       <!-- first Form with first and last name-->
     First Name: <input type="text" id="field1" name="fname"><br><br>
     Last Name: <input type="text" id="field2" name="lname"><br>

     </fieldset>
    </form>
    </div>
    <br>
    <div align="center">

    <form id="myForm1">                                                 <!-- form 2-->
     <fieldset>
      <legend>Order Info:</legend>
    <table style="width:100%">
            <table align="left">         <!-- Setting table constraints-->
            <table border="1">  
      <tr>
        <td>Product</td>
        <td>Price</td>      

      </tr>
      <tr>
        <td>Widget 1</td>            <!-- table contents-->
        <td>$5</td>     

      </tr>
      <tr>
        <td>Widget 2</td>
        <td>$10</td>        

      </tr>
    </table>
    <br>



        Select a product:<br>
                        <select id="productselection">
                            <option value="blank"></option>
                            <option value="5">Widget 1</option>
                            <option value="10">Widget 2</option>
                        </select>
                        <br>
        Select a quantitiy:<br>
                        <select id="quantityselection">
                            <option value="blank"></option>
                            <option value="5">5</option>
                            <option value="10">10</option>
                        </select>
                        <br>
        Select a Shipping Method:<br>
                        <select id="shippingselection">
                            <option value="blank"></option>
                            <option value="0">Standard - Free</option>
                            <option value="10">3 day - $10</option>
                            <option value="25">Next Day - $25 2</option>
                        </select>


        </div>
     </fieldset>
    </form>
    <div align="center">
    <input type="button" onclick="myFunction();myFunction2() ;blankElement('productselection') ;blankElement('shippingselection') ;blankElement('quantityselection');" value="Clear">     <!-- submit and clear buttons-->
    <input type="button" onclick="myFunction1() ;Calculate();" value="Order">
    </div>



    </body>
    </html>

function myFunction() {
        document.getElementById("myForm").reset();  
    }   
    function myFunction2() {
        document.getElementById("myForm1").reset(); 
    }

    function blankElement(id)
    {    
        var element = document.getElementById(id);
        element.value = blank;
    }



    function myFunction1()
    {

    var f3 = document.getElementById("productselection");
      var field3 = parseInt(f3.options[f3.selectedIndex].value);
      var f4 = document.getElementById("quantityselection");
      var field4 = parseInt(f4.options[f4.selectedIndex].value);
      var f5 = document.getElementById("shippingselection");
      var field5 = parseInt(f5.options[f5.selectedIndex].value);



     var field1 = document.getElementById("field1").value.trim();
      var field1Valid= true;
     var field2 = document.getElementById("field2").value.trim();  // checks to see that a value is inputed 
    var field2Valid= true;

    if ( field1.length == 0)
     {
            field1Valid= false;
     }                                  // the following checks to see if anything is inputed and returns a true or false/yes or no
     if ( field2.length == 0)
     {
            field2Valid= false;
     }

    var formValid= field1Valid && field2Valid && field3Valid && field4Valid; //true if all fields are valid else false 
    if( !formValid){
        var alertMessage= 'Please fill in the following ';          //sets a var alert message if it meets criteria
        if( !field1Valid){ alertMessage+= '[First Name] '; }
        if( !field2Valid){ alertMessage+= '[Last Name] '; }       // adds the following fields to the alert if they did not meet criteria of being full

       alert(alertMessage);
        return false;
    }
    else{
         var alertMessage= 'Thanks for the order '+ field1+ ' '+ field2+ '. Your total is $' + (field3 * field4 + field5) + '.00.';
        alert(alertMessage);
        return true;           // pushes out alert message by using field1 and field 2 and then multipling field 3 and 4 together to get a total
    }


    }

Answer 1

field3Valid和field4Valid未定义。要么定义它们（并设置它们的值），要么从下一行中删除它们。

var formValid= field1Valid && field2Valid && field3Valid && field4Valid;

我创建了，因此您可以看到它的实际效果。

排序订单表单的JavaScript问题

1 个答案: