How to display a 'form in div' in alert box?

Question

I want to display a form in a Div, in alert box.

How would i do this?

Answer 1

If you meant you want to override alert(...) with some <div> you have...

You can NOT...

If you want to display <div> as if it was an alert box:
Read this Excellent article, that offers an easy way of doing it with a jQuery plugin:

This jQuery plugin aims to replace the basic functionality provided by the standard JavaScript alert(), confirm(), and prompt() functions.
...
...

LIVE DEMO

---

Update: (based on the comment)

OK so you want "a form in a div and I want to display that form in alert box" It's can be done with jQuery UI library, it has the Dialog widget.

Check it out here

Answer 2

You would need to create a "custome alert box", see something like this

It requires jQuery , but it's a very easy to learn javascript library

With jQueryUI's Dialog it's as easy as :

$( "#dialog" ).dialog({
    create: function(event, ui) {
        $(this).append($("#formID").clone());
    }
});

though you can just write the form into the div you use for dialog then you just call that dialog!

for example:

<div id="myDialog">
    <form id="frmDialog" action="<?php echo site_url('someContoller/someFunc') ?>" method="post">
        <label for=="username">Username</label>
        <input type="text" name="username" />
        <label for=="password">Password</label>
        <input type="password" name="password" />
    </form>
</div>

<script type="text/javascript">
    $(function() {
        $("#myDialog").dialog({
            // will keep it from opening until called upon
            autoOpen: false,
            // just some effects for opn and close of this "alert" dialog box
            show: "blind",
            hide: "explode",
            // create and tell ok button to submit form, and cancel to close form
            buttons: {
                "OK": function(e) {
                    $("#frmDialog").submit();
                },
                "Cancel": function(e) {
                    $("#myDialog").dialog("close");
                }
            }
        });

        // will turn button into a pretty button and asign it a click event to opent he dialog
        $("#btnDialog").button().click(function(e) {
            $("#myDialog").dialog("open");
        });
    })
</script>

Answer 3

You can't override alert(); , but you can use a third party popup, like jQuery UI's Dialog .