Solved

Pop-up time select for form field

Posted on 2003-10-30
23
417 Views
Last Modified: 2012-05-04
I have a form:

<input type="text" name="RequestedTC" size="15">

I need a link next to this form field that the user can click on causing a small pop-up window to appear allowing the user to select a time between 6 AM and 6 PM. As soon as they click a time it closes the pop-up and puts the selected time into the form field in this format: h:mm pm/am ('8:30 am' for example).

First person to program this for me gets the points.

Thanks,
Max
0
Comment
Question by:Max_Davis
  • 8
  • 7
  • 7
  • +1
23 Comments
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 9652104
Here you go:

*************
main.htm
***************
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
function newWindow(strWin,strURL,intX,intY,intWidth,intHeight){
      strWin =window.open(strURL,strWin,'left=' + intX + ', screenX =' + intX + ', top=' + intY + ', screenY=' + intY + ', width=' + intWidth + ', height=' + intHeight + ', scrollbars=yes, toolbar=yes');
      strWin.focus();
}

//-->
</SCRIPT>
</HEAD>
<BODY>

<FORM action="" method=POST id=form1 name=form1>
<input type="text" name="RequestedTC" size="15"><a href= # onClick="newWindow('timePop','timePop.htm',0,0,200,200); return false;">Select time</a>

</FORM>
</BODY>
</HTML>


**********
timePop.htm
***********

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
function setForm(){
      var strValue=document.forms[0].select1.options[document.forms[0].select1.selectedIndex].text;
      window.opener.document.forms[0].RequestedTC.value=strValue;
      window.close();

}
//-->
</SCRIPT>

</HEAD>
<BODY>
<FORM action="" method=POST id=form1 name=form1>
<SELECT id=select1 name=select1>
      <OPTION>1:00 AM</OPTION>
      <OPTION>2:00 AM</OPTION>
      <OPTION>3:00 AM</OPTION>
      <OPTION>4:00 AM</OPTION>
      <OPTION>5:00 AM</OPTION>
      <OPTION>6:00 AM</OPTION>
</SELECT>
<INPUT type="button" value="Select Time" id=button1 name=button1 onClick=setForm()>
</FORM>
</BODY>
</HTML>
0
 
LVL 7

Expert Comment

by:Xxavier
ID: 9652177
this as well, a little simpler

<html>

<head><script>
function popup(){
win=window.open("","","")
str='<form ><p><select  name="s" size="1" onchange="self.opener.document.f1.t1.value=s.value">'
str+='<option value="10:30">10:30</option><option value="11:00">11:00</option>'
str+='<option value="11:30">11:30</option></select></p></form>'
win.document.write(str)}
</script>

<title></title>
</head>

<body>

<form name="f1">
  <p><input type="text" name="t1" size="20"></p>
</form>

<p onclick="popup()">link</p>
</body>
</html>
0
 

Author Comment

by:Max_Davis
ID: 9652194
Sorry, I guess my description didn't explain that I wanted the time selection popup to list the times as links.

For example in the popup it would look like this:

6 | 7 | 8 | 9 | 10 | 11 | 12 | 1 | 2 | 3 | 4 | 5 | 6

when you click on the 7 it would pass "7:00 am" to the form field.
0
 
LVL 25

Expert Comment

by:devic
ID: 9652195
<html>
<body>

<script>
function runit()
{
      var popup=window.open("","","width=200,height=100");
      var s="<html><body><form>"
      s+="<select name=hours>";
      for(var i=1;i<7;i++)
      {
            s+="<option value=0"+i+">0"+i
      }
      s+="</select>";
      s+="<select name=minutes>";
      for(var j=0;j<60;j++)
      {
            s+="<option value="+(j<10?'0'+j:j)+">"+(j<10?'0'+j:j)
      }
      s+="</select>";
      s+="<select name=ampm>";
      s+="<option value=am>am";
      s+="<option value=pm>pm";
      s+="</select>";
      s+="<input type=button onclick=\"opener.document.f1.RequestedTC.value=this.form.hours.value+':'+this.form.minutes.value+' ' + this.form.ampm.value;self.close()\" value=\"ready\">";
      s+="</form></body></html>"
      popup.document.write(s)
}
</script>

<form name=f1>
<input type="text" name="RequestedTC" size="15"><input type=button onclick=runit() value="set time">
</form>

</body>
</html>
0
 
LVL 25

Accepted Solution

by:
devic earned 500 total points
ID: 9652222
<html>
<body>

<script>
function runit()
{
      var popup=window.open("","","width=200,height=100");
      var s="<html><body><form>"
      s+="<select name=hours>";
      for(var i=6;i<13;i++)
      {
            s+="<option value="+(i<10?'0'+i:i)+">"+(i<10?'0'+i:i)
      }
      s+="</select>";
      s+="<select name=minutes>";
      for(var j=0;j<60;j++)
      {
            s+="<option value="+(j<10?'0'+j:j)+">"+(j<10?'0'+j:j)
      }
      s+="</select>";
      s+="<select name=ampm>";
      s+="<option value=am>am";
      s+="<option value=pm>pm";
      s+="</select>";
      s+="<input type=button onclick=\"opener.document.f1.RequestedTC.value=this.form.hours.value+':'+this.form.minutes.value+' ' + this.form.ampm.value;self.close()\" value=\"ready\">";
      s+="</form></body></html>"
      popup.document.write(s)
}
</script>

<form name=f1>
<input type="text" name="RequestedTC" size="15"><input type=button onclick=runit() value="set time">
</form>

</body>
</html>
0
 
LVL 25

Expert Comment

by:devic
ID: 9652234
as links???
and with all minutes?

6 | 6.01 | 6.02......
0
 

Author Comment

by:Max_Davis
ID: 9652258
Not with all minutes, just the hours.
0
 

Author Comment

by:Max_Davis
ID: 9652297
Actually, on second though.. i'm sorry. I guess I will just use your code devic, I messed with it a little bit and made it work for me.

Thank you for the help.

- Max
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 9652304
Here is the updated timePop with links:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
function setForm(strValue){
      window.opener.document.forms[0].RequestedTC.value=strValue;
      window.close();

}
//-->
</SCRIPT>

</HEAD>
<BODY>

<a href=# onClick="setForm('1:00AM');return false;">1:00 AM</a>
<a href=# onClick="setForm('2:00AM');return false;">2:00 AM</a>

</FORM>
</BODY>
</HTML>


FtB
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 9652307
What was wrong with my first post? And this last one?

FtB
0
 

Author Comment

by:Max_Davis
ID: 9652310
Oh, is it possible to have the minutes drop down only show the following options: 00, 15, 30 and 45?
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

Author Comment

by:Max_Davis
ID: 9652332
fritz: Your code looked good but it didn't even need to be a pop-up if all it was.. was a select box with times, could have had that on the form main page. Probably my error for not being descriptive enough, i'm sorry.
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 9652344
I am just a little miffed because your question said:

>>I need a link next to this form field that the user can click on causing a small pop-up window to appear allowing the user to select a time between 6 AM and 6 PM. As soon as they click a time it closes the pop-up and puts the selected time into the form field in this format: h:mm pm/am ('8:30 am' for example).<<

So I created a popup that passed the value back to the form just like you asked. I didn't feel that it was my place to tell you how to design your page.....


FtB
0
 

Author Comment

by:Max_Davis
ID: 9652395
fritz: I am sorry, thats the nature of the EE beast.. I award the points for the code I end up using, the code that best fits my needs.

How do you give "Assist" points?
0
 
LVL 25

Expert Comment

by:devic
ID: 9652401
<html>
<body>

<script>
function runit()
{
      var popup=window.open("","","width=400,height=100");
      var s="<html><body>"
      var j=6;
      var b=false;
      for(var i=1;i<14;i++)
      {
            
            s+="<a href='ja"+"va"+"scr"+"ipt:opener.document.f1.RequestedTC.value=opener.f("+i+");self.close();'>"+j+"</a> | ";
            if(j>11){b=true}
            if(b){j--}else{j++;}
      }
      s+="</body></html>"
      popup.document.write(s)
}
function f(num)
{
      if(num==1) return "06:00 am"
      if(num==2) return "07:00 am"
      if(num==3) return "08:00 am"
      if(num==4) return "09:00 am"
      if(num==5) return "10:00 am"
      if(num==6) return "11:00 am"
      if(num==7) return "12:00 am"
      if(num==8) return "11:00 am"
      if(num==9) return "10:00 am"
      if(num==10) return "9:00 am"
      if(num==11) return "8:00 am"
      if(num==12) return "7:00 am"
      if(num==13) return "6:00 am"
}
</script>

<form name=f1>
<input type="text" name="RequestedTC" size="15"><input type=button onclick=runit() value="set time">
</form>

</body>
</html>
0
 
LVL 25

Expert Comment

by:devic
ID: 9652414
oops am-pm
i don’t know good what are am pm :)


    if(num==1) return "06:00 am"
    if(num==2) return "07:00 am"
    if(num==3) return "08:00 am"
    if(num==4) return "09:00 am"
    if(num==5) return "10:00 am"
    if(num==6) return "11:00 am"
    if(num==7) return "12:00 am"
    if(num==8) return "11:00 pm"
    if(num==9) return "10:00 pm"
    if(num==10) return "09:00 pm"
    if(num==11) return "08:00 pm"
    if(num==12) return "07:00 pm"
    if(num==13) return "06:00 pm"
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 9652424
That is generally done by posting a separate question with a title like "Points for Fritz the Blank"

Of course I don't want you to be awarding points when the code is not what you asked for; I guess that I am suggesting that a little more time goes into formulating the question so that a good response will be code that you can use.

FtB
0
 

Author Comment

by:Max_Davis
ID: 9652427
Wow, thanks devic. That is exactly what I was talking about. Now a have both versions. I love options. :)

For your first one, can you recode it so it only gives 00, 15, 30, 45 for minute options?
0
 
LVL 25

Expert Comment

by:devic
ID: 9652907
easy ;)
===================
<html>
<body>

<script>
function runit()
{
    var popup=window.open("","","width=200,height=100");
    var s="<html><body><form>"
    s+="<select name=hours>";
    for(var i=6;i<13;i++)
    {
         s+="<option value="+(i<10?'0'+i:i)+">"+(i<10?'0'+i:i)
    }
    s+="</select>";
    s+="<select name=minutes>";
         s+="<option value=00>00";
      s+="<option value=15>15";
      s+="<option value=30>30";
      s+="<option value=45>45";
    s+="</select>";
    s+="<select name=ampm>";
    s+="<option value=am>am";
    s+="<option value=pm>pm";
    s+="</select>";
    s+="<input type=button onclick=\"opener.document.f1.RequestedTC.value=this.form.hours.value+':'+this.form.minutes.value+' ' + this.form.ampm.value;self.close()\" value=\"ready\">";
    s+="</form></body></html>"
    popup.document.write(s)
}
</script>

<form name=f1>
<input type="text" name="RequestedTC" size="15"><input type=button onclick=runit() value="set time">
</form>

</body>
</html>
0
 

Author Comment

by:Max_Davis
ID: 9652921
Yeah, easy.. but i'm lazy. :)
Thanks again.
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 9653289
@devic--

I am glad you got the points for all of your hard work in this thread, however, is it just me or did I not answer the question as asked, very quickly after it was requested? I feel like I am getting the short end of the stick here because the question did not reflect what was wanted....

FtB
0
 
LVL 25

Expert Comment

by:devic
ID: 9653735
@fritz_the_blank

you are right you was first with working example, my RESPECT to you!

i understood that format h:mm am/pm needs minutes from 00 to 59.

i think Max_Davis is not quite right:
  1. did not describe what exactly needs.
  2. points for first answer is not good idea, because first answer could be with mistakes or incomplete.


reagrds,
devic

P.S.
i don't receive mails with notification for new comments.
somebody else has the same problem?


0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 9653759
It is a little funky today as far as the email notifications are going.

Max_Davis may not realize that we are not paid employees of EE, but rather, modern-day good samaritans taking time out of our busy day to help those in need. One way to respect that giving spirit might be to take a little more time in formulating questions so that s/he doesn't waste anyone's time.

See you around, devic.

FtB
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

746 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

10 Experts available now in Live!

Get 1:1 Help Now