Solved

How do I make an input field open a javascript alert box?

Posted on 2011-09-22
5
248 Views
Last Modified: 2012-06-22
I have a form that has a date field and an icon for a popup calendar.

When the user clicks inside the date field I want an alert box to appear telling them they must use the icon for the popup calendar.

Is there a way to do this by the date field id? I may not be able to add code to the actual date field input.
0
Comment
Question by:Donnie Walker
5 Comments
 
LVL 51

Accepted Solution

by:
HainKurt earned 500 total points
ID: 36582383
try this
<input id=dateField>
<script>
function msg(){alert ("use button!");}

var inp = document.getElementById("dateField");
if( inp.attachEvent ){
   inp.attachEvent("onclick",function(){msg();});
} else {
   inp.setAttribute("onclick", "msg();"); 
}
</script>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36582432
what about :

<script type="text/javascript" language="javascript">
window.onload = function() {  document.getElementById("dateFieldID").setAttribute("readonly", "true"); }
</script>

or


<script type="text/javascript" language="javascript">
window.onload = function() {  document.getElementsByName("dateFieldName")[0].setAttribute("readonly", "true"); }
</script>
0
 
LVL 4

Expert Comment

by:jmnf
ID: 36582470
Not an actual answer, just my 2 cents.

I use jQuery Datepicker for selecting dates, and show it on icon and on textbox click like so

$( "#datepicker" ).datepicker({
    showOn: "both",
    buttonImage: "images/calendar.gif",
});

Open in new window


make input text "readonly" like this

<input type="text" name="someName" value="someValue" readonly="readonly" />

Open in new window


or if by any chance you are using vb.net or c# you can add it to a textbox in your page load like

textbox1.attributes.add("readonly","readonly")

Open in new window

0
 
LVL 51

Expert Comment

by:HainKurt
ID: 36582476
or what about this (when it is clicked button will be called :)
<input id=dateField> <img id=imgCalendar onClick="calendar('datefield')" src="calendar.gif" width=20 height=20>
<script>
function calendar(elm){alert ("Calendar popup!");}
function msg(){alert ("use button!");}

var inp = document.getElementById("dateField");
if( inp.attachEvent ){
   inp.attachEvent("onclick",function(){imgCalendar.click();});
} else {
   inp.setAttribute("onclick", "imgCalendar.click();"); 
};
</script>

Open in new window

0
 

Author Closing Comment

by:Donnie Walker
ID: 36582655
thanks!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

760 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now