Question

I’m making a form to order different varieties of sweets from a website. At the moment I have checkboxes with each variety. Once they have chosen the varieties they want (they can have more than one) then I need some more information. To do this I want to display a new box when they check each checkbox. Event attributes seem to be adequate, but I don’t really know javascript, so is this the right way for me to do it? Can event attributes only trigger javascript?

Or perhaps I’m going about this the wrong way, would there be a better way to make this form? I’ve considered a shopping cart but for what I want I think it’s too much, and I’m not very advanced.

So, I just want a way to show html after a checkbox has been ticked, or a better way to make my form.

Thanks

Answer 1

If you have skills with server-side programming (PHP, ASP, ASP.Net, JSP), that may be the way to go. When the checkbox changes, redraw the options using AJAX of some flavor (e.g. an ASP.Net UpdatePanel). This will avoid doing much with JavaScript on the client, even though it’s certainly doable that way.

If you aren’t strong on either client or server-side programming, a third-party shopping cart is probably the way to go. I would start your investigation with PayPal.

Important: if you do write your own order form, make sure you are not storing credit card numbers at any point in the process. Avoid even having credit card numbers submitted to your site if at all possible. Become familiar with PCI Compliance. This alone is often a justification for using a third-party tool.

EDIT: Per Paul’s comment below that he wants to keep it as simple as possible and no transactions will be handled:

“Can event attributes only trigger javascript?”

Yes, either inline JavaScript or script contained in an external file, or elsewhere on the page in script tags.

Here’s a little sample of one checkbox triggering other HTML elements (in this case, other checkboxes): http://www.htmlcodetutorial.com/forms/_INPUT_onClick.html

You can show or hide an element using code like this:

var elementToToggle = document.getElementById('someId');
elementToToggle.style.display = "none"; // hide

OR

elementToToggle.style.display = "";

Using the jQuery (www.jquery.com) library would potentially make this simpler, but there is an initial learning curve.