Forum Moderators: open

Message Too Old, No Replies

Non-JavaScript users revisited.

How to write a non-JS shopping basket....

         

Dabrowski

1:38 pm on Dec 31, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



ok, I know this topic has probably been shouted about many times before, so I'll get straight to the point.

I have a particular issue with 'non-js' which I couldn't find a reasonable way to overcome, with something as simple as a shopping basket.

The common way to edit a quantity in a shopping basket is to re-enter the quantity, or use a selector, and click 'update basket'. Yes?

So Javascript would be used normally to either auto-refresh after text entry, or for the selector, or even an 'onClick' on the update basket link.

How can these problems be overcome in a non-JS environment?

Is it really even still worth it? Even eBay which has to be one of the most used sites worldwide is now fill of JS popups and AJAX refreshes.

daveVk

12:26 am on Jan 1, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Make 'update basket' a submit button and have server send new page, is the only non-js I can see. Users expect shopping sites will need javascript, I would not worry about it.

Dabrowski

1:32 pm on Jan 1, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



But surely the 'checkout' button is the submit? Unless you get into the realms of multiple forms so you can submit more than one action.

mehh

6:09 pm on Jan 1, 2008 (gmt 0)

10+ Year Member



I may be mistaken, but could you not have two submit buttons? eg:
<input type="submit" name="action" value="Update">
<input type="submit" name="action" value="Checkout">

daveVk

11:32 pm on Jan 1, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yes mehh thats what I had in mind.

Dabrowski

2:05 pm on Jan 2, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You know, I never realised you could do that. Hmmm, ok I'll have a crack at it.

Thanks for that suggestion.

Dabrowski

9:19 pm on Jan 7, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hmmm, ok I've come across a stumbling block......

On the 'view basket' page I need 3 forms of submit, checkout, update quantities, and remove item (one for each item). I want to use an image for the remove item button, which you can do with an input image type, but you can't assign a value to it, so no way of changing what the update routine does.

The only way I can think out of this one is to duplicate the form in hidden fields for the checkout/update buttons?

Fotiman

11:09 pm on Jan 7, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




On the 'view basket' page I need 3 forms of submit, checkout, update quantities, and remove item (one for each item). I want to use an image for the remove item button, which you can do with an input image type, but you can't assign a value to it...<snip>

What makes you think you can't assign a value to it? It's the same as any other input:

<input type="submit" name="dothis" value="Checkout">
<input type="sutmit" name="dothis" value="Update">
<input type="image" name="dothis" value="Remove" src="remove.png">

When you click on any of those buttons, you can check your form processing page for 'dothis' and perform different logic for each. The value will either be 'Checkout', 'Update', or 'Remove'.

[edited by: Fotiman at 11:10 pm (utc) on Jan. 7, 2008]

Dabrowski

2:35 pm on Jan 8, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I couldn't find an example or reference that used it, or quoted it as a valid parameter. I checked MSDN and it also didn't mention value as a parameter.

The W3C says:

value = cdata [CA]
This attribute specifies the initial value of the control. It is optional except when the type attribute has the value "radio" or "checkbox".

Which would seem to indicate it is valid, so obviously the MSDN is only telling half a story. Surprising? Probably not.

ok then, so I have my image with it's action, I also need to specify an item to remove with this action. I can make the CGI side set the action to 'remove_(insert part number here)', but is there a more graceful way?

Fotiman

3:28 pm on Jan 8, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




ok then, so I have my image with it's action, I also need to specify an item to remove with this action. I can make the CGI side set the action to 'remove_(insert part number here)', but is there a more graceful way?

Well, I'm not sure what your page looks like, but typically you might do something using checkboxes like this:


<form ...>
<table>
<tr>
<td><input type="checkbox" name="id" value="12"></td>
<td>Dabrowski</td>
</tr>
<tr>
<td><input type="checkbox" name="id" value="13"></td>
<td>Fotiman</td>
</tr>
</table>
<input type="image" name="action" value="remove" src="...">
</form>

Then on your form processing page if the action is 'remove', then you could use the 'id' values to specify which items to remove.

That's just one way... it really depends on what it is you're trying to do (and I'm only guessing). :)

Dabrowski

6:38 pm on Jan 8, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



depends on what it is you're trying to do

Just a shopping basket, but with no JavaScript. It should be simple, and I know how you like things to be nicely degradable, and I like to work to those lines where possible. And I think it must be possible to make something as simple in concept as this.

ok, the code I have is like this.....

<table> 
<tr>
<td>Part number</td>
<td>Title</td>
<td><input type='text' name='quantity' value='2'></td>
<td>Price each</td>
<td>Line total</td>
<td><input type='image' src='remove.gif' name='action' value='remove'></td>
</tr>
...and again for each item...
</table>

<input type='submit' name='action' value='Update'>
<input type='submit' name='action' value='Checkout'>

Actually it begs the question of identifying each quantity field too.

I would use a separate form for each item with a hidden part number field, but then you'd have to duplicate it for the update and checkout buttons.

daveVk

11:05 pm on Jan 8, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



remove_(insert part number here)

Seems better than multiple forms to me. Could do away with delete (at least for no js users ) and take 0 quantity as delete indication?

Dabrowski

12:00 am on Jan 9, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I just thought of something else - when you go to checkout, the target script would also need to be changed, which I'm damn sure couldn't be done without. Unless I then use a redirect, but I ruled that out earlier.

The 0 quantity is a good idea, I used a checkout system like that once before I think. Felt a little weird.

So I need 2 forms - one with the bare cart info for the checkout script, and one with the rest of the data.

ok, I've had a look at the html for a website I use regularly for computer bits, and this is how they've done it....

While they're no stranger to JavaScript (they call in 13 separate JS files), they don't use a single part of it in the html for the forms.

They have 11 forms on the page!

3 of them are for buying recommended products, each with hidden fields with product codes in and a buy button...
4 There's a search bar...
5 a quick add...
6 a 'Save Cart' option...
7 and 8 are 'Checkout' buttons, comically posting the data, with no fields! The URL of the target is in a GET format...
9 and 10 are Google and PayPal checkout buttons...

...and finally...

11 is the main cart contents form, lots of hidden fields for various things, the submit button is the 'Update Cart' option, and the delete item button is...so simple...an A tag with a GET style link.

I can't believe I never thought of that!

So based on that I have absolutely no problem with having the 2 forms, 1 for the basket and 1 for the checkout button.