Question

This is probably a simple issue but i’m having a little trouble with it. I have created a form, this form uses php for validation of the fields. I have set-up an echo for the error message, this echos out in a pop-up window upon submission of the form.

On this pop-up there is a close button, i’ve added some javascript to this button to hide the div so the user can continue filling out the form fields that they missed. My only issue is… if the user submits the form again and it fails validation, the pop-up won’t load as it has been hidden.

How can I “temporarily” hide this div and reload it again upon submission? Here is my javascript code for the close button:

<script>
function checkClick(e) {
    var obj = e.srcElement;
    if (obj.id != 'pop-overlay')
        document.getElementById('pop-overlay').style.display = 'none';
    }
</script>

This is my call:

onClick="checkClick(event); return false;"

This is my php echo:

<?php
        if(!empty($errorMessage)) 
        {
            echo("<div id='pop-overlay'><ol>" . $errorMessage . "</ol><img class='close' src='images/close-btn.png' onClick='checkClick(event); return false;'/></div>");
        } 
    ?>

Answer 1

I’m not sure I follow the page logic here, but if you want the div to show again on the same page, you would simply have to reshow the div with code like this:

document.getElementById('pop-overlay').style.display = 'block';

You would put this code wherever you want it to start showing again. If you need to remove the previous div from the page before you put a new one in the page, so that only the new one will show, then you can use this:

var o = document.getElementById('pop-overlay');
o.parentNode.removeChild(o);