Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Custom prompt box using javascript and CSS

Posted on 2016-09-02
6
Medium Priority
?
543 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 22

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 60

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
Industry Leaders: 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!

 
LVL 60

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 60

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 34

Accepted Solution

by:
Slick812 earned 2000 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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)
Suggested Courses

877 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