2012-03-25 10 views
0

私のウェブサイトには2つの書式があり、jQueryを使ってPHPスクリプトに送信します。jQuery/php - ページ上に複数形をつけて1つだけを送信

これらは形である:

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

と次:

$(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:ここ

<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のは、私はこれらの二つの形式のために書かれているですコード:

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

私の問題は、これらのフォームの1つを送信するたびに、#status divに$ errorのフォームが表示されることです。

1ページに複数のフォームを作成できますが、正しいページを送信するにはどうすればよいですか?

+0

送信ボタンにはinput type = "submit"を使ってみてください。その後、それは内にあるフォームのみを提出するでしょう。 –

+0

例を挙げてください。あなたが何を意味するかはっきりしない:-) – oliverbj

+0

ステータスdivにはどのようなエラーがありますか? pwまたは名前はありませんか? – guybennet

答えて

3
$(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']) // ... 
1

をチェックすることができます:「どのように1つのページに複数のフォームを作成できますが、正しいフォームを送信できますか?

1つのページに動的に生成されるフォームが多数あり、それらを1つずつ処理ファイルに送信します。

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

    }); 
}); 

必要なのは、プロセスのファイル/関数であり、あなたが行く準備ができています。 1つまたは複数のフォームでうまく動作します。あなたは次のようなことをすることができます:

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

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

//etc. 
関連する問題