Search code examples
phpjquerymodal-dialogjquery-eventspopupwindow

jQuery popup dialog on PHP form that confirms and refreshes page - not working


I have seen what seems like a hundred ways to do what I want but I can't seem to get a single one to work. I have a test page here : http://upcycledonline.com/test/Site/defaultUpCyc.php

What I want to happen is when the user clicks submit a pop window appears saying "Thanks! Your email has been added". When they click 'ok' the pop will close and the page refreshes. Right now I have the pop up going but after clicking the ok button it goes to my PHP page.

FYI: I am new to PHP and Javascript

Here is the form code and Javascript

<div id="signUp"> 


<script>
function confirmSubmit() {
if (confirm("Are you sure you want to submit the form?")) {
document.getElementById("FORM_ID").submit();
}
return false;
}

</script>


<?php 
//if the validation falls back to php, then print the validation error
if (isset($error_message)) echo $error_message;
?>
<form method="post" action="process-form.php" id="emailForm" name="emailForm" target="_self">
        
    <h4>Sign up to be notified when we go live!</h4>
    <!--value="<?php if (isset($_POST['email'])) echo $_POST['email'];?>"-->
    
<label for="email">E-mail</label>
    <input type="text" name="email" id="email" />
    <!-- onSubmit="alert('Thank you. Your email has been added.')"-->
<input type="submit" name="submit" id="submit" value="Submit"  onclick="return           confirm('Are you sure?');">

    <p>emails will not be shared with third parties</p>
</form>
<script>
<?php echo $validation_js_code;?>
</script>
</div> 

Solution

  • You could do a couple things:

    1. move your form processing logic to defaultUpCyc.php, submit the form to that URI and then have defaultUpCyc.php both process the form and reload the page.
    2. Use AJAX, and post the data to process-form.php, this wouldn't require any refresh at all.
    3. Do a redirect in process-form.php to defaultUpCyc.php.