Getting Javascript to insert form contents into hidden field

... and to do it before submitting the form

[JohnKelly]

I have a basic knowledge of Javascript but this eludes me. I want the customer to type their invoice # into a form before submitting to PayPal for payment. I would like the invoice # to appear in the PayPal screen, but it would need to be a hidden field to do so.

So the question is, how do I get the Invoice # ("os0") in the form below to appear in the section marked ###### -- before submitting the form?

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="[e-mail]">
<input type="hidden" name="item_name" value="Payment: Invoice ######">
<input type="hidden" name="on0" value="Invoice Number(s)">Invoice Number(s): <input type="text" name="os0" maxlength="200">
</form>

[coopster]

I must be missing something, but if they are typing the Invoice Number into the form in an input element -- why do you need another hidden input element? Why not use the value of the input element in which they are currently keying the value?

[JohnKelly]

The invoice # appears in my email, but does not appear on the client's screen. That's why I'm trying to modify the hidden form field "on the fly".

[coopster]

I suppose you could append the Invoice Number upon submission of the form.

<script type="text/javascript"> 
function fillInvoiceNumber() 
{ 
 document.getElementById('item_name').value += document.getElementById('os0').value 
 return true 
} 
</script> 
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="fillInvoiceNumber()"> 
... 
<input type="hidden" name="item_name" id="item_name" value="Payment: Invoice " />  
<input type="text" name="os0" id="os0" maxlength="200" /> 
...

What will you do if the user does not have JavaScript enabled?

[coopster]

Afterthought ...
I don't usually use onsubmit() on the form element. I typically use an onclick event handler on the actual input element submit button.

[Fotiman]

What happens if the user has JavaScript disabled?

You should never rely on JavaScript for required content.

[coopster]

Exactly my point, Fotiman.

You should capture the posted information at the server, manipulate the information and perform your own POST to the service provider. At least you know for certain the information is formatted as you expect.

[cmarshall]

<stupid question removed>

Reading comprehension. I've heard of it.

The question really is, "How can I append/replace a placeholder without using JavaScript?"

I see no way to do that without creating a server-side "router" page. Not much of a big deal. I do it all the time (for pretty much the same reason).

Just create a PHP (or whatever your SS tech is) page that reads the $_POST and creates a new post transaction to the payment server with the strings appended. Some sites do this with user intervention (confirmation pages), which is the easiest, but it can also be done "behind the scenes."

[cmarshall]

Afterthought ...
I don't usually use onsubmit() on the form element. I typically use an onclick event handler on the actual input element submit button.

I did that for ages until someone pointed out to me that onclick handlers can leave out keyboard navigators, or assistive technology that simulates keyboards.

I haven't been able to test this to make sure it's true, but I started using onsubmit handlers, and I continue to do so.

Is there a problem with this approach? I'm really not sure, and I am asking this in a sincere desire to best serve users.

[coopster]

To be honest with you that is the first I had heard of it so I cannot confirm either.

The

onsubmit

event handler will not respond to a

document.forms[0].submit()

method, only in response to an <input type="submit"> button. Somewhere down the line I must have had a notion that I would be safer and not forget this fact in case I was doing anything fancier in my forms processing on the client side outside of using input submit buttons.

As I said, if there is a usability issue then I am clearly unaware and would love to know the correct approach as well.

[cmarshall]

Well, the way it was explained to me was:

<WARNING: Content pulled straight from hearsay. No research done. Caveat Emptor>

onclick responds to mouse clicks or simulated mouse clicks, but not to keyboard navigation. They have onkeydown and onkeyup event traps for those.

As people with manual dexterity issues use keyboards more than mice, this may be an issue.

</warning>

However, that onsubmit handler not being called by a JavaScript-triggered submit() is a real problem, and I understand now.

[coopster]

There is indeed some truth to that statement. The onclick [w3.org] event handler defines a click as a press and release of the pointing-device (mouse) button while the pointer is over/on the target button during the entire operation. Meaning if the pointer is rolled off the button and released a 'click' has not officially occurred. Still, it is defined as specific to the mouse as you mentioned. It seems certain operating systems, Windows 95 and later included, also activate an

onclick

with alternate non-mouse actions such as the keyboard. You've probably noticed this if you have ever keyed in data in a text box and just pressed enter. The form is submitted. Did an onclick really occur though? Not as far as the definition there goes, I guess.

Perhaps the correct method is to indeed be using the

onsubmit

handler as opposed to

onclick

at the Submit button input element. Any pre-submission processing can be setup accordingly in the client-side scripting.