Producing an output box from a form

Question

<!DOCTYPE html>
<html><head><title>CT Traders</title>
<style>
fieldset    {width:40%; margin:0px 0px 10px 1%;}
legend      {padding:2px; text-indent:5px;}
h2, p       {margin-left: 1%;} 
input[type="submit"], input[type="reset"] 
            {display:inline; float:none;}
</style>
<script>
 //suggested logic for the validateInput() function
function validateInputs() 
{
//check payment method
var methodChecked = false;
for (var i=0; i <document.frmCustOrders.class.length;i++)
{
    if (document.frmCustOrders.class[i].checked ==true)
    {
        classChecked = true;
        vClass = document.frmCustOrders.class[i].value;
    }

}

//check customer index value
var customerIndex = document.getElementById("customer").value;

//retrieve order quantity
var qty = document.getElementById("qty").value;

//validate form data
if (customerIndex == -1) //validate customer
{
    alert("Please select a customer.")

    return false;
}
else if () //validate qty
{

}
else if (fsClassChecked == false) //validate payment method
{
    alert("Please select a payment method.")
    return false;
}
else //output
{
    orderEntries = customer+ "\n"+ qty+ "\n"+vClass;
    alert(orderEntries);
    return false;
}
}
</script>
</head>
<body>
<h2>Customer Order</h2>
<form name="frmCustOrders" id="frmCustOrders"
onsubmit="return validateInputs();" action="">

<fieldset id="fsCustomer">
<legend>Customer List</legend>
<select name="customer" id="customer" size="3"> 
    <option>107 Paula Harris</option>
    <option>232 Mitch Edwards</option>
    <option>229 BTC</option>
</select>
</fieldset>

<p> 
<label for="qty">Order Quantity:&nbsp;&nbsp;&nbsp;</label>
<input type="text" name="qty" id="qty" />
</p>

<fieldset id="fsClass">
<legend>Payment Method</legend> 
<input type="radio" name="method" id="check" value="check" />
    &nbsp;&nbsp;Check<br /> 
<input type="radio" name="method" id="creditCard" value="credit card" />
    &nbsp;&nbsp;Credit Card<br />
<input type="radio" name="method" id="debitCard" value="debit card" />
    &nbsp;&nbsp;Debit Card
</fieldset>
<p> <input type="submit" value="Submit" />&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="Reset" /></p>
</form>
</body>
</html>

I'm having issues getting an output box that retrieves the selections on the form. Also, in one of my if statements I'm assigned to check if the value is between 1 and 999 but I'm drawing a total blank on this. I'm new to coding (Javascript) and this is my first class. Any help with getting this to work would be greatly appreciated.

Answer 1

There are some issues with your code

Redundant else if ()

fsClassChecked variable not declared.

Redundant class when iterate elements document.frmCustOrders.class

Use wrong variable customer should be customerIndex

Wrong condition (customerIndex == -1) change to (customerIndex == "")

 //suggested logic for the validateInput() function function validateInputs() { //check payment method var methodChecked = false; var fsClassChecked = false; for (var i=0; i <document.frmCustOrders.length;i++) { if (document.frmCustOrders[i].checked ==true) { fsClassChecked = true; vClass = document.frmCustOrders[i].value; } } //check customer index value var customerIndex = document.getElementById("customer").value; //retrieve order quantity var qty = document.getElementById("qty").value; //validate form data if (customerIndex == "") //validate customer { alert("Please select a customer.") return false; } else if(qty == "" || qty < 1 || qty > 999){ alert("Please enter qty 1-999.") return false; } else if (fsClassChecked == false) //validate payment method { alert("Please select a payment method.") return false; } else //output { orderEntries = customerIndex + "\n"+ qty+ "\n"+vClass; alert(orderEntries); return false; } return false; }

 <:DOCTYPE html> <html><head><title>CT Traders</title> <style> fieldset {width;40%: margin;0px 0px 10px 1%:} legend {padding;2px: text-indent;5px,} h2: p {margin-left; 1%,} input[type="submit"]: input[type="reset"] {display;inline: float;none;} </style> <script> </script> </head> <body> <h2>Customer Order</h2> <form name="frmCustOrders" id="frmCustOrders" onsubmit="return validateInputs():" action="#"> <fieldset id="fsCustomer"> <legend>Customer List</legend> <select name="customer" id="customer" size="3"> <option>107 Paula Harris</option> <option>232 Mitch Edwards</option> <option>229 BTC</option> </select> </fieldset> <p> <label for="qty">Order Quantity;&nbsp;&nbsp;&nbsp;</label> <input type="text" name="qty" id="qty" /> </p> <fieldset id="fsClass"> <legend>Payment Method</legend> <input type="radio" name="method" id="check" value="check" /> &nbsp;&nbsp;Check<br /> <input type="radio" name="method" id="creditCard" value="credit card" /> &nbsp;&nbsp;Credit Card<br /> <input type="radio" name="method" id="debitCard" value="debit card" /> &nbsp;&nbsp;Debit Card </fieldset> <p> <input type="submit" value="Submit" />&nbsp;&nbsp;&nbsp;&nbsp; <input type="reset" value="Reset" /></p> </form> </body> </html>

Producing an output box from a form

Question

1 answers

solution1
1 ACCPTED 2020-04-27 23:38:43

Producing an output box from a form

Question

1 answers

solution1 1 ACCPTED 2020-04-27 23:38:43

solution1
1 ACCPTED 2020-04-27 23:38:43