[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 427
  • Last Modified:

Pop-up time select for form field

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
Max_Davis
Asked:
Max_Davis
  • 8
  • 7
  • 7
  • +1
1 Solution
 
fritz_the_blankCommented:
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
 
XxavierCommented:
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
 
Max_DavisAuthor Commented:
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.

 
devicCommented:
<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
 
devicCommented:
<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
 
devicCommented:
as links???
and with all minutes?

6 | 6.01 | 6.02......
0
 
Max_DavisAuthor Commented:
Not with all minutes, just the hours.
0
 
Max_DavisAuthor Commented:
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
 
fritz_the_blankCommented:
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
 
fritz_the_blankCommented:
What was wrong with my first post? And this last one?

FtB
0
 
Max_DavisAuthor Commented:
Oh, is it possible to have the minutes drop down only show the following options: 00, 15, 30 and 45?
0
 
Max_DavisAuthor Commented:
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
 
fritz_the_blankCommented:
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
 
Max_DavisAuthor Commented:
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
 
devicCommented:
<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
 
devicCommented:
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
 
fritz_the_blankCommented:
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
 
Max_DavisAuthor Commented:
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
 
devicCommented:
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
 
Max_DavisAuthor Commented:
Yeah, easy.. but i'm lazy. :)
Thanks again.
0
 
fritz_the_blankCommented:
@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
 
devicCommented:
@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
 
fritz_the_blankCommented:
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 8
  • 7
  • 7
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now