来自主表单外部的jquery提交表单

Question

我有一个标准的基于 html 的帖子表单，可以将数据提交到 php - 我有一个下拉列表，我希望用户在使用此表单时添加项目，所以我设置了一个灯箱（使用 fancybox）来提交一个 jquery 帖子到服务器。问题是 - 即使我使用的 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;
    });

问题似乎是主表单被 div 的提交按钮提交

更新

我几乎将http://fancybox.net/blog (tip5) 的示例复制到了 t，因为它几乎完成了我想要的 - 问题只是登录表单提交了错误的表单，即使 div 出现在表单标签之外主窗体

Answer 1

如果要提交到单独的action URL，需要阻止主表单发送：

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