?
Solved

Pop-up time select for form field

Posted on 2003-10-30
23
Medium Priority
?
426 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 2000 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
 

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

649 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