Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Aug 2013
    Posts
    141
    Thanks
    22
    Thanked 0 Times in 0 Posts

    javascript alert box with dropdown list in it

    Is it possible to have a drop down list inside an alert box if so how would u do it.

    Thanks

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,974
    Thanks
    15
    Thanked 229 Times in 229 Posts
    No, but you can open a modal window with JS, and put any HTML in that.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Quote Originally Posted by daniel0816 View Post
    Is it possible to have a drop down list inside an alert box if so how would u do it.

    Thanks
    No.

    But you could create a hidden DIV area with your alert message and drop-down within it.
    Probably would use a z-index assignment in the DIV css to assure it comes to the front.

    Trigger for the DIV display would probably be the same as the trigger for your current alert box.
    Last edited by jmrker; 09-03-2013 at 02:44 PM. Reason: Too slow on the keyboard!

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,974
    Thanks
    15
    Thanked 229 Times in 229 Posts
    Quote Originally Posted by jmrker View Post
    No.

    But you could create a hidden DIV area with your alert message and drop-down within it.
    Probably would use a z-index assignment in the DIV css to assure it comes to the front.

    Trigger for the DIV display would probably be the same as the trigger for your current alert box.
    You just described a modal window.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    
    #drop4 {
      position:absolute;visibility:visible;z-Index:5;width:315px;height:330px;background-Color:#FFCC66;text-Align:center;
    }
    
    .mask {
      background-Color:#FFFFCC;
      opacity: .5;filter: alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    }
    
    /*]]>*/
    </style>
    
    </head>
    
    <body>
    <input type="button" name="" value="Open Alert" onmouseup="zxcAlertPopUp.Open('drop4',true);"/>
     <div id="drop4" >
      <br /><br /><br /><br /><br /><br />
      <select id="three" size="5" >
       <option value="opt 1">Option 1</option>
       <option value="opt 2">Option 2</option>
       <option value="opt 3">Option 3</option>
       <option value="opt 4">Option 4</option>
       <option value="opt 5">Option 5</option>
      </select>
      <br /><br />
      <input type="button" name="" value="Close Alert" onmouseup="zxcAlertPopUp.Open('drop4',false);"/>
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Alert Pop Up (03-September-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    zxcAlertPopUp={
    
     Open:function(id,ud){
      var o=this['zxc'+id];
      o?this.open(o,ud):null;
     },
    
     init:function(o){
      var id=o.PopUpID,pop=document.getElementById(id);
      if (pop){
       var oop=this,c=o.Clip,grp=o.Group,mcls=o.Mask,ms=o.Speed,cng=o.OnChange;
       var w=pop.offsetWidth,h=pop.offsetHeight,c=c&&o.clip!='false'?c:null,c=typeof(c)=='string'&&c!='false'?c.charAt(0).toUpperCase():'C',ms=isFinite(ms*1)&&ms>0?ms*1:1000,ctr=true,cng=typeof(cng)=='function'?cng:window[cng],msk=document.createElement('DIV'),mk,m='CHVRLDUIF?';
       o.mcls=typeof(mcls)=='string';
       pop.style.position=o.mcls?'fixed':'absolute';
       pop.style.visibility='hidden';
       pop.style.top='-3000px';
       document.body.appendChild(pop);
       msk.style.position='fixed';
       msk.style.visibility='hidden';
       mk=msk.cloneNode(false);
       msk.style.left='0px';
       msk.style.top='0px';
       msk.style.width='100%';
       msk.className=mcls;
       o.msk=msk;
       mk.style.width=mk.style.height='0px';
       mk.style.bottom='0px';
       mk.style.right='0px';
       o.mk=mk;
       document.body.appendChild(msk);
       document.body.appendChild(mk);
       o.ctr=ctr;
       o.grp=grp;
       o.w=w;
       o.h=h;
       h=Math.round(h/2);
       w=Math.round(w/2);
       o.mde=Math.max(m.indexOf(c),0);
       m=o.mde!=9?o.mde:Math.floor(Math.random()*7);
       o.ra=[[0,h,w,h,w],[0,0,w,o.h,w],[0,h,o.w,h,0],[0,0,0,o.h,0],[0,0,o.w,o.h,o.w],[0,0,o.w,0,0],[0,o.h,o.w,o.h,0],[0,0,o.w,o.h,0],[0,0]];
       c=o.ra[m];
       o.pop=[pop,m!=8?'clip':'',c.concat(),m!='8'?[100,0,o.w,o.h,0]:[100,100],m!='8'?c.concat():[0,0]];
       o.ms=ms;
       o.status=false;
       o.pud=false;
       o.lkud=false;
       o.mpud=false;
       o.mlkud=false;
       o.oncng=typeof(cng)=='function'?cng:false;
       o.grp?zxcAlertPopUp[o.grp]=o:null;
       this['zxc'+id]=o;
       oop.addevt(window,'resize','pp',o);
       oop.addevt(msk,'mouseup','open',o,false);
      }
     },
    
    
     open:function(o,ud){
      var oop=this,grp=zxcAlertPopUp[o.grp];
      ud=ud===true||ud===false?ud:!o.status;
      oop.pp(o,0);
      if (ud&&o.mde==9){
       o.pop[2]=o.ra[Math.floor(Math.random()*7)].concat();
       o.pop[4]=o.pop[2].concat();
      }
      oop.animate(o,o.pop,o.pop[4].concat(),o.pop[ud?3:2],new Date(),o.ms*Math.abs((o.pop[4][0]-(ud?100:0))/100)+5,ud);
      ud?o.pop[0].style.visibility='visible':null;
      o.mcls&&ud?o.msk.style.visibility='visible':null;
      o.status=ud;
      if (ud&&o.grp){
       grp!=o?oop.open(grp,false):null;
       zxcAlertPopUp[o.grp]=o;
      }
      o.oncng?o.oncng(o,ud):null;
      return false;
     },
    
     pp:function(o,xy){
      o.msk.style.height=o.mk.offsetTop+'px';
      o.pop[0].style.left=(o.msk.offsetWidth-o.pop[0].offsetWidth)/2+'px';
      o.pop[0].style.top=(o.msk.offsetHeight-o.pop[0].offsetHeight)/2+'px';
     },
    
     animate:function(o,a,f,t,srt,mS,z){
      clearTimeout(a[7]);
      var oop=this,ms=new Date()-srt,n,z0=0;
      for (;z0<t.length;z0++){
       n=(t[z0]-f[z0])/mS*ms+f[z0];
       a[4][z0]=Math.max(Math.round(isFinite(n)?n:a[4][z0]),0);
      }
      oop.cng(a,a[4]);
      if (ms<mS){
       a[7]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,z); },10);
      }
      else {
       z===false?a[0].style.visibility=o.msk.style.visibility='hidden':null;
       oop.cng(a,z!==false?t:[0,0,0,0,0]);
      }
     },
    
     cng:function(a,t){
      a[1]=='clip'?a[0].style.clip='rect('+t[1]+'px,'+t[2]+'px,'+t[3]+'px,'+t[4]+'px)':this.opc(a[0],t[1]);
     },
    
     opc:function(o,t){
      o.style.filter='alpha(opacity='+t+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=t/100-.001;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    }
    
    zxcAlertPopUp.init({
     PopUpID:'drop4',   // the unique ID name of the Pop Up DIV for a single element as an alternative.                 (default = class name option)
     Clip:'C',          //(optional) the Pop Up display mode(see Note 2)                                                (default = 'C' = center)
     Mask:'mask',       //(optional) the class name of the 'mask' to obsure other page elements.                        (default = no mask)
     Speed:500          //(optional) the animation duration in milli seconds.                                           (default = 1000)
    });
    
    /*
      ** Note 2.
        The Pop Up display modes are:
        'C' = center clip,
        'H' = horizontal clip,
        'V' = vertical clip,
        'R' = right clip,
        'L' = left clip,
        'D' = down clip,
        'U' = up clip,
        'F' = fade,
        'I' = instant,
        '?' = Random Clip
    */
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Exclamation

    Quote Originally Posted by DrDOS View Post
    You just described a modal window.
    Yes, but with different words.

    I also edited my post a minute later as I was too slow with my response.
    You had posted between the time I saw the original and could get my lightning fast fingers to work properly!

  • #7
    Regular Coder
    Join Date
    Aug 2013
    Posts
    141
    Thanks
    22
    Thanked 0 Times in 0 Posts
    Thanks for the alert pop up, it works great but when I try to call it when the form is submitted it half appears and then goes away again, this is how I am trying to do it:

    Code:
    <form method="POST" onsubmit="zxcAlertPopUp.Open('drop4', true);">
    Search Criteria: <input type="text" name="sCriteria" id="Scriteria"/>
    <br/>
    <br/>
    <input type="submit" name="query" value="Run Query"/>
    <div id="drop4">
    <p>Customer Details</p>
    <?php
    if (isset($_POST['sCriteria'])) {
        $qry = query();
    	$results2 = $qry[0];
    	}
    ?>
    </form>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •