Link input with a form?

[rec0il]

Hello Codingforums, yet again I desire some help to my coding, this time regarding a paypal button.

 

I'm working on a local project of mine in which I wish to let my costumers type the amount of quantities for a product they wish into a text box and then want it to automatically edit the amount of quantities on the paypal page. This works when I have the input inside the form, but due to my template I wish to have my quantity text box outside the "form" code of the paypal button but still want it to connect so that it changes. Let me explain with some code

 

This is the working code for which i can enter the amount of quantities into a text box and it will automatically change it on the paypal page as well.

<div id="payment" style="margin-top:10px;">

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">

<input type="hidden" name="cmd" value="_s-xclick">

 

<input type="TEXT" name="quantity" value="1">

 

<input type="hidden" name="hosted_button_id" value="C5P9LBML2FSC6">

<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">

<img alt="" border="0" src="https://www.paypalobjects.com/da_DK/i/scr/pixel.gif" width="1" height="1">

</form>

</div>

 

This is what I want it to do, I want to be able to put the input of the quantities text box onto another div and still be able to change the amount of quantities on paypal. (Doesn't change the amount of quantities when clicked on button)

<div id="anotherdiv">

<input type="TEXT" name="quantity" value="1">

</div>

 

<div id="payment" style="margin-top:10px;">

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">

<input type="hidden" name="cmd" value="_s-xclick">

<input type="hidden" name="hosted_button_id" value="C5P9LBML2FSC6">

<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynow_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">

<img alt="" border="0" src="https://www.paypalobjects.com/da_DK/i/scr/pixel.gif" width="1" height="1">

</form>

</div>

 

Thx in advance

- rec0il

[Ch0cu3r]

Either modify your HTML so the paypal form tags span your other divs (easiest solution)

 

Or use JavaScript to grab the values of the external inputs fields and dynamically inject their values into your main paypal form (adds unneeded complexity).

[rec0il]

Either modify your HTML so the paypal form tags span your other divs (easiest solution)

 

Or use JavaScript to grab the values of the external inputs fields and dynamically inject their values into your main paypal form (adds unneeded complexity).

Regarding the easiest solution: That's unfortunately not what I want. I want my paypal button on the bottom of my page and the quantity box at almost the top of the page. So that would screw it up, if i had to make everything between them inside the form tag as well hehe - or am i wrong?

 

I haven't really been able to find something on google, can you maybe point me in the right direction regarding the coding for the more complexity solution?

Edited July 22, 2014 by rec0il

[DavidAM]

The <FORM> tags do not have any affect on the layout of the page. It is really just a container for form fields. You just need to move the opening tag above your first form field.

 

Be aware, if there are other form fields on the page (not shown in the code you posted), they will become part of the form and will be sent when the form is submitted.

[rec0il]

The <FORM> tags do not have any affect on the layout of the page. It is really just a container for form fields. You just need to move the opening tag above your first form field.

 

Be aware, if there are other form fields on the page (not shown in the code you posted), they will become part of the form and will be sent when the form is submitted.

Oh didn't know that, but unfortunately my quantity box is inside another form tag haha, so that probably won't work..

Any other tips? Also would it be more helpful if i were to post my code?

Edited July 22, 2014 by rec0il

[DavidAM]

No, you cannot overlap or nest FORMs in HTML. If you need the quantity in both forms, and it needs to be the same value, you will need to use JavaScript.

 

Put a hidden input field in the second form to hold the quantity. Then either (1) add an event (JS) to the other form's quantity field so when it changes, the hidden field is updated with the new value; or (2) and an onSubmit event to the paypal form to retrieve the current value from the other quantity field and put it in the hidden field (before sending).

[rec0il]

No, you cannot overlap or nest FORMs in HTML. If you need the quantity in both forms, and it needs to be the same value, you will need to use JavaScript.

 

Put a hidden input field in the second form to hold the quantity. Then either (1) add an event (JS) to the other form's quantity field so when it changes, the hidden field is updated with the new value; or (2) and an onSubmit event to the paypal form to retrieve the current value from the other quantity field and put it in the hidden field (before sending).

Yeah I see.. Hoped not to get JS involved as I'm not very familiar with it. Is there by any chance you may direct me to a website in which I can read more about the code I would need to know in order to make one of these work?

 

Or perhaps if you could explain it somehow I would be very grateful.

 

Thx in advance

- rec0il

[mac_gyver]

if this question is in any way related to your last thread, where you wanted to update the total price displayed when the quantity is changed, you seem to have hard-code/written-out the html for each product, rather than to use php to dynamically produce your page(s)?

 

you need to use php to manage the contents of a cart (item id's and quantities) and to dynamically produce the paypal form from the contents of the cart, rather than the other way around of trying to manipulate a static paypal form's html/values. this will let you freely produce the code needed to add/delete items or change the quantities.