Question

I have two forms on my website, and I use jQuery to submit them, to my PHP script.

These are the forms:

<form method="post" class="settings-form" id="passwordSettings">
  <label id="npasswordbox" class="infoLabel">New Password: </label>
  <input type="password" name="npassword" size="50"  value="" >

  <div class="move"></div> 

  <label id="cnpasswordbox" class="infoLabel">Confirm: </label>
  <input type="password"  name="cnpassword" size="50" value="" >

  <button class="btn" name="passwordSetings" style="margin-left:185px" type="submit">Save </button> 

</form><!-- end form -->

And the next:

<form method="post" class="settings-form" id="normalSettings">
  <label id="npasswordbox" class="infoLabel">New Username: </label>
  <input type="text" name="username" size="50"  value="" >

  <div class="move"></div> 

  <button class="btn" name="normalSettings" style="margin-left:185px" type="submit">Save </button> 

</form><!-- end form -->

Here is the jQuery I have written for these two forms:

$(function() {
    $('form#passwordSettings').submit(function(){
        $('#status').hide();
        $.post(
            'index.php?i=a&p=s', 
            $('form#passwordSettings').serialize(),
            function (data) {
                proccessPWData(data);
            }
        );
        return false;    
    });
});

function proccessPWData (data) {
    $('#status').hide().html('');
    if(data=='success'){
        $('form#normalSettings').fadeOut();
        $('html, body').animate({scrollTop:0});
        $("#status").removeClass();             
        $('#status').addClass('alert alert-success').html('You have successfully changed your personal settings.<br />').slideDown().delay(5000);
        redirect("/account");
    }
    else {
        $('html, body').animate({scrollTop:0});     
        $('#status').removeClass().addClass('alert alert-error').html(data).fadeIn();
        setTimeout(function(){
            $('#status').slideUp("slow");
        },7000);
    }
}

$(function() {
    $('form#normalSettings').submit(function(){
        $('#status').hide();
        $.post(
            'index.php?i=a&p=s', 
            $('form#normalSettings').serialize(),
            function (data) {
                proccessData(data);
            }
        );
        return false;    
    });
});

function proccessData (data) {
    $('#status').hide().html('');
    if(data=='success'){
        $('form#normalSettings').fadeOut();
        $('html, body').animate({scrollTop:0});
        $("#status").removeClass();             
        $('#status').addClass('alert alert-success').html('You have successfully changed your personal settings.<br />').slideDown().delay(5000);
        redirect("/account");
    }
    else {
        $('html, body').animate({scrollTop:0});     
        $('#status').removeClass().addClass('alert alert-error').html(data).fadeIn();
        setTimeout(function(){
            $('#status').slideUp("slow");
        },7000);
    }
}

And then the PHP code:

if(isset($_POST['normalSettings']))
{
    $username = inputFilter($_POST['username']);
    if(!$username){
        $error ="no username";
    }
    if(!$error){
        echo "success!";
    }
} 

if(isset($_POST['passwordSettings']))
{
    $password = inputFilter($_POST['npassword']);
    if(!$username){
        $error ="no pw";
    }
    if(!$error){
        echo "success!";
    }
} 

My problem is, that whenever I submit one of these forms, I see the form with my $error in the #status div.

How can I have multiply forms on one page, but submit the correct ones?

Answer 1

$(function() {
    $('form#passwordSettings').submit(function(e){
        e.preventDefault(); // prevents the default action (in this case, submitting the form)
        $('#status').hide();
        $.post(
            'index.php?i=a&p=s', 
            $('form#passwordSettings').serialize(),
            function (data) {
                proccessPWData(data);
            }
        );
        return false;    
    });
});

or you could just give an hidden input-field with it

<input type="hidden" name="_normalSettings">

and check in your PHP

if (isset($_POST['_normalSettings']) // ...