• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 657
  • Last Modified:

Javascript Function Help with onclick/onfocus prompt

Hi, I've made a Javascript function that gives a prompt, though is there anyway that if a user clicks on the Subject, the contents of it disappears?
<script language="javascript">
function Test(){
	var ok = prompt("Title", "Subject");
	if (ok){
		window.location = "?root=main" + ok;
	}else{
		return false;
	}
}
</script>

Open in new window

0
eNarc
Asked:
eNarc
1 Solution
 
cyberkiwiCommented:
Not with a native "prompt", but you could achieve it with a div overlay and an input control and some buttons.
0
 
JtRCommented:
why using that ugly prompt (i already forgot that this function exists in javascript) ;D

make a fancy div based form or open a new window which you can control!
0
 
eNarcAuthor Commented:
what should I use and how would I go about achieving this? would anyone provide an example function?
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
flexiwebswCommented:
You could implement a simple blackout script with a popup div.

you can find an example for what you need below.

<head>
<style type="text/css">
body{
      z-index: 0;
}
#outer {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0px;
      display: none;
      z-index: 90;
}
.popup {
      display: none;
      position: relative;
      background-color:#FFF;
      width: 300px;
      height: 100px;
      z-index: 100;
      margin: auto;
}
#popuptitle {
      color: #FFF;
      background-color:#0CF;
      font-weight: bold;
      height: 20px;
      text-align: center;
}
.popupbody {
      padding-top: 10px;
      padding-bottom: 10px;
      color: #FFF;
      text-align: center;
}

</style>
<script type="text/javascript">

 function addEvent(obj ,evt, fnc)
      {
        if (obj.addEventListener)
          obj.addEventListener(evt,fnc,false);
        else if (obj.attachEvent)
          obj.attachEvent('on'+evt,fnc);
        else
          return false;
        return true;
      }

      function removeEvent(obj ,evt, fnc)
      {
        if (obj.removeEventListener)
          obj.removeEventListener(evt,fnc,false);
        else if (obj.detachEvent)
          obj.detachEvent('on'+evt,fnc);
        else
          return false;
        return true;
      }


      //----------

      function appendElement(node,tag,id,htm)
      {
        var ne = document.createElement(tag);
        if(id) ne.id = id;
        if(htm) ne.innerHTML = htm;
        node.appendChild(ne);
      }
     
        
        //----------
        

      function showPopup(p, o)
      {
        scroll(0,0);
              if (document.all)
            {              
                document.body.scroll = "no";
            }
            else
            {
                var oTop = document.body.scrollTop;
                document.body.style.overflow = "hidden";
                document.body.scrollTop = oTop;
            }
            greyout(true);
        document.getElementById(p).style.display = 'block';
            document.getElementById(o).style.display = 'inline';
      }

      function hidePopup(p, o)
      {
        greyout(false);
             document.body.scroll = "";
            document.body.style.overflow = "";
        document.getElementById(p).style.display = 'none';
            document.getElementById(o).style.display = 'none';
      }

      //----------
      function greyout(d,z)
      {
        var obj = document.getElementById('greyout');
        if(!obj)
        {
          appendElement(document.body,'div','greyout');
          obj = document.getElementById('greyout');
          obj.style.position = 'absolute';
              obj.style.height = '100%';
              obj.style.width = '100%';
              obj.style.position = 'fixed';
          obj.style.top = '0px';
          obj.style.left = '0px';
          obj.style.background = '#111';
          obj.style.opacity = '.5';
          obj.style.filter = 'alpha(opacity=50)';
        }
        if(d)
        {
          if(!z){ z - 50 }
          obj.style.zIndex = 50;
              obj.style.height = '100%';
              obj.style.width = '100%';
          obj.style.display = 'block';
          addEvent(window,'resize',greyoutResize);
        }
        else
        {
          obj.style.display = 'none';    
          removeEvent(window,'resize',greyoutResize);
        }
      }


      function greyoutResize()
      {
        var obj = document.getElementById('greyout');
        obj.style.height = '100%';
        obj.style.width  = '100%';
      }

</script>
</head>
<body>
<script language="javascript">
function test(){
      hidePopup('popup', 'outer');
            window.location = "?root=main" + document.getElementById('popuptext').value;
}
function test2(title, subject){
      document.getElementById('popuptitle').innerHTML = title;
      document.getElementById('popuptext').value = subject;
      var w = window.innerHeight / 2;
      document.getElementById('popup').style.marginTop = w - 50 + 'px';
      showPopup('popup', 'outer');
}
function clr(id){
      document.getElementById(id).value = '';
}
</script>
<div id="outer">
<div id="popup" class="popup">
<div id="popuptitle"></div>
<div class="popupbody">
<input type="text" id="popuptext" value="" onfocus="clr('popuptext')" onclick="clr('popuptext')" />
<br/><br/>
<input type="button" name="ok" id="ok" value="OK" onclick="test()" />
<input type="button" value="Cancel" onclick="hidePopup('popup', 'outer');" />
</div>
</div>
</div>
<a onclick="test2('My Title', 'My Subject')">test</a>
</body>
</html>


<head>
<style type="text/css">
body{
	z-index: 0;
}
#outer {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	display: none;
	z-index: 90;
}
.popup {
	display: none;
	position: relative;
	background-color:#FFF;
	width: 300px;
	height: 100px;
	z-index: 100;
	margin: auto;
}
#popuptitle {
	color: #FFF;
	background-color:#0CF;
	font-weight: bold;
	height: 20px;
	text-align: center;
}
.popupbody {
	padding-top: 10px;
	padding-bottom: 10px;
	color: #FFF;
	text-align: center;
}

</style>
<script type="text/javascript">

 function addEvent(obj ,evt, fnc)
      {
        if (obj.addEventListener)
          obj.addEventListener(evt,fnc,false);
        else if (obj.attachEvent)
          obj.attachEvent('on'+evt,fnc);
        else
          return false;
        return true;
      }

      function removeEvent(obj ,evt, fnc)
      {
        if (obj.removeEventListener)
          obj.removeEventListener(evt,fnc,false);
        else if (obj.detachEvent)
          obj.detachEvent('on'+evt,fnc);
        else
          return false;
        return true;
      }


      //----------

      function appendElement(node,tag,id,htm)
      {
        var ne = document.createElement(tag);
        if(id) ne.id = id;
        if(htm) ne.innerHTML = htm;
        node.appendChild(ne);
      }
      
	  
	  //----------
	  

      function showPopup(p, o)
      {
        scroll(0,0);
		  if (document.all)
            {               
                document.body.scroll = "no";
            }
            else
            {
                var oTop = document.body.scrollTop;
                document.body.style.overflow = "hidden";
                document.body.scrollTop = oTop;
            }
		greyout(true);
        document.getElementById(p).style.display = 'block';
		document.getElementById(o).style.display = 'inline';
      }

      function hidePopup(p, o)
      {
        greyout(false);
		 document.body.scroll = "";
            document.body.style.overflow = "";
        document.getElementById(p).style.display = 'none';
		document.getElementById(o).style.display = 'none';
      }

      //----------
      function greyout(d,z)
      {
        var obj = document.getElementById('greyout');
        if(!obj)
        {
          appendElement(document.body,'div','greyout');
          obj = document.getElementById('greyout');
          obj.style.position = 'absolute';
		  obj.style.height = '100%';
		  obj.style.width = '100%';
		  obj.style.position = 'fixed';
          obj.style.top = '0px';
          obj.style.left = '0px';
          obj.style.background = '#111';
          obj.style.opacity = '.5';
          obj.style.filter = 'alpha(opacity=50)';
        }
        if(d)
        {
          if(!z){ z - 50 }
          obj.style.zIndex = 50;
		  obj.style.height = '100%';
		  obj.style.width = '100%';
          obj.style.display = 'block';
          addEvent(window,'resize',greyoutResize);
        }
        else
        {
          obj.style.display = 'none';    
          removeEvent(window,'resize',greyoutResize);
        }
      }


      function greyoutResize()
      {
        var obj = document.getElementById('greyout');
        obj.style.height = '100%';
        obj.style.width  = '100%';
      }

</script>
</head>
<body>
<script language="javascript">
function test(){
	hidePopup('popup', 'outer');
		window.location = "?root=main" + document.getElementById('popuptext').value;
}
function test2(title, subject){
	document.getElementById('popuptitle').innerHTML = title;
	document.getElementById('popuptext').value = subject;
	var w = window.innerHeight / 2;
	document.getElementById('popup').style.marginTop = w - 50 + 'px';
	showPopup('popup', 'outer');
}
function clr(id){
	document.getElementById(id).value = '';
}
</script>
<div id="outer">
<div id="popup" class="popup">
<div id="popuptitle"></div>
<div class="popupbody">
<input type="text" id="popuptext" value="" onfocus="clr('popuptext')" onclick="clr('popuptext')" />
<br/><br/>
<input type="button" name="ok" id="ok" value="OK" onclick="test()" />
<input type="button" value="Cancel" onclick="hidePopup('popup', 'outer');" />
</div>
</div>
</div>
<a onclick="test2('My Title', 'My Subject')">test</a>
</body>
</html>

Open in new window

0
 
eNarcAuthor Commented:
that is very fancy, I like it allot, thankyou.
0
 
flexiwebswCommented:
You are more than welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now