What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image
    JotForm Support

    Get date/time field of the user with month short names

    Asked by EltonCris on July 07, 2013 at 10:49 AM

    @ ssmediator 

    Here's how to get user's date/time without using date/time tool in your form.

    1. Add a hidden field to your form. This is where the user's date/time will be prepopulated.

    2. Get your form source code: How to get your Form Source Code

    3. Add this script at the bottom part of the entire form source code,

     

    <script type="text/javascript">

    //Get Current Date

    var monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun",

        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];

      var currentDate = new Date()

      var day = currentDate.getDate()

      var month = monthNames[currentDate.getMonth()]

      var year = currentDate.getFullYear()

    //Get Current Time

      var currentTime = new Date()

      var hours = currentTime.getHours()

      var minutes = currentTime.getMinutes()

      if (minutes < 10)

      minutes = "0" + minutes

      var suffix = "AM";

      if (hours >= 12) {

      suffix = "PM";

      hours = hours - 12;

      }

      if (hours == 0) {

      hours = 12;

      }

    //Place date & time in the hidden field

      $('input_3').value = month + " " + day + " " + year + " " + hours + ":" + minutes + " " + suffix;

    </script>

    4. Notice the highlighted input_3 in blue color on this script, this is the field ID of the hidden field. You can find that out in your form source code. Hidden fields are placed mostly on the last part of your form source code just above the ending </form> tag. You can easily find it since it has type="hidden" in the attribute. Now, simply replace input_3 with your hidden field ID.

    5. Save your html form and make a test!

    Feel free to let us know if you have further questions. Thanks!

     

    form source html form JotForm style source
  • Profile Image

    Answered by ssmediator on July 07, 2013 at 02:15 PM

    WOW, I would NEVER have figured out that code on my own; so thank you!!!!

    But, sigh, I did as you said, but I must've done something wrong!  Now, no date/time appears on any of the email notifications.

    At first, by mistake, I copied & pasted your code AS IS, and the date/time appeared in the Name field (which is ID/Input 3) -- so I know that the code does what it is meant to do. I just don't know why it isn't working in the DateNTime field.
         (I eventually remembered to change the INPUT field data; so istead of using input_3, I used input_20, which is, if I am correct, the ID for the DateNTime field.)

    What did I do wrong?! (The form it's on is: 31865854233156)

  • Profile Image
    JotForm Support

    Answered by jonathan on July 07, 2013 at 03:06 PM

    @ ssmediator

    Hi,

    When using the form's source code, everytime you modify the form in the form builder, you will have to update also the source code of the form.

    So, if you made chages to the test form in the form builder, you will have to gather again its source code, so that it is updated. Can you please share to us the URL of your website where you have applied this form. We will check further.

    Thanks.

  • Profile Image

    Answered by ssmediator on July 07, 2013 at 03:59 PM

    It's here

    https://sites.google.com/site/salsmediationservice/tf

  • Profile Image

    Answered by jeanettebmz on July 07, 2013 at 06:38 PM

    were you able to grab full source code again (from our form builder) and pasted it into the webpage, once you applied the recommend changes?

  • Profile Image

    Answered by ssmediator on July 07, 2013 at 11:27 PM

    I'm not sure what you are asking. 

    I input the above orange code AS IS in my form's Inject Custom CSS box, except for changing the field ID to 20--as I indicated earlier.  I also input it in the Google gadget box on my website.

  • Profile Image

    Answered by ssmediator on July 08, 2013 at 03:49 AM

    Steps 1-4 make sense, but step 5 is unclear to me:
    5. Save your html form and make a test!
    Where do I save it?  As I said in my last post, I saved it (input it) in my form's Inject Custom CSS box.  If it does not belong there, then where?

     

    Should this be so difficult to accomplish--just wondering...

     

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on July 08, 2013 at 04:13 AM

    Hi,

    Sorry for not clarifying it well.

    The step 5 simply means you have to save the form script as .html file e.g. form.html or if you prefer to embed the entire script directly to your page, that's fine.

    Now, I checked the embedded form script in your page and it seems the date/time script is marked as comments, this is the reason why it's not working.

    Please redo the steps again, delete the embedded script in your page, copy the script provided here and change input_3 to input_20 (your hidden box fied ID). After that, removed the comments part of the date/time script, they are:

    //Get Current Date
    //Get Current Time
    //Place date & time in the hidden field

    Google seems to be filtering the new lines (carriage return) in the embedded script and carried the script in line with these comments that's why they aren't working. Re-embed the entire script again to your page and that should solved it.

    Let us know if you come across any issues. Thanks!

  • Profile Image

    Answered by ssmediator on July 08, 2013 at 03:27 PM

    I am sorry, but I am totally and utterly confused!

    Ex: "save the form script as .html file e.g. form.html"  -- Save it where?  Such as:
    to my Desktop?
    to my My Documents folder?
    to my Jotform form? If so, in the Inject CSS Preferences box?
    to my website?
    to ??

    Ex: "delete the embedded script in your page"  -- By "page", do you mean delete something from my website, or delete something from my Jotform form? 
         And, do you mean that I should delete the purple code text that was showing in my last post--which, for some reason, is now gone.

    Since I do not know what I am supposed to do, and since it seems impossible to relay it to me in an exact manner, I will just leave my form as is.

    Thanks anyway.

  • Profile Image

    Answered by jeanettebmz on July 08, 2013 at 08:39 PM

     

    Ex: "save the form script as .html file e.g. form.html"  -- Save it where?  Such as:
    to my Desktop?
    to my My Documents folder?
    to my Jotform form? If so, in the Inject CSS Preferences box?
    to my website?
    to ??

    Since you are using the full source code, the destination path should be out of Jotform's environment, and the location doesn't matter as long as you know where it is later on whenever you upload it to your hosting service via FTP

    Ex: "delete the embedded script in your page"  -- By "page", do you mean delete something from my website, or delete something from my Jotform form?

    You need to insert the Custom CSS code suggested above, then you need to grab such code and open your webpage file, say  it's  index.htm

    Which it should be already uploaded to your hosting service, but you should also have a copy of  it in your computer, so it's a matter of making the changes using a text editor (such as notepad), then grabing the html file and uploading via FTP to your hosting service

    If you still have challenges with this, please paste for us the URL where the form is currently embedded, it should be something  http://www.yoursite.com/contact.htm or similar

  • Profile Image

    Answered by ssmediator on July 08, 2013 at 09:36 PM

    It's here

    https://sites.google.com/site/salsmediationservice/tf

  • Profile Image
    JotForm Support

    Answered by EltonCris on July 09, 2013 at 12:53 AM

    Hi,

    Ex: "save the form script as .html file e.g. form.html"  -- Save it where?  Such as:

    to my Desktop?

    to my My Documents folder?

    to my Jotform form? If so, in the Inject CSS Preferences box?

    to my website?

    to ??

    No worries, we can assist you anytime. Like our Support Manager Jean, there's no way to saved it back to JotForm since you are using form source code. You have to copy the form source code together with the date/time script and paste it to your Google Embed Gadget (whatever the name of that) just like what you just did on the form in this page here: https://sites.google.com/site/salsmediationservice/tf

    Ex: "delete the embedded script in your page"  -- By "page", do you mean delete something from my website, or delete something from my Jotform form? 

    Delete the existing source code (form source code + date/time script) embedded in your google site. If I'm correct, that is in your embed gadget. Or, you can replace the source code with the updated one instead of deleting it. 

    And, do you mean that I should delete the purple code text that was showing in my last post--which, for some reason, is now gone.

    Sorry, I have removed it since it's making the thread long and there's no use for it. What I mean on this part is to delete the comments section of the date/time script provided avoid.

    Ok, I have created a visual guide:

    After doing this, embed the entire source code (form source code with the date/time script appended) in your google embed gadget.

    I hope this clears now. Thank you!

  • Profile Image

    Answered by ssmediator on July 09, 2013 at 11:26 PM

    I give up!!

    No matter what I do, the month will NOT change from showing as 07 to showing as July!  I've taken too much time to try to make this work.  My conclusion is that it will not work.  I will just have to stick with: 07-07-2013 and not July 07 2013

    If you want to look, the form is on my site, still at the same page: https://sites.google.com/site/salsmediationservice/tf

    With this NEW form # 31898330752157

  • Profile Image
    JotForm Support

    Answered by EltonCris on July 10, 2013 at 07:53 AM

    @ssmediator

    You still have date/time calendar field in your form that was hidden via CSS Injection. That's the reason why you see dates like 07-07-2013. Ok, I just checked your embedded form and you are using iframe embed code, that's another reason why the date/time script isn't working. Note that the script works fine, it was just a problem on embedding and some limitations on Google Sites.

    I've found out that Google Sites is stripping script codes that's why it is not possible to embed form using source code. You need to use iframe method if you still want to go this route.

    Ok, to make things easier, I have here the form.htmlThis is your form source code with the date/time script. Do the following if you want to embed this to your page.

    1. Download this zip file and extract it. You should be able to see the file form.html. This is your form with the date/time script, I have created it for your convenience.

    2. Upload this file to your server or to any free hosting sites like http://www.awardspace.com/You can't upload that to your Google Site, that is not possible.

    3. Add iframe gadget to your Google Site.

    Enter the uploaded form.html URL.

    That's it! Here's a working demo: https://sites.google.com/site/jotformtestform/

    Hope this works now. Thanks!

  • Profile Image

    Answered by ssmediator on July 11, 2013 at 03:28 AM

    As I said earlier, I've spent too much time on this, and so I have decided to just move on. 

    I know that you created a html file and suggested that I download it, then upload it, then embed it, but my head is spinning!  This should be a very simple change to make, not one that takes many days and many attempts.  So I will settle for it the way it is--in numeric form.  So thanks anyway; I appreciate your time!

    p.s. FYI, there is no downloadable zip file here.

    p.p.s. I like YOUR demo!  Too bad it's not mine!

  • Profile Image
    JotForm Support

    Answered by EltonCris on July 11, 2013 at 03:41 AM

    It's here, sorry: https://shots.jotform.com/elton/form.zip

    Thanks!

  • Profile Image

    Answered by ssmediator on July 11, 2013 at 04:07 AM

    OK.

    By the way, if there is ever an easy way to make this simple type of change (from 07 to July) [like simply injecting a simple CSS code; and not downloading, uploading, unzipping, hositng, embedding, etc.], I would be interested in knowing; until then, that's all for now.  Thanks.