Custom prompt box using javascript and CSS

Question

I am working on a custom prompt box. 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";
}

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>

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?

Do you mean you want to be able to use the result value inside openPromptBox() ? — yezzz, Sep 02 '16 at 19:22

toerd · Answer 1 · 2016-09-02T21:24:38.397

-1

It seems like you are using jquery so here would be a solution:

$('#result').val()

Would take the current value (the text / number / etc) out of your input

now you can simply pass it to your function like so:

$('#btnOK').on('click', function() {

  openPromptBox($('#result').val());

});

That's it.

In the definition of your function you should probably add a parameter which is then used in the function:

function openPromptBox(textFromInput){

   alert(textFromInput);

}

JSFiddle: https://jsfiddle.net/01bkkgzd/2/

UPDATE:

Without JQuery it would be:

document.getElementById("result").value

which will get the value of the input

Example for the onclick action and the following function call

document.getElementById("btnOK").addEventListener('click', function() {

  openPromptBox(document.getElementById("result").value);

});

JSFiddle: https://jsfiddle.net/01bkkgzd/5/

edited Sep 02 '16 at 21:24

answered Sep 02 '16 at 18:43

toerd

99
6

I am not using jquery. `$` is a custom function but it is all plain javascript – Coding Duchess Sep 02 '16 at 19:06
@toerd: don't put `var` in front of the function parameter. It will produce an error. Function arguments behave like local variables anyway. `function openPromptBox(textFromInput){ alert(textFromInput); }` – yezzz Sep 02 '16 at 19:19
@ElenaDBA -> Ill try provide a plain javascript solution – toerd Sep 02 '16 at 19:25
@ElenaDBA hopefully this update will help you completing your task (: have a nice evening! – toerd Sep 02 '16 at 19:35

score -1 · Answer 2 · edited May 23 '17 at 12:01

No, this is impossible.

A prompt opens a modal dialog and blocks all further JavaScript (and interaction with the page) until one of the buttons is activated by the user.

When you insert form fields into an HTML document, there is no blocking (nor could there be, since that would prevent the user from filling in the form).

You need to bind an event listener to the form fields you have created and then handle the response going forwards just like any other asynchronous operation.

Custom prompt box using javascript and CSS

2 Answers2