Solved

Custom prompt box using javascript and CSS

Posted on 2016-09-02
6
258 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 58

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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
LVL 58

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 58

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 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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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.
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…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Suggested Courses

617 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