Question

Lets say I made a big form.
Let one element of the form be like this :

<form>
...

<tr>
<td><div id="username"><input name="username" id="username" type="text"/></div></td>
</tr>

...
</form>

Now I placed a div at the bottom something like this:

<div id="submiter">Submit</div>

Now I have this js:

$("#submiter").click(function() {
    $.post("submiter.php",
        $("#formmain").serialize(),
        function(data) {
        $.each(data,function(){
          id=thisid;
          error=this.error;
          //want some code here to over lay div with the id got with this.id
        }) },'json')
});

Now the php returns json in this format

[{id:formelementid,error:The error}]

Question:
How to overlay completely a div with class errors with the errors in it for simplicity let the div be #username?
A demo would be very nice

Answer 1

This is a CSS question:

.errors {
    position:absolute;
    z-index:2; /* Or higher than parent div */
    width:100%;
    height:100%;
    background-color:#FFF; /* Whatever */
}

If you want to append this div with JQuery, use append^[docs]:

$('<div class="errors"/>').appendTo('#my_form');

In your example, it would work like so:

$("#submiter").click(function() {
    $.post("submiter.php",
        $("#formmain").serialize(),
        function(data) {
            var errors = '';
            $.each(data,function(){
                id=thisid;
                error=this.error;
                errors += error + '<br />'; 
            });
            $('<div class="errors"/>').appendTo('#my_form').html(errors); 
        },'json')
});

To make the overlay go away when the user wants it to, simply apply a click handler:

$('.errors').live('click',function(){
    $(this).remove();
});