HTML form Submit Button close popup using javascript

Question

Here is my problem. I built a popup using javascript and then inserted a HTML form in the popup that asks the user for their email address. How can I make it so when they press submit(button was made in html) the popup will close and the submit button being pressed will execute my php script that stores the email?

Here is my code :

 var moveForce = 15; // max popup movement in pixels var rotateForce = 10; // max popup rotation in deg $(document).mousemove(function(e) { var docX = $(document).width(); var docY = $(document).height(); var moveX = (e.pageX - docX / 2) / (docX / 2) * -moveForce; var moveY = (e.pageY - docY / 2) / (docY / 2) * -moveForce; var rotateY = (e.pageX / docX * rotateForce * 2) - rotateForce; var rotateX = -((e.pageY / docY * rotateForce * 2) - rotateForce); $('.popup') .css('left', moveX + 'px') .css('top', moveY + 'px') .css('transform', 'rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)'); }); 

 <div class="moving-zone"> <div class="popup"> <div class="popup-content"> <div class="popup-text"> <h2>Subscribe to hear about our special offers!</h2> <form method="post" action="contact.php" name="contactform" id="contactform"> <fieldset> <input name="email" type="text" id="email" size="30" placeholder="Email Address"> </fieldset> <fieldset> <button type="submit" class="btn btn-lg" id="submit" value="Submit">Submit</button> </fieldset> </form> </div> </div> </div> </div> 

Also, how can I make it so when the user clicks the screen away from the popup the popup automatically closes or how can I place an X to exit the popup?

Thank You! I understand I could of made the form in java script but I ran into conflict so I am hoping I can do it this way.

Answer 1

u will need to use some javascript code to hide the popup div below is to put u in the right direction...

for example u can make a function:

function hidepopup()
    {
        document.getElementsByClassName('popup').item(0).style.display = 'none';
    }

u can call it onsubmit event

<form name="test" method="post" onSubmit="hidepopup()">
....
elements
....
</form>

u can allso check input values and alert the user before post and close the popup:

<form name="test" method="post" onSubmit="return hidepopup()">
....
elements
....
</form>

and the function will be like this

function hidepopup()
    {
        if (check here if input values are NOT ok)
        {
            return false;
        }
        else
        {document.getElementsByClassName('popup').item(0).style.display = 'none';}
    }

in this case if function returns false, form will not post.

And note that if u post, the browser will load the target page of the form. To avoid this, maybe u can use XMLHttpRequest().