CODEWITHSUNDEEP
phpjqueryformsdynamicsubmit
GivenPie
GivenPie

Reputation: 1489

Submitting forms thru in PHP on jQuery

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>

Upvotes: 0

Views: 977

Answers (5)

Roger
Roger

Reputation: 1693

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.

Upvotes: 1

Yoosuf
Yoosuf

Reputation: 892

To stop the form from reloading the page you needn't call any prevent methods as a simple script request would do the trick.

For instance,

$('#loginForm').submit(function() {
  // Do the relevant tasks needed here, form is already prevented from being submitted
});

Check out this demo for more information on what I am referring to

Upvotes: 0

hsuk
hsuk

Reputation: 6860

Then, submit your form via ajax

Jquery AJAX

On AJAX URL on which the request is sent, you can write necessary codes for validation and return accordingly. For eg. if some one the form element doesn't meet the validation, you can throw the flag accordingly as json value.

Its possible, why not.

Upvotes: 1

Bishnu Paudel
Bishnu Paudel

Reputation: 2079

You need to serialize the form data before posting it to PHP.

<script type="text/javascript">
    var frm = $('#loginform');
    frm.submit(function () {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert('submitted');
            }
        });

        return false;//stop actual form submit
    });
</script>

Upvotes: 1

ATOzTOA
ATOzTOA

Reputation: 35950

Once you have done all the input validation at client side, just submit the form...

$("#loginform").submit();

Then you will have your server do the rest of the validation.

If you want to stay in the page and show the validation output from server, the. You should submit using Ajax.

It will send your form data to server, then you can do server validation, and output any errors. You will get this in your Ajax complete handler, which you can use to show error messages to user.

Upvotes: 0

Related Questions