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.