如果更改输入值，则 jQuery 提交表单答案

【问题标题】：jQuery Submit form if change input value如果更改输入值，则 jQuery 提交表单
【发布时间】：2015-11-13 23:14:35
【问题描述】：

我用的是 jquery.form 插件，它工作得很好但是当更改输入值时..它提交得很好！但是将我重定向到我的 uploader.php 文件，我不想重定向我，我需要在 div.result 中得到结果，

要了解我，请查看我的代码：

HTML

<form id="uploader" action="uploader.php" method="post" enctype="multipart/form-data">
    <input id="file" type="file" name="uploader" value="" draggable="true">
    <input name="submit" type="submit" class="submit" value="Upload">
    <div class="result"></div>
</form>

uploader.php 文件：

<?php
    if( isset($_POST['submit']) and $_SERVER['REQUEST_METHOD'] == "POST" ){
        echo 'done!';
    }
?>

jQuery 代码：

jQuery(document).ready(function() {

    $('#uploader').change(function(){

        $(".result").html('');

        $(".result").html('wait..');

        $("#uploader").ajaxForm({
            target: '.result',
            success: function() 
            {
                $('.result').hide().slideDown('fast');
                $('#uploader')[0].reset();
            },

        });

    });

});

我需要在 .result div 中回显“完成”，我不想将我重定向到 uploader.php 页面。

【问题讨论】：

除非您点击提交按钮，否则我认为这不会发生。
在我的#file 输入中拖放文件时需要提交。
当你点击提交按钮时它应该重定向，当你使用.ajaxForm()它不应该。
#updloader 是表单元素的选择器 #file 将针对输入字段
#file 选择器不工作 :(

标签： javascript php jquery jqueryform

【解决方案1】：

当你改变输入值时它真的在做什么吗？我的意思是提交表格吗？还是只有在您单击提交按钮时才会发生这种情况？

在我看来，您的脚本实际上并没有做任何事情。它侦听表单元素上的 onchange 事件，但根据我的经验，该事件从未在 <form> 上触发。因此，您只需提交一个 HTML 表单，无需借助脚本。

除此之外，出于安全原因，我不确定您是否可以提交带有脚本的 multipart/form-data 表单。也许我错了，但不管怎样，用 iframe 代替怎么样？

<form id="uploader" action="uploader.php" method="post" enctype="multipart/form-data" target="resultframe">
    <input id="file" type="file" name="uploader" value="" draggable="true">
    <input name="submit" type="submit" class="submit" value="Upload">
    <div class="result"><iframe name="resultframe" onload="$('.result').hide().slideDown('fast');"></iframe></div>
</form>

说实话，我不知道这些天 onload 是否可以在 iframe 上工作，我已经好几年没有尝试过了。否则，删除<div class="result"> 和相应的</div> 并将它们与动画脚本一起放入uploader.php 的输出中。

【讨论】：

他想使用 jquery.form.js 他的代码已经可以正常工作了。可能是他没有包含相关的js。

【解决方案2】：

使用 .ajaxSubmit({})

jQuery(document).ready(function() {

    $('#file').change(function() {

        $(".result").html('');
        $(".result").html('wait..');

        $("#uploader").ajaxSubmit({
            target: '.result',
            success: function() 
            {
                $('.result').hide().slideDown('fast');
                $('#uploader')[0].reset();
            },
        });

    });

});

谢谢大家。

【讨论】：

【解决方案3】：

由于表单的action是uploader.php，所以页面提交后会重定向到uploader.php。所以您需要更改操作并使用 ajax 来更新 div.result。检查这些链接一次。 http://www.formget.com/form-submission-using-ajax-php-and-javascript/ http://blog.teamtreehouse.com/uploading-files-ajax

【讨论】：