Solved

Custom prompt box using javascript and CSS

Posted on 2016-09-02
6
111 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 54

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
Use Case: Protecting a Hybrid Cloud Infrastructure

Microsoft Azure is rapidly becoming the norm in dynamic IT environments. This document describes the challenges that organizations face when protecting data in a hybrid cloud IT environment and presents a use case to demonstrate how Acronis Backup protects all data.

 
LVL 54

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 54

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

Three Reasons Why Backup is Strategic

Backup is strategic to your business because your data is strategic to your business. Without backup, your business will fail. This white paper explains why it is vital for you to design and immediately execute a backup strategy to protect 100 percent of your data.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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 to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

777 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