Подтверждение JavaScript автоматически публикует форму

Question

У меня есть частичный вид, содержащий файл для загрузки файлов (ов). Пользователь в этом представлении выберет файл со своей рабочей станции и нажмите кнопку «Загрузить». Щелчок по загрузке отправляет форму методу действия, и файлы анализируются, и один и тот же вид возвращается для автоматического заполнения нескольких полей в представлении.

Все как есть, отлично работает. Я добавляю новое требование к существующему мнению, которая выглядит следующим образом:

Требования

Пользователь выбирает файл и нажимает на кнопку загрузки. После нажатия кнопки загрузки на пользователя отображается диалоговое окно подтверждения JavaScript, которое содержит две кнопки, перед тем как форма будет передана методу действия контроллера. Этими кнопками являются «Анализ выполнения буфера» и «Обычный анализ». Щелчок по любой из этих кнопок будет отправлен по методу действия контроллера.

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

Проблема

Я создал функцию JavaScript, которая делает отображение две кнопки, но диалоговое окно автоматически исчезает и формы сообщения к контроллеру. Я бы хотел, чтобы он не отправлялся, пока я не нажму кнопку с подтверждением.

Вот что я делаю:

Главная Вид:

@using (Html.BeginForm("Create", "RunLogEntry", FormMethod.Post, new { id = "form", enctype = "multipart/form-data"})) 
{ 
    <div id="main"> 
     @Html.Partial("_RunLogEntryPartialView", Model) 
    </div> 
} 

Частичный вид:

<button name="submit" class="art-button" type="submit" value="Upload" onclick="initUploadDailog();return false;" 
    style="width: 100px"> 
    Upload</button> 

<div id="uploadConfirmation" style="font-size: 10px; font-weight: normal; overflow: scroll; 
    width: 800px; height: 450px; display: none;"> 
</div> 

JS Функция:

function initUploadDailog(e) { 
     currentForm = $(this).closest('form'); 
     UploadDialog = $("#uploadConfirmation").dialog({ 
      modal: true, 
      width: 400, 
      autoOpen: true, 
      title: 'Please select parsing type for Test Completed Computation', 
      buttons: { 
       "Normal Parsing": function() { 
        $("#hiddenInput").val("Normal"); 
        alert(currentForm.innerHtml()); 
        currentForm.submit(); 
       }, 
       "Buffer Parsing": function() { 
        $("#hiddenInput").val("Buffer Run"); 
        currentForm.submit(); 
       } 
      } 
     }); 
    } 

Контроллер:

[HttpPost] 
     [AcceptVerbs(HttpVerbs.Post)] 
     public ActionResult Create(RunLogEntry runLogEntry, String ServiceRequest, string Hour, string Minute, string AMPM, 
            string submit, IEnumerable<HttpPostedFileBase> file, String AssayPerformanceIssues1, List<string> Replicates) 
     { 
} 

Answer 1

Поздравляем! Вы попали в очень непонятную ошибку и нелегко устранить неполадки!

Проблема с вашей разметкой; ваша кнопка имеет атрибут name="submit". Удалите его, как показано ниже:

<button class="art-button" type="submit" value="Upload" onclick="initUploadDailog();return false;" style="width: 100px">Upload</button> 

Когда вы звоните currentForm.submit(), это не вызова родной form.submit() функции; это пытается использовать элемент кнопки как функцию!

Адрес working jsFiddle вашего кода.

---

Немного истории: из-за всемогущей Internet Explorer, элементы с набором в name атрибутов автоматически включаются в объект (или дочерних объектов), доступных непосредственно через JavaScript. Первоначально это было задумано командой IE несколько лет назад (хотя и не соответствует стандартам JavaScript/EMCA), и из-за огромного количества устаревших веб-сайтов WebKit (Chrome, Safari) и Gecko (Firefox) реализовали те же самые поведение ,

Answer 2

Есть несколько вещей, которые нужно сделать.

Прежде всего, установите Modal на true. False означает, что он не будет препятствовать пользователю нажимать на другие вещи на странице, кроме поля.

Во-вторых, вам необходимо изменить onclick на кнопку отправки, чтобы включить ;return false;. Он должен читать onclick=initUploadDailog();return false;". Это предотвратит простоту отправки формы, как только нажата кнопка отправки.

В-третьих, самому диалогу необходимо отправить форму после выбора соответствующей кнопки. См. Здесь: jquery dialog: confirm the click on a submit button

Answer 3

Я вижу 2 решения. Во-первых, если вы просто хотите использовать все так, как хотите, попробуйте изменить свой onclick="initUploadDailog();return false;" на onclick="return initUploadDailog();". Тогда я думаю, что ваш браузер будет ждать возврата истины или false перед отправкой формы.

Но, если вы хотите использовать jQuery так, как он предназначен, вы захотите посмотреть на jQuery's event.preventDefault(). Во-первых, дайте вашей кнопке идентификатор, например id="art-button". Затем измените свою функцию на привязку к кнопке (мне нравится использовать .bind vs. .click для совместимости с браузером).

Изменить это:

function initUploadDailog(e) { 
    // Your code 
} 

Для этого:

$("#art-button").bind('click', function(e) { 
    e.preventDefault(); 
    // Your code 
    $("#form-id").submit(); 
}); 

Можно также привязать к фактической отправки формы, предотвращения по умолчанию, и использовать AJAX, чтобы отправлять ваши данные.