Solved

Is there a way to make this popup calendar work with this form field value?

Posted on 2011-09-14
5
288 Views
Last Modified: 2012-05-12
I have this javascript where I MUST use the value "DATE.VAR1". Of course, this javascript does not like the period between DATE and VAR1. If I take it out, the calendar works as expected. I tried putting quotes and single quotes around the value and that didn't work.

Is there a way to make this work with DATE.VAR1?

<HTML>
<HEAD>
      <TITLE>JavaScript Toolbox - Calendar Popup To Select Date</TITLE>
      <SCRIPT LANGUAGE="JavaScript" SRC="CalendarPopup.js"></SCRIPT>
      <SCRIPT LANGUAGE="JavaScript">
      var cal = new CalendarPopup();
      </SCRIPT>
</HEAD>
<BODY>

<FORM NAME="example">
(View Source of this page to see the example code)<br>

<INPUT TYPE="text" NAME="DATE.VAR1" VALUE="" SIZE=25>
<A HREF="#"
   onClick="cal.select(document.forms['example'].DATE.VAR1,'anchor1','MM/dd/yyyy'); return false;"
   NAME="anchor1" ID="anchor1">select</A>
</FORM>

</BODY>
</HTML>
CalendarPopup.js
0
Comment
Question by:Donnie Walker
  • 3
  • 2
5 Comments
 
LVL 12

Accepted Solution

by:
jet-black earned 500 total points
ID: 36538897
Hi rentawebguy,
You can also access form by its id:

<HTML>
<HEAD>      <TITLE>JavaScript Toolbox - Calendar Popup To Select Date</TITLE>
      <SCRIPT LANGUAGE="JavaScript" SRC="CalendarPopup.js"></SCRIPT>
      <SCRIPT LANGUAGE="JavaScript">
      var cal = new CalendarPopup();
      </SCRIPT>
</HEAD>
<BODY>

<FORM NAME="example">
(View Source of this page to see the example code)<br>

<INPUT TYPE="text" NAME="DATE.VAR1" id='date_var1' VALUE="" SIZE=25>
<A HREF="#"
   onClick="cal.select(document.getElementById('date_var1'),'anchor1','MM/dd/yyyy'); return false;"
   NAME="anchor1" ID="anchor1">select</A>
</FORM>

</BODY>
</HTML>

Open in new window

0
 

Author Comment

by:Donnie Walker
ID: 36539070
That works on the example form but when I add it to my form (which is generated by UNIBasic) I get an error on the getElementById line. Am I missing something?:


OUTPUT.DATA := '<DIV ID="div1" STYLE="position:absolute;visibility:hidden;background-color:white;layer-background-color:white;"></DIV>'
OUTPUT.DATA := '<SCRIPT LANGUAGE="JavaScript">'
OUTPUT.DATA := 'var cal1 = new CalendarPopup("div1"); cal1.showNavigationDropdowns();'
OUTPUT.DATA := '</SCRIPT>'
OUTPUT.DATA := '<A HREF="#" onClick="cal1.select(document.getElementById('DATE_VAR1'),'anchor1','MM/dd/yyyy');' 
OUTPUT.DATA := 'return false;"' 
OUTPUT.DATA := 'TITLE="PICK A DATE"'
OUTPUT.DATA := 'return false;"' 
OUTPUT.DATA := 'NAME="anchor1" ID="anchor1";"><img border="0" src="/docs/images/cal2.jpg" width="25" height="25" name="cal2" onmouseOver="mouseOver1()" onmouseOut="mouseOut1()" /></A>'

Open in new window

0
 
LVL 12

Expert Comment

by:jet-black
ID: 36539171
What is the error you are getting?

I don't think the problem would be related to the javascript anymore.

It may be related with the ' character.
Try to escaping them.
I don't know UniBasic but it may be like that:
OUTPUT.DATA := '<A HREF="#" onClick="cal1.select(document.getElementById(\'DATE_VAR1\'),\'anchor1\',\'MM/dd/yyyy\');'

You may also need escape / too.

Just check the final HTML output of your program and compare it to the working one.
0
 

Author Comment

by:Donnie Walker
ID: 36539251
I don't think the escape is the problem because if I change the field from "DATE.VAR1" to "VAR1" it works fine as previously written (without the getElementByID).

I tried your suggestion but I still get an error. I can't actually see the final code because it has to compile.

Since your solution works with the sample form I'm going to go ahead and accept this as the solution.
0
 
LVL 12

Expert Comment

by:jet-black
ID: 36539324
Thanks for accepting as a solution.
Hope you will find the source of the compiler error too.
Good luck.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jQuery on Submit 4 46
multiple selects 23 49
Implement a function similar to grep in vanilla Javascript 3 22
Javascript object functions help 1 6
This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question