Javascript alert popup form

Question

i have search this whole site and google but cannot find it so, here goes!

i would like a way to show a form when using alert.

for example, when user click post, a dialog pop with asking user a few question like a html form and allow user to click submit or reset or cancel, without loading a new page.

i have seen this done but cannot find the same site again.

i have tried putting htm to alert with little success of posting.

any Help is Highly Appreciated!

Answer 1

What you are looking for is a Prompt Box:

<script type="text/javascript">
    function show_prompt() {
        var name = prompt('Please enter your name','Poppy');
        if (name != null && name != "") {
            alert(name);
        }
    }
</script>

_{example taken from here: http://www.w3schools.com/js/js_popup.asp}

Answer 2

you can do this with jQuery dialogs -- load the dialog on user click and have a form presented in the dialog. have a look at the demos here: http://jqueryui.com/demos/dialog/

Answer 3

To complete @Liv's answer you can use jQuery's UI Reference: Modal Form

The example shows how to create a new user. It will pop up a dialog where you complete a form and you can submit it or you can cancel it.

Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.

It pretty much what I understood you need.

Good luck!

Answer 4

HTML can't be placed in system dialogs generated by alert() , confirm() or prompt() . However, you can download jQuery UI and set it up on your Website. (Make sure you have the "dialog" component chosen on the download page.) Then in your JavaScript:

$("<div>Place your HTML here</div>").appendTo("body").dialog({
     modal: true,
     title: "Enter a title here"
});

Make sure you run this code after the page has loaded by using either window.onload or $(document).ready() .

Ad@m

Answer 5

You will not be able to do this with alert , but you should take a look at how to create modal windows .

Answer 6

I recommend you to use a div popup. What you have to do is setting a background on top of all other elements except the div where your form is. The css property display will be set to 'none' until the form is then activated, by setting display = "block". That can be performed using javascript.