a little JS advice

  • Thread starter Thread starter chris leeds
  • Start date Start date
C

chris leeds

I've got a shopping cart. when you go to the view cart page it's got the
item quantity in a little text box. there could be as many quantity text
boxes as there are different items in the cart. while I know, and most
people know, they can change the quantity in the text box by re-typing it,
I'd bet a lot of people don't know that.

for this reason I'd like to add little + and - buttons next to the quantity
box. I found this on the net:
<form>
<input type=text name=amount value=1>
<input type=button value="+ 1"
onClick="javascript:this.form.amount.value++;">
<input type=button value="- 1"
onClick="javascript:this.form.amount.value--;">
</form>
which would be fine but how can I make it so that each instance of the
button will add to or subtract from only the text box it's related to?

TIA
 
Chris,

Many big time e-commerce sites today don't let you add more than one of an
item to the cart initially, it is when you go to review the cart, that you
can change the qty and then re-calculate the cost.

As for implementing the script, it kind of depends on how you are displaying
the products on the page, as it would need to be inside of the loop (and
current form tags) generating the individual products listings.

The name "amount" would be change to name of the field being used for qty.

Basically your would replace your current "qty" field with:

<input type="text" name="amount" value="1">
<input type="button" value="+ 1"
onClick="javascript:this.form.amount.value++;">
<input type="button" value="- 1"
onClick="javascript:this.form.amount.value--;">


Note: I would change the buttons to images, so you have control over how
much space is being used.

--

==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, Forums, WebCircle,
MS KB Quick Links, etc.
==============================================
 
that's the page I want to do it on, the "view cart" page. I'm afraid that
since the number of form fields that contain the quantity are unpredictable
because of the cart contents that I'm going to change all of the values with
the button. is it possible to put more than one thing in an input line like
this:
<input type="text" name="amount" value="1"<input type="button"
value="+1"onClick="javascript:this.form.amount.value++;">>
or am I asking too much ;-)
 
<html>
<head>
<script>
function addone(b)
{
b.value++;
}

function minusone(b)
{
b.value--;
}
</script>
</head>
<body>

<form name = "form1" method="POST" action="whatever">
<%
counter =1
' Looping construct.....

strnameA = "text" & counter
strnameB = "addbutton" & counter
strnameC = "minusbutton" & counter
%>
<input type="text" name="<%=strnameA%>" size="20" value="1">
<input type="button" value="add" name="<%=strnameB%>"
onclick="addone(form1.<%=strnameA%>);"><input type="button" value="minus"
name="<%=strnameC%>" onclick="minusone(form1.<%=strnameA%>);">
<%
counter =counter+1
'.....Looping
%>
</form>
</body>
</html>
 
thanks John,
the code is a little over my head. I'll have to cut and paste it into
FrontPage so I can get a better feel for it. I'm going to continue messing
around with it till I find something that'll work.
I'm thinking about going out and looking for a cart that has the feature and
just peek at the code. there was a php cart called os commerce that did
almost everything with form buttons and stuff.

thanks again,
chris
 
Chris,

<input type="text" name="amount" value="1"><input type="button"
value="+1" onClick="javascript:this.form.amount.value++;"><input
type="button" value="- 1" onClick="javascript:this.form.amount.value--;">

Note: You must change the name "amount" in the 3 places above to match the
field name used in your application for capturing the order quantity.

You should have to do anything other than replace the current qty code with
the above.
--

==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, Forums, WebCircle,
MS KB Quick Links, etc.
==============================================
 
don't get too put off by it because it is not really that much to know
there.
I imagine weaving it in and out of the frontpage generated stuff might be
the trick

the top functions do the same thing as a javascript: directive in a tag
it is just that I could never understand the whole this, me, stuff.

But the idea is that a cart has a set of rows.
Well at some time each row gets sequentually wittren to the HTML that will
be
sent to the browser. Each time a row is written you want to name the
quantity text box
differently. just a number suffix is perfect. The counter part. This has to
be self generating because you never know how many items will be in a cart.
(Hopefully lots)
Then the js function and you know which button goes with which text box.
Every html control has a certain place in the document object (your page)
and all must be uniquely referenced. Naming them helps, dynamic naming them
is trickier, and getting at them
from the list of all that might be on the page is even tougher sometimes.
All buttons boxes
checks stuff like that get put in an index and assigned a number
automatically.

So yeah
add another one right after this part..

name="<%=strnameC%>" onclick="minusone(form1.<%=strnameA%>);">



<%
counter =counter+1
strnameA = "text" & counter
strnameB = "addbutton" & counter
strnameC = "minusbutton" & counter
%>
<input type="text" name="<%=strnameA%>" size="20" value="1">
<input type="button" value="add" name="<%=strnameB%>"
onclick="addone(form1.<%=strnameA%>);"><input type="button" value="minus"
name="<%=strnameC%>" onclick="minusone(form1.<%=strnameA%>);">





<%
counter=counter+1

that gives two buttons/boxes. in the view source and the page.
 
John,

True there are time when you may need to have unique field names, but in
many cases when doing something like what Chris want, it is unnecessary to
do so, but that also depends on how his cart application has been written,
so he really need to follow the current process.

--

==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, Forums, WebCircle,
MS KB Quick Links, etc.
==============================================
 
oops you lost me
I guess I misunderstood the "wants" in this case
I pictured a view cart page with quantities to be
edited clientside then an update posting.
I was unaware of any process.
 
John,

The process is how the current review cart script is written to display the
items already added to the cart.

--

==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, Forums, WebCircle,
MS KB Quick Links, etc.
==============================================
 
well now you've both lost me.
I think this calls for some ham-handed handling of the page in question. ;-)
 
Chris,

Send me the page so I can see how it is coded.

--

==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, Forums, WebCircle,
MS KB Quick Links, etc.
==============================================
 
Thomas,
thanks for your kind offer. I sent it but fiddled afterwards and got it!!
please disregard the email and attachment.
I feel like a god! ;-)
cl
 
Chris,

You are welcome. I will disregard your email whenever it finally arrives.

--

==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, Forums, WebCircle,
MS KB Quick Links, etc.
==============================================
 
cool.
now i'm going to try to figure out how to make it so the visitor won't have
to hit the "update cart" button after they use my fancy new increment
buttons. maybe a function for unload.
 
Chris,

I think you should make the user make the choice of updating the cart, so
that they don't actually order more than they intended, which would lead to
customer service issues, etc.

--

==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, Forums, WebCircle,
MS KB Quick Links, etc.
==============================================
 
Back
Top