jQuery ajax 表单提交 - 如何？

Question

<div class="full_popup">
<section class="left_sec">
    <div class="img_holder">
        <form action="do_up.php" enctype="multipart/form-data" method="post" id="upload">
        <input type="file" id="file" name="file"> //input file
    </div>
</section>
<section class="right_sec">
<div class="body">

Details Inputs

<ul class="details">
    <li class="loc"><input type="text" id="geo" placeholder="place photo taked in"></li>
    <li class="disc"><textarea placeholder="Discription" id="disc"></textarea></li>
</ul>
</div>
<div class="footer">
    <button class="popup_post" type="submit">Post</button> //submit
    </form>  //ending form
</div>
</section>
</div>

我用jquery表单插件

这就是我初始化表单的方式

$('#upload').submit(function() { 
    $(this).ajaxSubmit()
});

问题是当我提交此表单时它没有从输入中获取所有值当我将输入直接放在表单标签之后时，它会全部使用。

那么我如何使用不同 div 中的输入来做到这一点？

Answer 1

您的 <form> 元素跨越多个元素并且未正确关闭。浏览器将尝试通过过早关闭<form>元素来修复您的HTML：

<section class="left_sec">
    <div class="img_holder">
        <form action="do_up.php" enctype="multipart/form-data" method="post" id="upload">
        <input type="file" id="file" name="file" />
        </form><!-- likely to be inserted by the browser to fix lack of closing tag -->
    </div>
</section>

您应该使用单个 <form> 元素包装所有输入，即通过将 <form> 移动到 DOM 树的几层，以便您要提交其值的所有输入被包裹在里面。

换句话说：

<form action="do_up.php" enctype="multipart/form-data" method="post" id="upload">
    <div class="full_popup">
        <section class="left_sec">
            <div class="img_holder">
                <input type="file" id="file" name="file" />
            </div>
        </section>
        <section class="right_sec">                   
            <div class="body">
                <ul class="details">
                    <li class="loc"><input type="text" id="geo" placeholder="place photo taked in" /></li>     
                    <li class="disc"><textarea placeholder="Discription" id="disc"></textarea></li>
                </ul>
            </div>
            <div class="footer">
                <button class="popup_post" type="submit">Post</button>      
            </div>
        </section>
    </div>
</form>

此外，由于 .ajaxSubmit()（来自 jQuery 插件 jQuery Form) will replace the default submit actions, you should prevent default submission action from being followed through:

$('#upload').submit(function() { 
    $(this).ajaxSubmit()
    return false;
});

...或...

$('#upload').submit(function(e) { 
    $(this).ajaxSubmit()
    e.preventDefault();
});

p/s：您应该使用  而不是 // 来转义 HTML.

中的注释

jQuery ajax 表单提交 - 如何？

jQuery ajax Form Submit - how to?

forms

ajax

jquery