Opening a form submitted message in a centered popup window

Question

I'm trying to open a page that let's the user know their form as been submitted in a pop up window that is centered on the screen. I have got the page to open in a pop up window but I can't figure out how to center the window with my current code (I was using a different js code that opened/centered the pop up but it also continued to open a new page with the same info).

Here is the code for the form currently...

 <form method="post" action="php/sendmail.php" target="POPUPW" onsubmit="POPUPW = window.open('about:blank','POPUPW','width=600,height=175');" id="contact">
    <h2>Name: (required)</h2><br />
            <input name="name" type="text" size="55" class="required error"><br />
            <h2>Email: (required)</h2><br  />
            </span><input name="email" type="text" size="55" class="required email"/><br />
            <h2>Phone:</h2><br />
            <input name="phone" type="text" size="55" /> <br />
            <h2>Comments:</h2><br />
            <textarea name="comments" rows="15" cols="47"></textarea><br />
            <br />
    <input type="submit" value="Submit" />
     </form>

The page is currently up at http://www.concept82.com/DIS/contact.html

I know this is probably really simple but I'm new javascript and php coding. Thanks so much!!!

Solution 1

Using your existing code in your question, have come up with the following.

Tested in FF 19.0.2 and IE 7

Changed pop.htm URL to suit and position, cheers.

var w = 200; // width in pixels
var h = 200; // height in pixels

<script>
function popupwindow(url, title, w, h) {
    var w = 200;
    var h = 200;
    var left = Number((screen.width/2)-(w/2));
    var tops = Number((screen.height/2)-(h/2));

window.open("pop.htm", '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+tops+', left='+left);
}

</script>

<form method="post" action="php/sendmail.php" onsubmit="popupwindow()"; id="contact">
<h2>Name: (required)</h2><br />
        <input name="name" type="text" size="55" class="required error"><br />
        <h2>Email: (required)</h2><br  />
        </span><input name="email" type="text" size="55" class="required email"/><br />
        <h2>Phone:</h2><br />
        <input name="phone" type="text" size="55" /> <br />
        <h2>Comments:</h2><br />
        <textarea name="comments" rows="15" cols="47"></textarea><br />
        <br />
<input type="submit" value="Submit" />
</form>

Solution 2

first of all, you should be using jquery to make an ajax call if that's the route you choose. The only way that you can post to your server side php script without a redirect is to do it asynchronously using Ajax. I HIGHLY recommend using jquery's ajax method for this as they have made it absurdly simple. To accomplish this you must save all your form input values to variables and then create a data object with them. That data object is then sent via the ajax call to the server.

<form method="" action="">
<h2>Name: (required)</h2><br />
        <input name="name" type="text" size="55" class="required error name"><br />
        <h2>Email: (required)</h2><br  />
        </span><input name="email" type="text" size="55" class="required email"/><br />
        <h2>Phone:</h2><br />
        <input name="phone" type="text" size="55" class="phone" /> <br />
        <h2>Comments:</h2><br />
        <textarea name="comments" rows="15" cols="47" class="comments"></textarea><br />
        <br />
<input type="submit" value="Submit" class="submitBtn" />
 </form>

Your html is slightly different in that i have changed the form by taking out the action and method as well i have added classes that i can use as selectors with jquery to your input elements.

$(document).ready(function(){
    $('.submitBtn').click(function(e){
        e.preventDefault();
        var name = $('.name').val();
        var email = $('.email').val();
        var phone = $('.phone').val();
        var comments = $('.comments').val();

        var dataObject = {
            name: name,
            email: email,
            phone: phone,
            comments: comments
        }

        $.Ajax({
        url: php/sendmail.php,
        type: 'post',
        dataType: "json",
        contentType: "application/json",
        data: dataObject,
        success: function(data){
                 var createdDiv = '<div class="divToBeCentered"><p class="dataText">' + data + '</p></div>';
                 $('body').append(createdDiv);
            };
        });
    });

});

in css to style the div to be centered you just need to do something like this.

.divToBeCentered{
    height: 100px;
    width:40%;
    margin:auto;
}