Home/ Questions/Q 9234855
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T06:53:16+00:00

I have a registration form that is currently in a popup modal window coded

  • 0

I have a registration form that is currently in a popup modal window coded in jQuery. I have a PHP submit button on the bottom and I have added jQuery code that stops the button from submitting. This is because it will stop my modal window from closing when I submit the page. My issue now is that submitting the form would be impossible. Is there a way to submit my form over all this crowded pop-ups and jQuery? Say is it possible to use AJAX or jQuery to submit the form and allow my PHP to handle it.

Since I am writing in PHP, there is quite a bit of server side validation going on, so the point of this is to allow my viewers to fix their validation mistakes before the modal window closes.

Here is my jQuery, I didnt bother to mess with that anymore as it does what I need.

$(document).ready(function() {
    $('a.modal-window').click(function() {          
                //Getting the variable's value from a link 
        var loginBox = $(this).attr('href');   
        $(loginBox).fadeIn(300);        
        var popMargTop = ($(loginBox).height() + 24) / 2; 
        var popMargLeft = ($(loginBox).width() + 24) / 2;           
        $(loginBox).css({ 
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });         
        // Add the mask to body
        $('body').append('<div id="mask"></div>');
        $('#mask').fadeIn(300);         
        return false;
    });     
    // When clicking on the button close or the mask layer the popup closed
    $('a.close, #mask').live('click', function() { 
      $('#mask , .login-popup').fadeOut(300 , function() {
        $('#mask').remove();  
    }); 
    return false;
    });
});

Here is the code I used to stop the form from submitting:

$(function () {
    $(':submit').click(function (event) {
        event.preventDefault();
        // submit the form dynamically
    });
});

and below is my form, it might not matter although its there for the viewing.

<form method="post" id="loginform"  action="<?php echo $_SERVER['PHP_SELF']?>">
                <table style="color: white;">
                    <tr><th style="float:left;">Register a new account with us.</th></tr>
                    <tr><td>Username</td><td><input type="text" name="txtUser"/></td></tr>
                    <tr><td>Password</td><td><input type="text" name="txtPass"/></td></tr>
                    <tr><td>Email</td><td><input type="text" name="txtEmail"/></td></tr>
                    <tr><td>Confirm Email</td><td><input type="text" name="txtEmail2"/></td></tr>
                    <tr><td>First Name</td><td><input type="text" name="txtFname"/></td></tr>
                    <tr><td>Last Name</td><td><input type="text" name="txtLname"/></td></tr>
                    <tr><td>Address</td><td><input type="text" name="txtAddress"/></td></tr>
                    <tr><td>City</td><td><input type="text" name="txtCity"/></td></tr>
                    <tr><td>Postal Code</td><td><input type="text" name="txtPostal"/></td></tr>
                    <tr><td>Birth Year</td><td><input type="text" name="txtBirth"/></td></tr>
                    <tr><td>Gender</td><td><input type="radio" id="radio-1-1" name="radicalSex" class="regular-radio" value="m" selected="true" /><label for="radio-1-1"></label> Male</td></tr>
                    <tr><td></td><td><input type="radio" id="radio-1-2" name="radicalSex" class="regular-radio" value="f"/><label for="radio-1-2"></label> Female</td></tr>
                    <tr><td colspan='2' style="color: #FF6600;float:left;font-size:70%;"><?php echo $Error;?></td></tr>
                    <tr><td colspan="2"><input type="submit" name="btnRegister" ID="btnBlueTemp" value="Submit Registration" /></td></tr>
                    <tr><td colspan='2' style="float:left; font-size:70%;">Address information is optional</td></tr>
                </table>      
          </form>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Let me give you an example of how you can do that .

    <html>
    <head>
    <title></title>

    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function(){ 
            function validate(name, addr){
                if(name=="") {
                    alert('Name is Blank');
                    return false;
                } else if(addr=="") {
                    alert('Address is Blank');
                    return false;
                } else {
                    return true;
                }
            }
            $("#save").click(function(event){ 
                event.preventDefault();
                var name = $("#name").val();
                var addr = $("#addr").val();
                if(validate(name,addr)){
                    $.ajax({
                        type:'POST',
                        data:'name='+name+'&addr='+addr,
                        url:'test2.php',
                        success:function(data) {
                            alert(data);
                        }
                    })  
                }               
            });
        });
    </script>
    </head>
    <body>
    <form name="frm" method="POST" action="">
        <input  type="text" name="name" id="name" value=""/><br>
        <input type="text" name="addr" id="addr" value="" /><br>
        <input type="submit" name="save" id="save" value="Save"/>
    </form>
    </body>
</html>

    Now in test2.php You can do your php codes

    <?php
    if(isset($_POST['name'])) {
        echo $_POST['name'];
    }
?>

    Hope this gives you an Idea.

    • 0