Custom prompt box using javascript and CSS

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?
LVL 35
YZlatAsked:
Who is Participating?
 
Slick812Commented:
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
 
Kim WalkerWeb Programmer/TechnicianCommented:
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
 
Julian HansenCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
YZlatAuthor Commented:
I cannot use JQuery, must use javascript
0
 
Julian HansenCommented:
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
 
Julian HansenCommented:
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
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.

All Courses

From novice to tech pro — start learning today.