jqueryがメインフォームの外にあります。

Question

私は標準のHTMLベースのポストフォームを使ってデータをPHPに送信しています。このフォームを使用しているときにユーザーがアイテムを追加したいので、ライトボックスをfancyboxを使用して）jquery投稿をサーバーに送信します。問題は、私が使用していたdivがメインとクローズのタグの外にあっても、 "アルバムの追加"フォームがまだメインフォームを提出しているということですか？ここ

は私のコードは、問題がメインフォームはのがボタン

を提出DIVが提出しますということのようです

<div style="display:none"> 
    <form id="login_form" method="post" action=""> 
      <p id="login_error">Please, enter data</p> 
     <p> 
      <label for="album_title">Album title</label> 
      <input type="text" id="album_title" name="album_title" size="30" /> 
     </p> 
     <p> 
      <label for="album_description">Album Description</label> 
      <input type="text" id="album_description" name="album_description" size="30" /> 
     </p> 
     <p> 
      <input type="submit" value="Login" /> 
     </p> 
     <p> 
      <em>Leave empty so see resizing</em> 
     </p> 
    </form> 
</div> 

    <?=form_open_multipart('socialmedia/add_picstation');?> 
    <div class="error"><? echo validation_errors(); ?></div> 
     <table width="500" align="left" > 
      <tr> 
       <td colspan="2"> 
        If no image is provided through the station- the default image uploaded below will be used 
       </td> 
      </tr> 
      <tr> 
       <td class="table_left"><?=form_label('Status', 'title');?></td> 
       <td class="table_right"><?=form_input(array('name'=>'title', 'id'=>'title','style' => 'width:80%'));?></td> 
      </tr> 


      <tr> 
       <td class="table_left"><?=form_label('Album', 'album_id',array('id'=>'select_albums'));?></td> 
       <td><?=form_dropdown('album_id',$users_albums)?> <a class="iframe" href="<?=base_url()?>/socialmedia/add_album/">This goes to iframe</a> 
       <a id="tip5" title="Login" href="#login_form">Try now</a> 
       </td> 
      </tr> 



      <tr> 
       <td></td> 
       <td class="table_right"> 
        <div><label><input type="radio" name="group1" value="opt2">WEB CAM PIC</label></div> 
        <div><label><input type="radio" name="group1" value="opt1">UPLOAD PIC</label></div> 
       </td> 
      </tr> 

      <tr> 
       <td></td> 
       <td style="text-align:right;padding-right:70px"><?=form_submit('g','Add');?> 
       <?=form_close();?> 
       </td> 
      </tr> 
     </table> 

とフォームを処理するために、私のjs

$("#tip5").fancybox({ 
     'scrolling'  : 'no', 
     'titleShow'  : false, 
     'onStart' :function() { 
      $("#login_error").hide(); 
     }, 
     'onClosed'  : function() { 
      $("#login_error").hide(); 
     } 
    }); 



    $("#login_form").bind("submit", function() { 



     if ($("#album_title").val().length < 1 || $("#login_pass").val().length < 1) { 
      $("#login_error").show(); 
      $.fancybox.resize(); 
      return false; 
     } 

     $.fancybox.showActivity(); 

     $.ajax({ 
      type  : "POST", 
      cache : false, 
      url  : '<?=base_url()?>/socialmedia/add_album/', 
      data  : $(this).serializeArray(), 
      success: function(data) { 
       $.fancybox(data); 
      } 
     }); 

     return false; 
    }); 

ですアップデート

i pre ttyは、http://fancybox.net/blog（tip5）の例をコピーしました。私が望んでいたことをほとんど実行しました。問題は、メインフォームのフォームタグの外に表示されても、ログインフォームが間違ったフォームを送信したことです。

Answer 1

別のアクションURLに送信する場合は、メインフォームが送信されないようにする必要があります。

$('.button').click(function(e) { 
    e.preventDefault(); 
    // Call your AJAX here 
});