Random Number in Hidden Form Field - Again

JavaScript
1

Hello everyone,

There is a closed thread re: this (http://www.sitepoint.com/forums/showthread.php?68081-Random-Number-in-hidden-form-field) - it’s exactly what I need to do, however when I try it it’s not working for me, so I was wondering if anyone could help me revisit this topic. I need to have a confirmation number appear on a page after a user submits a form, and I need to have that same confirmation number appear in the form results without the user having to enter it, so I attempted to do this via a hidden form field.

I am able to get the confirmation number to appear on the page using the following script in the head of the document:

<script>
now = new Date();
randomNum = ‘’;
randomNum += Math.round(Math.random()*9);
randomNum += Math.round(Math.random()*9);
randomNum += now.getTime();
</script>

It’s used in conjunction with this piece of code, which does display the number on the page: Confirmation Number = <script>document.write(randomNum)</script>.

The problem is that the hidden field in the form is not displaying in the emailed form results. I’m not getting any form submission errors, and all the other fields are displaying correctly. It simply does not appear. Here is the code that I’m using for the hidden field: <input type=“hidden” name=“Confirmation:” onSubmit=“this.value=randomNum”>

If anyone could tell me what I’m missing, I’d appreciate it. This same code worked well for the person who started the previous thread, so I’m sure that I’m just missing something, but I’ve been looking at it too long now and would very much appreciate your help.

Thanks! FAFS

2

That code would be better written as a function but never mind.

The onsubmit handler needs to be in the <form> tag:

<form ...........  onsubmit="this.Confirmation.value=randomNum">
3

Let’s update the code so that it’s more robust and reliable.

  • Move the script to the end of the body, so that it can easily manipulate the page as it’s loading
  • Replace the document.write with an identified span, so that it can be updated from the script
  • Remove the inline HTML event attribute, and replace it with a script statement to perform the update
  • Refactor to make the code clearer and easier to understand
  • Move the random number generator to a separate function
  • Minor adjustments such as to form formatting, moving script out to a separate file, and protecting the global object

<html>
<head>
</head>
<body>
<p>Order Number = <span id="ordernumber"></span></p>
<form id="order">
    <p><input type="hidden" name="orderid"></p>
</form>

<script src="ordernumber.js"></script>
</body>
</html>

ordernumber.js


(function () {
    function generateRandomOrderNumber() {
        var random1 = Math.round(Math.random()*9),
            random2 = Math.round(Math.random()*9),
            time = new Date().getTime();

        return '' + random1 + random2 + time;
    }

    var orderNumber = generateRandomOrderNumber(),
        displayedOrderNumber = document.getElementById('ordernumber'),
        orderForm = document.getElementById('order');

    displayedOrderNumber.innerHTML = orderNumber;
    orderForm.elements.orderid.value = orderNumber;
}());
4

Thanks so much Paul and Logic Ali - I will give it a try!