Think i'll try option 2 then in that case don't really want to or is there any need for option 1 to be honest, so will let you know.

@bashy even just moving the form tag above everything the colour & size are still not been passed as Input

You have hidden inputs with the same name as the select boxes, this won't work. When the form is POSTed, it will take the last element with a given name in the form and POST it's value, your hidden inputs are empty when the form is posted, hence why you see nothing on the backend.

I would suggest changing the colour and size select boxes to have an id such as colourSelect and sizeSelect, and additionally add an id field to the two hidden inputs for colour and size, maybe just colour and size respectively.

You then need a way of getting the value of the select box into the hidden input, so, using jQuery:

$('#colourSelect').change(function() {
   $('#colour').val($('#colourSelect').val());
});

$('#sizeSelect').change(function() {
   $('#size').val($('#sizeSelect').val());
});

It's not quite perfect, but should do the trick.

Or you could remove the hidden inputs since they're not really needed if you're using the select?

@Mort yeah! Doh didn't realize how stupid am I? that's now fixed, jesus i'm so silly at times.

@bashy which is what I've just done after a head f**k moment!