SO #36302470

HTML

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

JavaScript

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

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

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

console.log('hi1');

function myFunction1() {
  console.log('hi');
  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 {
    console.log('hi');
    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
  }


}