SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2012
    0 Post(s)
    0 Thread(s)

    Random Number in Hidden Form Field - Again

    Hello everyone,

    There is a closed thread re: this ( - 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:

    now = new Date();
    randomNum = '';
    randomNum += Math.round(Math.random()*9);
    randomNum += Math.round(Math.random()*9);
    randomNum += now.getTime();

    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. #2
    SitePoint Guru
    Join Date
    Sep 2006
    0 Post(s)
    0 Thread(s)
    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">
    Tab-indentation is a crime against humanity.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Christchurch, New Zealand
    104 Post(s)
    4 Thread(s)
    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 Code:
    <p>Order Number = <span id="ordernumber"></span></p>
    <form id="order">
        <p><input type="hidden" name="orderid"></p>
    <script src="ordernumber.js"></script>
    Code javascript:
    (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;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member
    Join Date
    Oct 2012
    0 Post(s)
    0 Thread(s)
    Thanks so much Paul and Logic Ali - I will give it a try!

Tags for this Thread


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts