1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 9:43 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

need some help with form and javascript

needing a little help with a form that incorporate javascript

         

bubba4gman

12:01 am on Jun 23, 2005 (gmt 0)

10+ Year Member



Ok, here's the piece of code where I need some help.
The buyer enters the neck size of their dog, say 13 inches, then chooses the matching size from the drop down box, which in this case would be medium. Then they click the add to cart button. How can I, before it submits, force it to give a pop-up yelling at the buyer if, they didn't choose from the drop down box, or if the choice they made doesn't match the size they entered; example: they typed in 21 inches, then chose medium from the drop down box, which is 13-16 inches.

Thanks!

enter your dog's exact neck size in inches&nbsp;</font></font><input type="text" name="os0" maxlength="200"></td>
</tr>

<tr>
<td><select onchange =" ReadForm (this.form);"><option value="Size Range @0.00">Select
the correct size range for your dog's neck size</option><option value="Medium @49.95">Medium
13-16in. $49.95</option><option value="Large @54.95">Large 16-19in. plus
$54.95</option><option value="X Large @69.95">X Large 19-21in. $65.95</option><option value="XX Large @69.95">XX
Large 21-25in. plus $69.95</option></select></td>
</tr>

<tr>
<td ALIGN=CENTER VALIGN=CENTER HEIGHT="45"><input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!"></form></td>

BlobFisk

1:05 pm on Jun 23, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi bubba4gman,

You can use a confirm prompt. If the user says ok then submit the form, otherwise do nothing.

HTH

rocknbil

5:20 pm on Jun 23, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



First off - if the size is already in the labels of the collars, there's no need to enter the dog's neck size. If they can't figure out that a 17" dog's neck will fit into a large 16"-19" collar . . . . then I'd feel sorry for the dog . . . so I would just eliminate the text entry altogether!

Which still leaves selecting a size. So if they don't select a size, just use the "selectedIndex==0" part below.

Also I'd move the check event to the button instead of the select list to avoid problems in logic, for example, if someone selects something before the text field is entered it's going to complain no matter what.

But this works. Bolded a few important changes.

<html><head><title>Select Collar</title></head>
<body>
<!-- don't forget to add the action -->
<form>

<input type="text" size="3" name="os0" id="os0" maxlength="3"> <br>

<select name="size" id="size">
<option value="None Selected">Select size</option>
<option value="Medium @49.95">Medium
13-16in. $49.95</option>
<option value="Large @54.95">Large 16-19in. plus
$54.95</option>
<option value="X Large @69.95">X Large 19-21in. $65.95</option><option value="XX Large @69.95">XX
Large 21-25in. plus $69.95</option>
</select>
<br>

<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" onClick="readForm(this.form); return false;">

</form>

<script type="text/javascript">

function readForm(form) {
var ind = form.size.selectedIndex;
if (ind == 0) { alert("please select a size."); return; }

// If you eliminate the text field you can stop here!

if (isNaN(form.os0.value)) { alert("please enter a numeric value for exact size."); return; }

// The first element below is 0 so we can correspond the
// selected index with the arrays. So lows[1] and
// high[1] = small, etc.

var lows = new Array(0,13,16,19,21);
var high = new Array(0,16,19,21,25);
var isInRange = 0;

if ((form.os0.value >= lows[ind]) && (form.os0.value <= high[ind])) { isInRange = 1; }

if (isInRange == 0) { alert("The size you entered does not fall in the selected range."); }
else { form.submit(); }
}
</script>
</body>
</html>

bubba4gman

9:27 pm on Jun 23, 2005 (gmt 0)

10+ Year Member



well, I have been asked that question already. My understand is that the person who makes the collars makes them to fit your dog pretty exact. That is why you are asked to enter your dog's exact neck size. There is also a link on the page to get instructions for properly measuring. So, if your dog's neck is 17 inches, you put that in the text box, and then choose the corresponding collar size from the drop down box. I suppose the alternative solution is to have the drop down box be automatically selected for you based on the number you enter in the text box, and it would yell at you if the number is outside the available range of sizes.

bubba4gman

9:34 pm on Jun 23, 2005 (gmt 0)

10+ Year Member



let me clarify something also, before I try ot grab the script above and use it. The piece of code I included is written the way it is because there is a piece of javascript that goes with it, that you don't see. The purpose of that script is to grab the price from the option you select in the drop down box. That is why each option has the @49.95, @54.95, etc.

So, does that change anything, or can I still grab the javascript and place it after the form?

rocknbil

1:05 am on Jun 24, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I can't advise on whatI can't see. For certain, if you've already got a function with that name you're going to have to do some editing.

Just paste it in a doc, see what it does, then see if you can fit it into the unseen script. Besta' luck. :-)

bubba4gman

1:32 am on Jun 24, 2005 (gmt 0)

10+ Year Member



let me give you the whole thing. I got your piece to work, but now my other piece of script won't work. It's coming up with the amount as 49.95 regardless of which size I choose from the drop down box. Not sure how to fix this problem.
Thanks for the help!

<script type="text/javascript">
if ((top.location == self.location) &&!(window.opener))
{
top.location.href = 'http://www.example.com'
}
</script>
<script LANGUAGE="JavaScript">

<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=565,height=650,screenX=150,screenY=0');");
}
// End -->

</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#316453" vlink="#48957C" alink="#316453" background="http ://host203.example.com/~example/images/sandclouds.jpg">
<center><table BORDER=0 CELLSPACING=0 CELLPADDING=0 COLS=1 WIDTH="650" BGCOLOR="#F8EDE9" >
<tr>
<td ALIGN=CENTER VALIGN=TOP><font face="Arial,Helvetica"><font color="#F7EBE6"><font size=-1>-</font></font></font>
<br><img SRC="http ://host203.example.com/~example/collars/bubble_gum.jpg" height=268 width=640></td>
</tr>

<tr>
<td ALIGN=CENTER VALIGN=TOP><i><font face="Comic Sans MS"><font color="#663366">“Bubble
Gum Kisses”</font></font></i>
<br><font face="Comic Sans MS"><font color="#33685C">This delightfully
funky design uses Pink Czech Glass Beads with Black Bubble&nbsp;</font></font>
<br><font face="Comic Sans MS"><font color="#33685C">Dots, Black Onyx,
White Jasper and Rose Quartz Beads.&nbsp; Too much fun!</font></font>
<p><font face="Comic Sans MS"><font color="#33685C"><font size=-1>Suggested
colors:&nbsp; Too cute on luxurious “Bubble Gum Pink” and “Ebony” leather
or&nbsp;</font></font></font>
<br><font face="Comic Sans MS"><font color="#33685C"><font size=-1>“Raspberry”
and “Charcoal” suede.&nbsp; Suede is not suitable for XSM or SM sizes.</font></font></font>
<br>&nbsp;</td>
</tr>

<tr>
<td>
<table BORDER CELLSPACING=0 CELLPADDING=3 WIDTH="100%" BGCOLOR="#EFE7DC" >
<tr>
<td><script type="text/javascript">
<!--
function Dollar (val) { // force to valid dollar amount
var str,pos,rnd=0;
if (val < .995) rnd = 1; // for old Netscape browsers
str = escape (val*1.0 + 0.005001 + rnd); // float, round, escape
pos = str.indexOf (".");
if (pos > 0) str = str.substring (rnd, pos + 3);
return str;
}

function ReadForm (obj1) { // process un-named selects
var i,amt,des,obj,pos,val,num="";
amt = obj1.baseamt.value*1.0; // base amount
des = obj1.basedes.value; // base description
for (i=0; i<obj1.length; i++) { // run entire form
obj = obj1.elements[i]; // a form element
if (obj.type == "select-one" && // just get selects
obj.name == "") { // must be un-named
pos = obj.selectedIndex; // which option selected
val = obj.options[pos].value; // selected value
pos = val.indexOf ("@"); // price set?
if (pos >= 0) amt = val.substring (pos + 1)*1.0;
pos = val.indexOf ("+"); // price increment?
if (pos >= 0) amt = amt + val.substring (pos + 1)*1.0;
pos = val.indexOf ("%"); // percent change?
if (pos >= 0) amt = amt + (amt * val.substring (pos + 1)/100.0);
pos = val.indexOf ("#"); // item number?
if (pos > 0) { // yes
num = val.substring (pos + 1);// get number, and rest of line
val = val.substring (0, pos); // lop off some stuff
pos = num.indexOf (" "); // end it with space
if (pos > 0) num = num.substring (0, pos);
}
if (des.length == 0) des = val;
else des = des + ", " + val; // accumulate value
}
}
if (obj1.item_number && num.length > 0) obj1.item_number.value = num;
obj1.item_name.value = des;
obj1.amount.value = Dollar (amt);
if (obj1.tot) obj1.tot.value = "$" + Dollar (amt);
}
//-->
</script>
<script type="text/javascript">

function readForm(form) {
var ind = form.size.selectedIndex;
if (ind == 0) { alert("please select a size."); return; }

// If you eliminate the text field you can stop here!

if (isNaN(form.os0.value)) { alert("please enter a numeric value for exact size."); return; }

// The first element below is 0 so we can correspond the
// selected index with the arrays. So lowsand
// high[1] = small, etc.

var lows = new Array(0,13,16,19,21);
var high = new Array(0,16,19,21,25);
var isInRange = 0;

if ((form.os0.value >= lows[ind]) && (form.os0.value <= high[ind])) { isInRange = 1; }

if (isInRange == 0) { alert("The size you entered does not fall in the selected range."); }
else { form.submit(); }
}
</script>
<form target="paypal" action="https://www.example.com/cgi-bin/webscr" method="post">
<table CELLSPACING=0 CELLPADDING=0 >
<caption><input type="hidden" name="add" value="1"><input type="hidden" name="cmd" value="_cart"><input type="hidden" name="business" value="earthstonepc@comcast.net"><input type="hidden" name="item_name" value="Bubble Gum Kisses"><input type="hidden" name="amount" value="49.95"><input type="hidden" name="page_style" value="EarthStone"><input type="hidden" name="no_shipping" value="2"><input type="hidden" name="return" value="http://example.com/thankyou.html"><input type="hidden" name="cancel_return" value="http://example.com/cancel.html"><input type="hidden" name="currency_code" value="USD"><input type="hidden" name="baseamt" value="49.95" /><input type="hidden" name="basedes" value="Bubble Gum Kisses Suede" /></caption>

<tr>
<td VALIGN=BOTTOM HEIGHT="90"><font face="Arial,Helvetica"><font color="#2F5E4F">If
you wish to add this collar to your shopping cart please make sure you
measure your dog for the exact neck size.&nbsp; <a href="javascript:popUp('http ://host203.example.com/~example/collars/proper_fit.html')">Click
Here for Instructions</a>.</font></font>
<br><font face="Arial,Helvetica"><font color="#2F5E4F"><b>Note:</b>&nbsp;
You must choose the size range below that matches the neck size you enter.&nbsp;</font></font></td>
</tr>

<tr>
<td VALIGN=BOTTOM HEIGHT="30"><input type="hidden" name="on1" value="Color"><font face="Arial,Helvetica"><font color="#000000">Color
in Luxurious Plush Suede Leather</font></font></td>
</tr>

<tr>
<td><select name="os1"><option value="Charcoal Suede">Charcoal Suede<option value="Chocolate Suede">Chocolate
Suede<option value="Crimson Suede">Crimson Suede<option value="Grape">Grape
Suede<option value="Kiwi-Lime Suede">Kiwi- Lime<option value="Raspberry Suede">Raspberry
Suede</select></td>
</tr>

<tr>
<td><input type="hidden" name="on0" value="Neck size"><font face="Arial,Helvetica"><font color="#000000">Please
enter your dog's exact neck size in inches&nbsp;</font></font><input type="text" name="os0" maxlength="200"></td>
</tr>

<tr>
<td><select onchange =" ReadForm (this.form);" name="size"><option value="Size Range @0.00">Select
the correct size range for your dog's neck size</option><option value="Medium @49.95">Medium
13-16in. $49.95</option><option value="Large @54.95">Large 16-19in. plus
$54.95</option><option value="X Large @69.95">X Large 19-21in. $65.95</option><option value="XX Large @69.95">XX
Large 21-25in. plus $69.95</option></select></td>
</tr>

<tr>
<td ALIGN=CENTER VALIGN=CENTER HEIGHT="45"><input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" onClick="readForm(this.form); return false;">

</form>

[1][edited by: Woz at 9:12 am (utc) on June 24, 2005]
[edit reason] Examplified Code [/edit]

rocknbil

5:30 pm on Jun 24, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Youve got two functions named ReadForm. Change the name of "my" function to something else, and change it in the onClick also:

function checkSizeEntry(form) {
.... nothing changes here
</script>

<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" onClick="checkSizeEntry(this.form); return false;">

bubba4gman

10:00 pm on Jun 24, 2005 (gmt 0)

10+ Year Member



one more time....ughh!
You rock dude!

The first script is working, but your script is not. I had 'name="size"' in the code for my drop down box. Your script worked then, but not the first script. Even after I changed the name of the script so they had two different names.

<script type="text/javascript">
<!--
function Dollar (val) { // force to valid dollar amount
var str,pos,rnd=0;
if (val < .995) rnd = 1; // for old Netscape browsers
str = escape (val*1.0 + 0.005001 + rnd); // float, round, escape
pos = str.indexOf (".");
if (pos > 0) str = str.substring (rnd, pos + 3);
return str;
}

function ReadForm (obj1) { // process un-named selects
var i,amt,des,obj,pos,val,num="";
amt = obj1.baseamt.value*1.0; // base amount
des = obj1.basedes.value; // base description
for (i=0; i<obj1.length; i++) { // run entire form
obj = obj1.elements[i]; // a form element
if (obj.type == "select-one" && // just get selects
obj.name == "") { // must be un-named
pos = obj.selectedIndex; // which option selected
val = obj.options[pos].value; // selected value
pos = val.indexOf ("@"); // price set?
if (pos >= 0) amt = val.substring (pos + 1)*1.0;
pos = val.indexOf ("+"); // price increment?
if (pos >= 0) amt = amt + val.substring (pos + 1)*1.0;
pos = val.indexOf ("%"); // percent change?
if (pos >= 0) amt = amt + (amt * val.substring (pos + 1)/100.0);
pos = val.indexOf ("#"); // item number?
if (pos > 0) { // yes
num = val.substring (pos + 1);// get number, and rest of line
val = val.substring (0, pos); // lop off some stuff
pos = num.indexOf (" "); // end it with space
if (pos > 0) num = num.substring (0, pos);
}
if (des.length == 0) des = val;
else des = des + ", " + val; // accumulate value
}
}
if (obj1.item_number && num.length > 0) obj1.item_number.value = num;
obj1.item_name.value = des;
obj1.amount.value = Dollar (amt);
if (obj1.tot) obj1.tot.value = "$" + Dollar (amt);
}
//-->
</script>
<script type="text/javascript">

function checkSizeEntry(form) {
var ind = form.size.selectedIndex;
if (ind == 0) { alert("please select a size."); return; }

// If you eliminate the text field you can stop here!

if (isNaN(form.os0.value)) { alert("please enter a numeric value for exact size."); return; }

// The first element below is 0 so we can correspond the
// selected index with the arrays. So lows[1] and
// high[1] = small, etc.

var lows = new Array(0,13,16,19,21);
var high = new Array(0,16,19,21,25);
var isInRange = 0;

if ((form.os0.value >= lows[ind]) && (form.os0.value <= high[ind])) { isInRange = 1; }

if (isInRange == 0) { alert("The size you entered does not fall in the selected range."); }
else { form.submit(); }
}
</script>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<table CELLSPACING=0 CELLPADDING=0 >
<caption><input type="hidden" name="add" value="1"><input type="hidden" name="cmd" value="_cart"><input type="hidden" name="business" value="earthstonepc@comcast.net"><input type="hidden" name="item_name" value="Bubble Gum Kisses"><input type="hidden" name="amount" value="49.95"><input type="hidden" name="page_style" value="EarthStone"><input type="hidden" name="no_shipping" value="2"><input type="hidden" name="return" value="http://earthstonepetcollars.com/thankyou.html"><input type="hidden" name="cancel_return" value="http://earthstonepetcollars.com/cancel.html"><input type="hidden" name="currency_code" value="USD"><input type="hidden" name="baseamt" value="49.95" /><input type="hidden" name="basedes" value="Bubble Gum Kisses Suede" /></caption>

<tr>
<td VALIGN=BOTTOM HEIGHT="90"><font face="Arial,Helvetica"><font color="#2F5E4F">If
you wish to add this collar to your shopping cart please make sure you
measure your dog for the exact neck size.&nbsp; <a href="javascript:popUp('http://host203.ipowerweb.com/~earthsto/collars/proper_fit.html')">Click
Here for Instructions</a>.</font></font>
<br><font face="Arial,Helvetica"><font color="#2F5E4F"><b>Note:</b>&nbsp;
You must choose the size range below that matches the neck size you enter.&nbsp;</font></font></td>
</tr>

<tr>
<td VALIGN=BOTTOM HEIGHT="30"><input type="hidden" name="on1" value="Color"><font face="Arial,Helvetica"><font color="#000000">Color
in Luxurious Plush Suede Leather</font></font></td>
</tr>

<tr>
<td><select name="os1"><option value="Charcoal Suede">Charcoal Suede<option value="Chocolate Suede">Chocolate
Suede<option value="Crimson Suede">Crimson Suede<option value="Grape">Grape
Suede<option value="Kiwi-Lime Suede">Kiwi- Lime<option value="Raspberry Suede">Raspberry
Suede</select></td>
</tr>

<tr>
<td><input type="hidden" name="on0" value="Neck size"><font face="Arial,Helvetica"><font color="#000000">Please
enter your dog's exact neck size in inches&nbsp;</font></font><input type="text" name="os0" maxlength="200"></td>
</tr>

<tr>
<td><select onchange =" ReadForm (this.form);"><option value="Size Range @0.00">Select
the correct size range for your dog's neck size</option><option value="Medium @49.95">Medium
13-16in. $49.95</option><option value="Large @54.95">Large 16-19in. plus
$54.95</option><option value="X Large @65.95">X Large 19-21in. $65.95</option><option value="XX Large @69.95">XX
Large 21-25in. plus $69.95</option></select></td>
</tr>

<tr>
<td ALIGN=CENTER VALIGN=CENTER HEIGHT="45"><input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!" onClick="checkSizeEntry(this.form); return false;">

</form>

rocknbil

3:06 am on Jun 25, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I only did two things, only one of which was necessary, and it's looking like it works fine just as you have it. (?)

<select onchange="ReadForm (this.form);">

to

<select name="size" onchange="ReadForm (this.form);">

This
var ind = form.size.selectedIndex;

is looking for a DD list named "size".

The other - comments and two 'Script tags are not necessary, just used one

<script type="text/javascript">
...
</script>

instead of

<script type="text/javascript">
<!--
...
//-->
</script>
<script type="text/javascript">
...
</script>

Looks like it works fine. The only other thing I did was move all of the script into the head of the document, but that also shouldn't matter.

You also missed the onSubmit="return false;" in your version, which will allow the form to sumbit if they incorrectly enter the size in the txt field.

bubba4gman

3:17 pm on Jun 25, 2005 (gmt 0)

10+ Year Member



Ok, here's the problem. I figured out what it is, but don't know how ot fix it. Adding the name="size" makes your script work. However, when I do submit, paypal is not receiving the selection that was made in the drop down box, and the other script that is supposed to pull the price from the selection is no longer functioning. Because I added the name=size", do I need to change or something elsewhere?
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 9:43 am May 14, 2026