Приостановить отправку формы для проверки

У меня есть форма, которая загружает файл в iframe. Я хотел бы отложить его отправку до тех пор, пока не проверю, действительна ли она с помощью ajax. Как я могу это сделать ? Мой код приостанавливает отправку и возвращает результат проверки (в настоящее время просто фиктивная функция, которая возвращает «результат»: «истина»), но затем действие «отправить» не выполняется. Также нормально ли, что для отображения данных ответа после получения статуса ответа 200 требуется ~ 2 секунды?

Вот мой html:

<div id="message" style="background:black; width:400px; height:80px; display:none; color:white;">
</div>
<h1>Submit</h1>
<form action="{{upload_url}}" target="upload_target" method="POST" id="file_upload_form" enctype="multipart/form-data">
    {% render_upload_data upload_data %}
    <table>{{ form }}</table>    
    <p>
        <input type="hidden" maxlength="64" name="myfileid" value="{{ myfileid }}" >
    </p>
    <p>
        <input type="submit" id="file_upload_submit" value="Submit" />
    </p>
    <iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>

Js:

$(function() {

    $('#file_upload_submit').click(function(e){
        e.preventDefault();
        var fileUploadForm = document.getElementById('file_upload_form');

        $.ajax({
            type: "POST",
            url: '/artifact/upload/check-form/',
            data: 'foo=bar',
            dataType: "json",
            success: function(data){
                if(data['result'] == "true"){
                    $("#message").show();
                    $("#message").fadeIn(400).html('<span>'+data["message"]+'</span>');
                    setTimeout(function(){
                        $("#message").fadeOut("slow", function () {
                            $("#message").hide();
                        });
                    }, 1500);
                     $('#file_upload_form').attr('target','upload_target').submit(function(){
                        alert('Handler for .submit() called.');
                        return false;
                    });
                }
                else{
                    $("#message").show();
                    $("#message").fadeIn(400).html('<span">'+data["message"]+'</span>');
                    setTimeout(function(){
                        $("#message").fadeOut("slow", function () {
                            $("#message").hide();
                        });
                    }, 1500);                    
                    return false;
                }
            }
        });
        return false;        
    });

});    

</script>

и ссылка: http://ntt.vipserv.org/artifact/


РЕДАКТИРОВАТЬ

С помощью приведенного ниже кода я могу выполнить проверку, а затем, когда результат будет положительным, будет отправлена ​​форма. Теперь, если я жестко запрограммирую цель для формы, мое предупреждение не отображается, и я почти уверен, что загрузка не выполняется (к сожалению, список загрузок обновляется каждые 8 ​​часов, я узнаю, сработало ли это через некоторое время). Если цель не указана, файл загружается с перенаправлением, поэтому весь прослушиватель событий «отправить» пропускается.

<script>  
    $('#fake_upload_submit').click(function(e){
        e.preventDefault();

        var fileUploadForm = document.getElementById('file_upload_form');
        fileUploadForm.addEventListener("submit", function() {
            alert("sent in iframe");
            fileUploadForm.target = 'upload_target';
        }, false);       

        $.ajax({
            type: "POST",
            url: '/artifact/upload/check-form/',
            data: 'foo=bar',
            dataType: "json",
            success: function(data){
                if(data['result'] == "true"){
                    $("#message").show();
                    $("#message").fadeIn(400).html('<span>'+data["message"]+'</span>');
                    setTimeout(function(){
                        $("#message").fadeOut("slow", function () {
                            $("#message").hide();
                        });
                    }, 1500);

                    fileUploadForm.submit();

                }
                else{
                    $("#message").show();
                    $("#message").fadeIn(400).html('<span">Response false</span>');
                    setTimeout(function(){
                        $("#message").fadeOut("slow", function () {
                            $("#message").hide();
                        });
                    }, 1500);                    
                    return false;
                }
            }
        });
        return false;        
    });   
</script>

HTML:

<div id="message" style="background:black; width:400px; height:80px; display:none; color:white;">
</div>
<h1>Submit</h1>
<form action="{{upload_url}}" method="POST" target="" id="file_upload_form" enctype="multipart/form-data">
    {% render_upload_data upload_data %}
    <table>{{ form }}</table>    
    <p>
        <input type="hidden" maxlength="64" name="myfileid" value="{{ myfileid }}" >
    </p>
    <p>
        <input type="submit" style="display:none" id="true_upload_submit" value="Submit" />
    </p>    
    <iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>
    <p>
        <input type="submit" id="fake_upload_submit" value="Submit" />
    </p>

person mastodon    schedule 17.11.2010    source источник


Ответы (5)


После проверки вы регистрируете новый обработчик события отправки, но нет ничего, что отправляет форму, поэтому вам нужно будет снова нажать кнопку, чтобы отправить ее.

Вы можете просто отправить форму вместо добавления обработчика отправки:

$('#file_upload_form').attr('target','upload_target').submit();
person Guffa    schedule 17.11.2010
comment
У меня есть .submit в строке 21. Просто добавил туда предупреждение, чтобы проверить, обработано ли оно. Но его не показывают :/ - person mastodon; 17.11.2010
comment
@mastodon: добавление обработчика события отправки не отправляет форму. - person Guffa; 17.11.2010

Я думаю, что вы, возможно, слишком много думаете об отправке формы, но я также могу прочитать это неправильно. У меня также могут быть не все факты. Не лучше ли просто отправить форму через вызов ajax и вернуть результат отправки (проверка не удалась или прошла успешно)?

Псевдокод:

jQuery:

var formData = data;
ajax(formData);

Обработка формы:

if(valid) {
  submit(formData);
  return true;
} else {
  return false;
}

Я могу предоставить реальный код, если это необходимо.

person James Thompson    schedule 17.11.2010
comment
Вы не можете опубликовать файл с помощью AJAX. - person Guffa; 17.11.2010
comment
У меня следующая ситуация. Файл из формы будет отправлен на удаленный сервер в iframe. Остальные поля будут использоваться для локального создания экземпляра объекта. Таким образом, локальный объект будет создан только тогда, когда все поля будут правильно заполнены. - person mastodon; 17.11.2010
comment
про файлы там ничего не нашел :/ - person mastodon; 17.11.2010
comment
Вы упускаете суть. Вы не можете загрузить файл на сервер с помощью сообщения AJAX. Вы должны опубликовать актуальную форму, содержащую поле загрузки. - person Guffa; 17.11.2010

Вероятно, для вас было бы проще (хотя, возможно, и более раздражающе для ваших пользователей), если бы вы использовали синхронный XHR вместо асинхронного.

В качестве альтернативы, перехватите отправку формы с помощью JavaScript и отправьте ее с помощью XHR, если проверка на стороне сервера прошла успешно.

person Phrogz    schedule 17.11.2010

Как насчет того, чтобы вообще избежать этой проблемы, имея скрытую кнопку отправки для отправки формы и видимую кнопку, которая запускает проверку, и если все в порядке, она выполняет щелчок по соответствующей скрытой кнопке отправки?

person AndreasKnudsen    schedule 17.11.2010
comment
это может быть какое-то решение, но в настоящее время действие .submit каким-то образом опущено, поэтому моя форма все равно не будет отправлена. - person mastodon; 17.11.2010
comment
когда я сказал скрыто, я имел в виду установить style=display:none и не устанавливать Visible=False на кнопку, если вы это имеете в виду - person AndreasKnudsen; 18.11.2010
comment
paste.pocoo.org/show/292764 тоже пробовал, но предупреждение от отправки не показано. - person mastodon; 18.11.2010

Гуффа верен. Я считаю, что следующее изменение заставит работать первый скрипт. Изменять

                     $('#file_upload_form').attr('target','upload_target').submit(function(){
                        alert('Handler for .submit() called.');
                        return false;
                    });

to

                     $('#file_upload_form').attr('target','upload_target').submit();

Это ваша отладка сломала отправку. Если вы хотите сохранить отладку, измените код на:

                     $('#file_upload_form').attr('target','upload_target').submit(function(){
                        alert('Handler for .submit() called.');
                        return true;
                    }).submit();

Вы должны вызвать submit() самостоятельно, чтобы инициировать событие отправки. Если функция отправки возвращает false, она не будет продолжаться, поэтому вместо этого она должна возвращать true.

Это третья версия этого вопроса, который вы опубликовали. Я согласен с другими, что вы, возможно, решаете свою проблему слишком сложным способом. Это тот случай, когда вы можете вообще отказаться от JavaScript и перейти к простому HTML-сообщению. Есть ли веская причина, почему это не вариант?

person Jordan Reiter    schedule 22.11.2010