Solved

Custom prompt box using javascript and CSS

Posted on 2016-09-02
6
67 Views
1 Endorsement
Last Modified: 2016-09-14
I have been working on a custom prompt box and so far I used a hidden div that is shown on a button click with javascript:


    function openPromptBox() {
	     var pos = FindXY(document.promptForm);
	     var cont = $('promptContainer');
	     var searchBox = $('promptBox');
						
	    searchBox.style.left = (pos.x - 20) + "px";
	    searchBox.style.top = (document.body.scrollTop + 100) + "px";
								
	    cont.style.display = "block";
    }

Open in new window


here is the div:

    <div id="promptContainer">
	    <div id="promptBox">
		  <table>
			<tr>
				<td colspan="2">
					<input type="text" name="result" id="result" size="25"/>
				</td>
			</tr>
			<tr>
				<td>
					<input type="button" id="btnOK" value="OK" />
				</td>
				<td>
					<input type="button" id="btnCancel" value="Cancel" />
				</td>
			</tr>	
		  </table>
	    </div>			
    </div>

Open in new window


Now I need to return to the function openPromptBox the value of textbox result whenever btnOK button is clicked. Is there any way to do that?
1
Comment
Question by:YZlat
6 Comments
 
LVL 21

Expert Comment

by:Kim Walker
ID: 41782474
This custom prompt box doesn't and can't interrupt javascript to wait for user input. You'll have to create another function to handle the user input when the btnOK button is clicked.

Please note that the value entered by the user is retained in the DOM even when the custom prompt box is hidden unless you intend to empty and reuse the custom prompt box. If these input elements are part of the main form, their values will be submitted when the main form is submitted.

Can you provide more details on your objective so we can address them directly.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41782793
As Kim says you need to put an event handler on the btnOk and in that event handler process the value of the input

Example
...
$('#btnOk').click(function() {
   var val = $('#result').val();
   alert('Do something with val[' + val + '] here');
});
...

Open in new window

0
 
LVL 35

Author Comment

by:YZlat
ID: 41788134
I cannot use JQuery, must use javascript
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41788287
I cannot use JQuery, must use javascript

What is this line doing (line 3 of your first listing)
var cont = $('promptContainer');

Open in new window

It looks like JQuery except it is not a valid selector - should be $('#promptContainer')

What library are you using for the $()?
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41788291
Otherwise you are probably wanting to do something like this
In your popup
...
<input type="button" id="btnCancel" value="Cancel" onclick="processForm()"/>
...

Open in new window

JavaScript
function processForm()
{
  var textvalue = document.getElementById('result').value;
  document.getElementById('targetid').value = textvalue;
}

Open in new window

Change 'targetid' to the id of the element you want to send the value to.
0
 
LVL 33

Accepted Solution

by:
Slick812 earned 500 total points
ID: 41790017
greetings YZlat, , I see that you attempt to position the pop-up Prompt with some javascript -
        var pos = FindXY(document.promptForm);
        searchBox.style.left = (pos.x - 20) + "px";
        searchBox.style.top = (document.body.scrollTop + 100) + "px";

When I do <form> pop-ups for Errors or "Extended inputs" , I use a CSS
     position: relative
and
     position: absolute

for the form and an inner div, , here is some example code, that you may or may not be able to see something in it, that can help you with this Prompt pop-up, I do NOT use the <table> as I do not think that it's much suited to the display you need here. I have various CSS in this to get the <form> and pop-up prompt to display with the pop-up Over Top of the <form> (layers), there's javascript to show and hide the prompt, and get the text value from the "result" and put that value in the Preferences text <input>

<!DOCTYPE html><html><head><title>Form Prompt Pop-UP</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input {
  margin: 4px 0;
  }

#prmtFrm {
  position: relative;
  margin: 0 auto;
  width: 23em;
  border: 2px solid #753;
  padding: 10px;
  background: #fed;
  }
  
#prompt {
  display: none;
  position: absolute;
  width: 91%;
  top: 10px;
  left: 3%;
  padding: 12px 4px;
  background: #efe;
  border: 2px solid #060;
  text-align: center;
  z-index: 2;
  }
  
.center49 {
  display: inline-block;
  width: 45%;
  margin: 8px 0;
  }

#adp {
  margin-left: 22%;
  }
  
#result {
  width: 80%;
  }
	
</style>	
<script>
function doPrompt() {
document.getElementById('prompt').style.display = "block";
return false;
}

function hidePmt(sho) {
document.getElementById('prompt').style.display = "none";
if (sho) {
  document.pf.pre.value = document.getElementById('result').value;
  }
return false;
}

</script>

</head>
<body>
<h3>Form Prompt Pop-UP</h3>

<form id="prmtFrm" method="post" name="pf">
All Boxes below MUST be Filled -
<br />Full NAME - <input type="text" name="nm" value="" />
<br />Email - <input type="text" name="em" value="" />
<br />Preferences - <input type="text" name="pre" value="" />
<br /><button id="adp" onclick="return doPrompt();">Add Preference Number</button>
<br /><input type="submit" value="Send Values" />
  <div id="prompt"> Enter your Preference Number below <br />
    <input type="text" id="result" />
    <div class="center49"><button "btnOK" onclick="return hidePmt(1);"> OK </button></div>
    <div class="center49"><button id="btnCancel" onclick="return hidePmt(0);"> Cancel </button></div>
  </div>
</form>

</body>
</html>

Open in new window


because the all <button> are inside the <form> you must return FALSE in onclick to keep them from submitting the <form>

There are many different ways to do a prompt pop-up, with CSS and javascript, the page above works for me in firefox
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

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 …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

706 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

12 Experts available now in Live!

Get 1:1 Help Now