Error within HTML Code

Question

I am in the process of writing a webpage. I have everything done that is needed, however, when you enter any quantity over 30 it will make the id = "shipping" color red. It does this but it does it for anything less than 30 as well. Also I am having trouble with my submit button sending off to a server/url. Any help is appreciated! I will attach my code!

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title> Widgets R' Us </title>

  <style>
    table,
    td {
      border: 1px solid black;
    }
  </style>

  <script type="text/javascript">
    //Check if non -number or a negative number
    function realNumber() {

      var qty1 = document.getElementById("Quantity1").value;
      var qty2 = document.getElementById("Quantity2").value;
      var qty3 = document.getElementById("Quantity3").value;

      //isNaN is a predetermined function
      if ((isNaN(qty1) || qty1 < 0) || (isNaN(qty2) || qty2 < 0) || (isNaN(qty3) || qty3 < 0)) {

        alert("The quantity given is not a real number or is a negative number!");
        return false; //Will not allow for data to go to server.	
      } else {
        return true;
      }
    }

    function total() {

      var p1 = document.getElementById("Price1").value; //Value is referenced to the input tag
      var p2 = document.getElementById("Price2").value;
      var p3 = document.getElementById("Price3").value;
      var qty1 = document.getElementById("Quantity1").value;
      var qty2 = document.getElementById("Quantity2").value;
      var qty3 = document.getElementById("Quantity3").value;
      var over = qty1 + qty2 + qty3;

      if (realNumber()) {
        var totals = (p1 * qty1) + (p2 * qty2) + (p3 * qty3);
        var yes = (totals).toFixed(2);
        document.getElementById("ProductTotal").innerHTML = "$" + yes;

        if (over > 30) {
          document.getElementById("shipping").style.color = "red";

        } else {
          document.getElementById("shipping").style.color = "black";
        }
      }
    }

    function checkOut() {

      if (total()) {
        if ((document.getElementById("shipping").style.color == "red") &&
          (document.getElementById("extra").checked)) {

          return true;
        }
      }
      return false;

    }
  </script>
</head>

<body>

  <div>

    <h1><b><big> Widgets R' Us </b></strong>
    </h1>

    <h2><b> Order/Checkout </b></h2>

    <form name "widgets" onsubmit="return checkOut();" action="https://www.reddit.com/" method="get">

      <div id="mainTable">

        <table>
          <tr>
            <td>Widget Model:</td>
            <td>37AX-L
              <td>
          </tr>
          <tr>
            <td>Price per Unit:</td>
            <td>$12.45 <input type="hidden" id="Price1" name="Price1" value="12.45" /</td>
          </tr>
          <tr>
            <td>State:</td>
            <td>Regular</td>
          </tr>
          <tr>
            <td>Quantity:</td>
            <td> <input type="text" id="Quantity1" name="Quantity1" value="0" /</td>
          </tr>
        </table>

        <tr>
          <td> &nbsp;</td>
          <td>&nbsp;</td>
        </tr>

        <table>
          <tr>
            <td>Widget Model:</td>
            <td>42XR-J</td>
          </tr>
          <tr>
            <td>Price per Unit:</td>
            <td>$15.34 <input type="hidden" id="Price2" name="Price2" value="15.34" /></td>
          </tr>
          <tr>
            <td>State:</td>
            <td>Regular</td>
          </tr>
          <tr>
            <td>Quantity:</td>
            <td> <input type="text" id="Quantity2" name="Quantity2" value="0" /></td>
          </tr>
        </table>

        <tr>
          <td> &nbsp;</td>
          <td>&nbsp;</td>
        </tr>

        <table>
          <tr>
            <td>Widget Model:</td>
            <td>93ZZ-A</td>
          </tr>
          <tr>
            <td>Price per Unit:</td>
            <td>$28.99 <input type="hidden" id="Price3" name="Price3" value="28.99" /></td>
          </tr>
          <tr>
            <td>State:</td>
            <td>Regular</td>
          </tr>
          <tr>
            <td>Quantity:</td>
            <td> <input type="text" id="Quantity3" name="Quantity3" value="0" /></td>
          </tr>
        </table>

        <tr>
          <td> &nbsp;</td>
          <td>&nbsp;</td>
        </tr>

        <table>
          <tr>
            <td>Product Total:</td>
            <td>
              <p id="ProductTotal"> 0 </p>
            </td>
          </tr>

          <tr>
            <td> <input type="checkbox" id="extra" name="extra"> </td>
            <td>
              <p id="shipping">If the quantity exceeds 30 units, there will be extra shipping!</p>
            </td>
          </tr>
        </table>

      </div>

      <tr>
        <td> <input type="Submit" value="Submit" /> </td>
        <td> <input type="button" value="Calculate" onClick="total()" /> </td>
      </tr>

    </form>
</body>

</html>

“Also I am having trouble with my submit button sending off to a server/URL.” — And what is that trouble? — Sebastian Simon
– Sebastian Simon, Commented Oct 31, 2017 at 4:29

Sabith · Accepted Answer · 2017-11-01 04:03:38Z

5

Problem with your values qty1,qty2,qty3. these values are reading as string. so instead of addding these values , its concatinating the strings. replace

  var qty1 = document.getElementById("Quantity1").value;
  var qty2 = document.getElementById("Quantity2").value;
  var qty3 = document.getElementById("Quantity3").value;

with

  var qty1 = parseInt(document.getElementById("Quantity1").value);
  var qty2 = parseInt(document.getElementById("Quantity2").value);
  var qty3 = parseInt(document.getElementById("Quantity3").value);

It will Solve your problem with 'Red'.

For the submit button, function total() is not returning anything. so change something like

  function total() {

   var p1 = document.getElementById("Price1").value; //Value is referenced to the input tag
   var p2 = document.getElementById("Price2").value;
   var p3 = document.getElementById("Price3").value;
   var qty1 = parseInt(document.getElementById("Quantity1").value);
   var qty2 = parseInt(document.getElementById("Quantity2").value);
   var qty3 = parseInt(document.getElementById("Quantity3").value);
   var over = qty1 + qty2 + qty3;

   if (realNumber()) {
    var totals = (p1 * qty1) + (p2 * qty2) + (p3 * qty3);
    var yes = (totals).toFixed(2);
    document.getElementById("ProductTotal").innerHTML = "$" + yes;
    if (over > 30) {
      document.getElementById("shipping").style.color = "red";
      return true;

    } else if(over>0) {
     document.getElementById("shipping").style.color = "black";
     return true;
    }else{
     document.getElementById("shipping").style.color = "black";
     return false;
    }
 }
 }

and checkout() as

function checkOut() {
  if (total()) {
    if (((document.getElementById("shipping").style.color == "red") &&
         (document.getElementById("extra").checked))||
        (document.getElementById("shipping").style.color != "red")) {

         return true;
    }
  }
  return false;

}

edited Nov 1, 2017 at 4:03

answered Oct 31, 2017 at 4:24

Sabith

1,6562 gold badges22 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jon P Over a year ago

Please use parse int correctly: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

user8644893 Over a year ago

thank you!! However in checkout() i am trying to get it to send if it is red and checked or if it is not red, but can not seem to figure it out. I am using proper && and || but still having issues, solution?

Sabith Over a year ago

Modified the answer accordingly..Please check it now

Sabith Over a year ago

If it is working as you expected, please accept the answer ;)

Mad Angle · Accepted Answer · 2017-10-31 04:26:13Z

2

Replace

var over = qty1 + qty2 + qty3;

With

var over = parseInt(qty1) + parseInt(qty2) + parseInt(qty3);

answered Oct 31, 2017 at 4:26

Mad Angle

2,3301 gold badge18 silver badges33 bronze badges

1 Comment

Jon P Over a year ago

Please use parse int correctly: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

slevy1 · Accepted Answer · 2017-10-31 10:54:49Z

There were some minor HTML errors but the real issue is that numeric strings were being concatenated. So, to get the quantity values you need to use parseInt() to extract the integer value so that math is performed instead of string concatenation. Also, it's a little odd that the user has to click the Calculate Button in order to see a total. The button does work correctly, but is this what you really want?

One more thing, as tempting as it may be to directly alter the color of elements with JavaScript, in terms of keeping the code more robust, it is preferable to simply change the class name as the code does in this example since I created two classes in the CSS for this purpose.

The form now submits as long as the checkbox is unchecked and the units do not exceed 30. I changed the method to "post" and adjusted the true/false return statements in checkOut(). Note when data is submitted using the POST method, then no form data appears appended to the URL; for more info see here. I also altered the totals() function so that now it returns a value, namely the total price.

var d = document;
d.g = d.getElementById;

var qty = [0, 0, 0, 0];
var shipping = d.g("shipping");

function realNumber() {
  var qtyInvalid = [0, 0, 0, 0];
  for (let i = 1, max = qtyInvalid.length; i < max; i++) {
    qtyInvalid[i] = (isNaN(qty[i]) || qty[i] < 0);
  }

  if (qtyInvalid[1] || qtyInvalid[2] || qtyInvalid[3]) {
    console.log("The quantity given is not a real number or is a negative number!");
    return false;
  }
  return true;
}

function total() {
  var over = 0;
  var price = [0, 0, 0, 0];

  for (j = 1, max = price.length; j < max; j++) {
    price[j] = d.g("Price" + j + "").value;
    qty[j] = d.g("Quantity" + j + "").value;
  }

  var totals = 0;
  var yes = 0;
  const radix = 10;

  for (q = 1, max = qty.length; q < max; q++) {
  over += parseInt(qty[q], radix)
}  
  //console.log(over);

  if (!realNumber()) {
    return false;
  }

  for (let k = 1, max2 = price.length; k < max2; k++) {
    totals += (price[k] * qty[k]);
  }

  yes = (totals).toFixed(2);
  d.g("ProductTotal").innerHTML = "$" + yes;

  shipping.className = (over > 30) ? "red" : "black";
return totals;
} // end total

function checkOut() {
  var retval = false;
  var shippingIsRed = (shipping.className == "red");
  var extraChecked =  d.g("extra").checked;

  if ( total() ) {
    retval = (!shippingIsRed &&  !extraChecked)? true :  false;
  }
  return retval;
} //end checkout

h1 {
  font: 200% Arial, Helvetica;
  font-weight: bold;
}

h2 {
  font-weight: bold;
}

table,
td {
  border: 1px solid black;
}

p.red {
  color: #f00;
}

p.black {
  color: #000;
}

<div>

  <h1>Widgets R' Us</h1>

  <h2>Order/Checkout</h2>

  <form name="widgets" onsubmit="return checkOut()"  action="https://www.example.com/"  method="post">

    <div id="mainTable">

      <table>
        <tr>
          <td>Widget Model:</td>
          <td>37AX-L
            <td>
        </tr>
        <tr>
          <td>Price per Unit:</td>
          <td>$12.45 <input type="hidden" id="Price1" name="Price1" value="12.45" </td>
        </tr>
        <tr>
          <td>State:</td>
          <td>Regular</td>
        </tr>
        <tr>
          <td>Quantity:</td>
          <td> <input type="text" id="Quantity1" name="Quantity1" value="0" </td>
        </tr>
      </table>

      <tr>
        <td> &nbsp;</td>
        <td>&nbsp;</td>
      </tr>

      <table>
        <tr>
          <td>Widget Model:</td>
          <td>42XR-J</td>
        </tr>
        <tr>
          <td>Price per Unit:</td>
          <td>$15.34 <input type="hidden" id="Price2" name="Price2" value="15.34"></td>
        </tr>
        <tr>
          <td>State:</td>
          <td>Regular</td>
        </tr>
        <tr>
          <td>Quantity:</td>
          <td> <input type="text" id="Quantity2" name="Quantity2" value="0"></td>
        </tr>
      </table>

      <tr>
        <td> &nbsp;</td>
        <td>&nbsp;</td>
      </tr>

      <table>
        <tr>
          <td>Widget Model:</td>
          <td>93ZZ-A</td>
        </tr>
        <tr>
          <td>Price per Unit:</td>
          <td>$28.99 <input type="hidden" id="Price3" name="Price3" value="28.99"></td>
        </tr>
        <tr>
          <td>State:</td>
          <td>Regular</td>
        </tr>
        <tr>
          <td>Quantity:</td>
          <td> <input type="text" id="Quantity3" name="Quantity3" value="0"></td>
        </tr>
      </table>

      <tr>
        <td> &nbsp;</td>
        <td>&nbsp;</td>
      </tr>

      <table>
        <tr>
          <td>Total Price:</td>
          <td>
            <p id="ProductTotal"> 0 </p>
          </td>
        </tr>

        <tr>
          <td> <input type="checkbox" id="extra" name="extra"> </td>
          <td>
            <p id="shipping" class="black">If the quantity exceeds 30 units, there will be extra shipping!</p>
          </td>
        </tr>
      </table>

    </div>

    <tr>
      <td> <input type="Submit" value="Submit" /> </td>
      <td> <input type="button" value="Calculate" onClick="total()"> </td>
    </tr>

  </form>

I also removed some unnecessary repetitive code that fetches the quantity values, taking advantage of JavaScript closures and for-loops.

Please use parse int correctly: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
@JonP Thanks and duly noted. Not an excuse, but way back in 1999, I don't recollect that we worried about that second parameter.

Collectives™ on Stack Overflow

Error within HTML Code

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related