jQuery/php - 頁面上的Multply表單，只提交一個

Question

我在我的網站上有兩種形式，我使用jQuery將它們提交給我的PHP腳本。

這些都是形式：

<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 --> 

而接下來：

<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 --> 

這裏是jQuery的我已經爲這兩種形式的書面：

$(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); 
    } 
} 

然後是PHP代碼：

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!"; 
    } 
} 

我的問題是，無論何時提交這些表單之一，我都會在#status div中看到帶有$錯誤的表單。

如何在一頁上顯示多個表單，但是提交正確的表單？

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;  
    }); 
}); 

，或者你可以只給一個隱藏的輸入字段與它

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

，並檢查你的PHP

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

Answer 2

這基本上只是回答你的問題：「如何我可以在一頁上放置多個表格，但是要提交正確的表格嗎？「

我在單個頁面上有很多動態生成的表單，我將它們逐個發送到處理文件。這是一種形式的簡化：

<form name="form" id="form"> 
<!--form fields 
hidden field could be used to trigger wanted process in the process file 
--> 
<input type="hidden" name="secret_process_id" value="1" /> 
<a class="button_ajax">Send form</a> 
</form> 

<div id="process_msg<?php echo $id; ?>"></div> 

而這裏的表單提交功能：

$(document).ready(function() { 
    $('.submit_ajax').click(function() { //serializes the parent form 
    //alert($(this).serialize()); 
    dataString = $(this).parent().serialize(); 

    //if you want to echo some message right below the processed form 
    var id = /id=\d+/.exec(dataString); 
    var id = /\d+/.exec(id); 

    $.ajax({ 
     type: 'post', 
     url: '_process.php?ajax=1', //some or none parameters 
     data: dataString, 
     dataType: 'html', 
     success: function(data) { 
      $('#process_msg' + id).fadeIn(400); 
      $('#process_msg' + id).html(data); 
     } 

    }); //end of $.ajax 

return false; 

    }); 
}); 

所有你需要的是一個過程，文件/功能，你準備好去。用一種或幾十種形式工作得很好。在那裏你可以做這樣的事情：

if ($_POST['secret_process_id']==1){ 
    //do something 
} 

if ($_POST['secret_process_id']==2){ 
    //do something else 
} 

//etc.