-2

I have posted questions on hidden field previously and the name was duplicated and now I have problems with the text box. I am using a jquery for my image viewer. And at the same time, I want to have hidden fields. However, with the textbox, it appears to show all the textbox.

<div class="container">
  <div class="full-image">
    <form action="addOrder.php" method="post">
      <a href="city/GVcementMixture.jpg" class="zoomIt visible"><img src="city/rsz_cementmixture.jpg" alt="" /></a>
      <input type="hidden" name="op" value="add">         
      <input type="hidden" name="name" value="Cement Mixture">
      <input type="hidden" name="price" value="29.90">
      <input type="text" name="quantity" value="quantity?">
      <input type="hidden" name="subtotal" value="subtotal">
      <input type="submit" value="Add to Cart">
    </form>

....... .....

The output will show two textboxes of quantity, however, the number of quantity that I keyed in, it managed to store in my database...

Anyone knows how can I solve this issues?

p.s. this question has been solved below with the help of function.. thanks for your time reading it.

nurf
  • 26
  • 1
  • 6
  • "*The output will show two textboxes of quantity*" it seems normal. "*however, the number of quantity that I keyed in, it managed to store in my database*" could you rephrase that ? I don't see any issue if you did manage to store it. – Loamhoof Mar 29 '13 at 12:45
  • yes even though i managed to store it, if i have 10 images, wouldn't there be 10 textboxes appearing? @Loamhoof – nurf Mar 29 '13 at 13:17
  • Well of course, as you put as much in your DOM :/ – Loamhoof Mar 29 '13 at 13:18
  • there will be two images and at the same time two textboxes appearing. i hope that helps @IMSoP – nurf Mar 29 '13 at 13:19
  • i'm not familiar with DOM, could you please elaborate? @Loamhoof – nurf Mar 29 '13 at 13:25
  • I'm no clearer what the problem here is. Are you saying the code doesn't work, or just that you want to improve it? – IMSoP Mar 29 '13 at 13:33
  • Incidentally, I hope you're not relying on that hidden field containing the right price, as it's trivial to edit a hidden field like that in the browser before submitting the form. – IMSoP Mar 29 '13 at 13:35
  • improve. imagine there is a big image with a few other thumbnail of pictures below it and right beside it, there will be textboxes appearing. @IMSoP – nurf Mar 29 '13 at 13:37
  • i just need those data to be captured with a textbox letting them to key in the number of quantity that they want to purchase.. @IMSoP – nurf Mar 29 '13 at 13:38

2 Answers2

1

Ok, so, you HTML will simply be interpreted so every tag will create a DOM element. This means, there will be as much textboxes as you have input tags (type text ofc). You put twice:

<input type="text" name="quantity" value="quantity?">
<input type="submit" value="Add to Cart">

So there will be 2 textboxes and submit buttons displayed.
Because you do it with HTML only, you don't have much choice as you need 1 form for each image (thus one textbox and one submit).

Now, you're using jQuery (and javascript generally but it's not the point). What you could be doing, is add some scripting. For example, remove your textboxes from you forms, add an unique one, listen to the "submit" event triggered when the user sends data to the server so you can manually update a hidden input like:

<input type="hidden" name="quantity" />

I'm not saying this is the best solution, but it's one that requires little scripting.
If you really are lost, I can provide more information. Though, be clear and thorough in your need.

Edit:
So yeah, remove those textboxes, and add one elsewhere. Here are 2 ways to make this work.

Loamhoof
  • 8,163
  • 24
  • 29
  • i dont quite get you. by inputing this hidden field, how would customers add in the number of quantity they require? @Loamhoof – nurf Mar 29 '13 at 13:40
  • in your jsfiddle result, it will show two add cart buttons? you can try see the demo of my css here: http://www.constantinb.com/cfd-demo-24/ @Loamhoof – nurf Mar 29 '13 at 14:03
  • Yeah it show 2 add cart buttons, one for each image as I'm assuming you want. If you only want one, that's a whole new story... – Loamhoof Mar 29 '13 at 14:05
  • as you can see, there will be one small image and when hover, big image is seen. currently, when i code out as many products with the quantity textbox, it seems there are both the textboxes as well as the add to cart submit buttons. and yes i want one add cart button. sorry for not being clear. @ Loamhoof – nurf Mar 29 '13 at 14:06
  • How are you going to know which item the user want if you only have one button? Have you implemented any mechanism to allow this choice? @nurf – Loamhoof Mar 29 '13 at 14:13
  • I get what you mean. Using your codes, which is helpful for the quantity part, I'm not sure if the user will know which button to press. – nurf Mar 29 '13 at 14:38
  • This is just a css problem. In your app, the button will be placed next to the image, don't pay too much attention to my jsfiddle example. I'll just say this last thing: if you want only one button, and implement something to chose, you'll have way more javascript (not enormous though but you don't seem comfortable with it). – Loamhoof Mar 29 '13 at 14:46
  • this is the output that i meant http://jsfiddle.net/nurfaiezah/cyhUV/1/ the four images horizontally supposed to be the thumbnails @Loamhoof – nurf Mar 29 '13 at 14:47
  • As I said, this is only HTML & CSS to place the buttons next to the image or so, and should be discussed elsewhere (new question if you also need help on that part). This question is likely answered already. – Loamhoof Mar 29 '13 at 14:49
0

Based on your comments, it sounds like each image doesn't really need its own form, with a separate "Add to Cart" button, because they all represent the same product.

So why not separate the HTML that displays the images ( which will repeat for each image) from the HTML that creates the form (which will only show once)?

IMSoP
  • 65,743
  • 7
  • 83
  • 127