Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    25
    Thanks
    4
    Thanked 1 Time in 1 Post

    Ajax form only submits every other time

    Hi guys,

    Hoping someone can help as this is getting me really frustrated!

    I have a form that gets submitted via AJAX if the validation fails the form will be redisplayed with error messages.

    It works fine the first time, but on the second attempt it submits to the standard form and not the ajax request.

    JS code:-
    Code:
    $(document).ready(function() {
    $("#register").submit(function() {
    
        var str = $(this).serialize();
    
            $.ajax({
                type: "POST",
                url: "/my/register.php",
                data: str,
                success: function(msg) {
    
                    $(document).ajaxSubmit(function(event, request, settings) {
    					
                    result = msg;
    
    				$("#register").hide();
                    $("#registerBox").html(result).slideDown("slow");
                    $("#registerBox").html(result);
                    });
    
                }
    
            });
        return false;
        });
    });
    PHP script:-
    Code:
    <?php
    function showRegistration($error,$email){
    echo $error;
    if($error == "1"){
    	$emailInput = "<input type=\"email\" name=\"email\" class=\"inputerror\" />";
    }
    else
    {
    	$emailInput = "<input type=\"email\" name=\"email\" value=\"".$email."\" />";
    }
    if($error == "2"){
    	$passwordInput = "<input type=\"password\" name=\"password\" class=\"inputerror\" />";
    }
    else
    {
    	$passwordInput = "<input type=\"password\" name=\"password\" />";
    }
    if($error == "3"){
    	$passwordCheckInput = "<input type=\"password\" name=\"passwordcheck\" class=\"inputerror\" />";
    }
    else
    {
    	$passwordCheckInput = "<input type=\"password\" name=\"passwordcheck\" />";
    }
    if($error == "4"){
    	$passwordInput = "<input type=\"password\" name=\"password\" class=\"inputerror\" />";
    	$passwordCheckInput = "<input type=\"password\" name=\"passwordcheck\" class=\"inputerror\" />";
    }
    else
    {
    	$passwordInput = "<input type=\"password\" name=\"password\" />";
    	$passwordCheckInput = "<input type=\"password\" name=\"passwordcheck\" />";
    }
    else
    $registrationForm = <<<FORM
    <form class="register" action="#" method="post" name="register" id="register" >
    
    <ul>
    	<li><h2>Register</h2></li>
        <li>
            <label for="email">Email Address</label>
            $emailInput
    		</li>
        <li>
        	<label for="password">Password</label>
    		$passwordInput
    	</li>
    	<li>
        	<label for="passwordcheck">Re-Enter Password</label>
    		$passwordCheckInput
        </li>
    	</form>
    	<li>
        <button class="submit" type="submit" id="submit">Register</button>
    </li>
    </ul>
    
    FORM;
    echo $registrationForm;
    }
    ?>
    Thanks in advance for any help anyone can provide.

    Thanks
    Last edited by probi; 11-30-2013 at 02:58 PM.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    try this and get rid of that ajaxsubmit junk.

    Code:
    $(document).ready(function() {
    $("#register").submit(function(e) {
      e.preventDefault();
        var str = $(this).serialize();
    
            $.ajax({
                type: "POST",
                url: "/my/register.php",
                data: str,
                success: function(msg) {
    
    		$("#register").hide();
                    $("#registerBox").html(msg).slideDown("slow");
                }
            });
        });
    });

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    You replace the DOM for the form with a new one, so the event that is bound to the form is lost.

    Try replacing this:

    Code:
    $("#register").submit(function() {
    with:

    Code:
    $(document).on("submit", "#register", function() {
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •