How to insert the 'output' from a javascript script into form field

smn2 · 23-08-06

Hi

I'm not very good at JavaScript and I thought I might as
well ask my question here as scour Google for several
hours.

Basically, I want to insert the output from a JavaScript
random quote generator into the input of a Perl/CGI
(hidden) form field.

Do I need to find a suitable JavaScript random quote
generator? If so, any ideas? Or can I just modify
an existing random quote generator to output to
a hidden form field? If so, how?

Or should I just be using PHP?

Many thanks for any ideas you may have.

Steve

dmorison · 23-08-06

Hi Steve,

It's very simple to set the value of any form element using JavaScript. All you need to do is make sure that your form has a name="" attribute and your hidden field has an id="" attribute. For example:

Code:

<form name='myForm'>
  <input type='hidden' name='quote' id='quote' value='' />
</form>

Then, assuming that you find a random quote generator that returns a quote from a function called getQuote(), you could set the value of the hidden field like this:

Code:

<script type='text/javascript'>
  document.myForm.quote.value = getQuote();
</script>

smn2 · 23-08-06

Thank you Dmorisson

Great timing, as I'd just found a similar solution (without the id=quote) bit.

So, like everything, it's easy when you know how!

Would I be right in assuming that a default value could be set
in cases where no javascript is present by coding the following?

Code:

<form name='myForm'>
  <input type='hidden' name='quote' id='quote' value='Default quotation goes here' />
</form>

Once again, thanks

Steve

dmorison · 23-08-06

Correct - the JavaScript will simply overwrite the default value.

smn2 · 24-08-06

Actually, can't get this to work, sorry.

Should I be putting this code in the HEAD section (or in the form)?

Quote:

and why can't I just add this to the getQuote() routine?

Quote:

document.myForm.quote.value = quote;

Hmm, I clearly know nowt about JavaScript

Lol

Thanks in advance
Steve

dmorison · 24-08-06

When writing JavaScript that refers to other elements on the page you should make it last thing on the page, otherwise the items that it refers to will not yet be known by the browser.

With regards just using:

Code:

document.myForm.quote.value = quote;

...that's fine if your script has previously stored the quote in a variable called quote. My example used function call that returns the quote instead - the result is the same.

The following code should work - it will set a quote into the variable quote; set the hidden form field, and then display the value of the hidden form field in an alert box so you can see the contents...

Code:

<html>
  <body>
    <form name='myForm'>
      <input type='hidden' name='quote' id='quote' value='' />
    </form>
    <script type='text/javascript'>
      quote = 'This is the quote of the day!';
      document.myForm.quote.value = quote;
      alert(document.myForm.quote.value);
    </script>
  </body>
</html>

Hope this helps!

smn2 · 24-08-06

Hi dmorison

THANKS.

Yes, that worked (eventually). I still took 2 hours frigging
around before I got it working, but that's probably more to
do with it being the end of my day than anything else.

Thanks very much.

I owe you a beer, or something for sure!
Cheers

Steve