Forum Moderators: open
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.
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?
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>
<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]
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?
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). :)
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.
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.