/    Sign up×
Community /Pin to ProfileBookmark

validating drop-down and input forms on same page.

Hello:

It is very embarrassing and very frustrating to be unable after several days to get what appears to be a simple task to work in practice. Accordingly, I’d be extremely grateful if someone could take the time to demonstrate what must be done coding wise, and perhaps explain a bit what data is available, at what point, and how to access it depending on what the user does.

Hopefully, other inexperienced javascript people will benefit as well.

Assume a page which one is entering the quantity, item, and size of a product. To build it, I set up 1 input form for quantity, 1 drop-down menu for product and one drop-down menu for size.
If the visiter wants to add the item he presses the ADD TO CART button. If he changes his mind he presses the RETURN TO CATALOGUE button.

Validation is–or should be–reasonably simple. On ADD to CART,
1. If size is 0, an ALERT stating size is zero.
2. If size is NON-Numeric. an ALERT stating size is NON-Numeric
3. If No Product selected. an ALERT stating no product Selected.
4. If No size selected. an ALERT stating no size is selected, unless the product is a mousepad.

ON RETURN TO CATALOGUE, no checks are done.

I would have thought the following would do the trick, but nothing happens.

Thanks so Much!
==================================

<script type=”text/javascript” language=”Javascript”>

function check_data()
{
quantity=newitem.pquantity.value;
productindex=newitem.pproduct.selectedIndex;
sizeindex=newitem.psize.selectedIndex;

if (quantity == 0){alert (“Missing Quantity, Please Reenter”); }

if (isNaN(quantity))
{alert (“Quantity is Invalid….Please Reenter.”); }

if (productindex < 1) { alert (“No Product Selected. Please Reenter”); }

if ((productindex != 4) && (sizeindex == 0)) //if mousepad, size unnecessary
{ alert (“No Size Selected. Please Reneter”); }

}

</script>
</head>

<body>
<form name=”newitem” action=”addtocrt.php” method=”post” >

Quantity: <input type=”text” maxlength=”2″ size= “2” name=”pquantity” value=”1″ onsubmit=”check_data()”/>

<p>
Product:<select name=”pproduct” onsubmit=”check_data();” >
<option selected value=”0”>Select Product</option>
<option value=’1′>Kid’s Lightweight Tees</option>
<option value=’2′>Kid’s Heavyweight Tees</option>
<option value=’3′>Adult’s Lightweight Tees</option>
<option value=’4′>Mouse Pad</option>
</select>
<p>
Size:<select name=”psize” size=”1″ onsubmit=”check_data();” >
<option selected=”selected”>Select size</option>
<option>S </option>
<option>M </option>
<option>L </option>
<option>XL </option>
<option>XXL </option> </select>

<p>

<input name=”submit” type=”submit” onSubmit=“Data_checks(this);”
value=” ADD TO CART “>

</form>
<form name=”goback” action=”catalogue.php” >
<p> <input name=”catalogue” type=”submit”
value=”RETURN TO CATALOGUE”>
</form>
</body>
</html>

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@Logic_AliMar 19.2007 — Hello:

It is very embarrassing and very frustrating to be unable after several days to get what appears to be a simple task to work in practice.[/QUOTE]
There's no need to be embarrassed about having trouble with algorithmic issues, only with failure to act on errors indicated in the JavaScript console.

The characters &#8220; and &#8221; are not usable as double quotes, only ".

Only the <form> element itself has an [I]onsubmit[/I] event, buttons and selects do not.

Use - [CODE] <form ...... onsubmit="return check_data(this);">[/CODE]The other function calls should be removed.

If an error is detected, the function [I]check_data[/I] must return [I]false[/I].

There may be other errors.
Copy linkTweet thisAlerts:
@livebymyheartauthorMar 19.2007 — Thanks Logic so very much for your help and generosity. Implementing your suggestions makes it work as expected.
×

Success!

Help @livebymyheart spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...