JavaScript confirmation is automatically sent

Question

I have a Partial View that contains a file for downloading files. The user in this view will select a file from his workstation and click the "Download" button. A click on the download submits the form to the action method and the files are analyzed, and the same view is returned to automatically fill in several fields in the view.

Everything as it is, works great. I am adding a new requirement to an existing view that looks like this:

Demand

The user selects the file and presses the download button. After clicking the download button, a JavaScript confirmation dialog is displayed for the user, which contains two buttons before the form is submitted to the controller’s action method. These buttons are Buffer Execution Analysis and Normal Analysis. Clicking on any of these buttons will be sent according to the controller action method.

In the controller’s action method after publication, my goal is to fix which button they pressed, and based on the button pressed. I choose the parsing logic.

Problem

I created a JavaScript function that displays two buttons, but the dialog box disappears automatically and the form is sent to the controller. I would like for him not to go until I press the confirmation button.

That's what I'm doing:

The main view:

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

Partial view:

 <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:

  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(); } } }); } 

Controller:

  [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

Congrats! You got into a very incomprehensible error and could not fix the problems!

The problem is your markup; your button has an attribute name="submit" . Remove it as shown:

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

When you call currentForm.submit() , it does not call the native form.submit() function; trying to use a button element as a function !

Here's the working jsFiddle of your code.

---

A bit of history: because of the omnipotent Internet Explorer, elements with a set of name attributes automatically turn into objects (or child objects) that are accessible directly through JavaScript. This was originally conceived by the IE team several years ago (although it does not comply with JavaScript / EMCA standards), and due to the huge number of outdated websites, WebKit (Chrome, Safari) and Gecko (Firefox) implemented the same behavior violation.

Answer 2

There are a few things you need to do.

First set the Modal parameter to true. False means that it will not prevent the user from clicking on things on the page except the field.

Secondly, you need to change onclick to the submit button to enable ;return false; It should read onclick=initUploadDailog();return false;" This will prevent the form from simply submitting after clicking the submit button.

Thirdly, the dialogue itself should send the form after selecting the appropriate button. See Here: jquery dialog: confirm click submit

Answer 3

I see 2 solutions. First, if you just want to use everything the way you want, try changing onclick="initUploadDailog();return false;" onclick="return initUploadDailog();" . Then I think your browser will wait for true or false to return before submitting the form.

But if you want to use jQuery as it is intended, you will want to look at jQuery event.preventDefault () . First, give your button an identifier, for example id="art-button" . Then change your function to a button click binding (I like to use .bind vs..click for browser compatibility).

Change this:

 function initUploadDailog(e) { // Your code } 

For this:

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

You can also bind the actual submit form, prevent by default, and use AJAX to publish your data.