I need to submit normal form using code myform.submit(); but in the same time I don't want it to reload the page.

to do that, I used in the form itself onsubmit="return false;" in addition to that, I used also for the form EventListener this piece of code e.preventDefault();. and I used for the asp.net core server side a return type return Json(rslt); , although I always lose my page and get an empty page with the value Json(rslt) = 1

Do I miss something here?

HTML

<form id="cloneFile" onsubmit="return false;" asp-action="postFile" asp-controller="Rooms"  method="post" enctype="multipart/form-data">

  some html 

</form>

JAVASCRIPT

var myform = document.getElementById('cloneFile');
function somefun (){

  .... bla bla bla 
  myform.submit();

}



myform.addEventListener("submit",
function (e) {
            
  e.preventDefault();

  var frm = e.target;
  var ClonedFrm = frm.cloneNode(true);
  ClonedFrm.removeAttribute("id");

  var frmData = new FormData(ClonedFrm);
  var Url = e.target.action; 

  fetch (Url, {method: "POST", body: frmData}) 
  {
     ... bla bla bla 
  })

  return false;

});

Asp.Net Core

[HttpPost]
public IActionResult postFile([FromForm] SubjectFile fileData)
{
  int rslt = 0;
  if (ModelState.IsValid)
  {
      fileData.Id = Guid.NewGuid();
      _context.Add(fileData);
      rslt = _context.SaveChanges();
  }
  return Json(rslt);
}

CodePudding user response：

You have missed the last ">" sign in the first line of form tag.

Otherwise, this code working fine on my end.

CodePudding user response：

This works when you allow the form to be submitted via HTML (clicking the submit button or via keyboard).

var myform = document.getElementById('cloneFile');

myform.addEventListener("submit", function(e) {
  e.preventDefault();
  console.log('submit')
});

<form id="cloneFile" method="post">
  <label>test: <input type="text" /></label>
  <button type="submit">Submit</button>
</form>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

However, if you attempt to programatically submit the form via HTMLFormElement.submit()...

no submit event is raised. In particular, the form's onsubmit event handler is not run.

Therefore, the default behaviour of the form is not prevented.

If you need to programmatically submit the form for some reason, instead you can use HTMLFormElement.requestSubmit(), which acts as if the form's submit button were clicked.

var myform = document.getElementById('cloneFile');

myform.addEventListener("submit", function(e) {
  e.preventDefault();
  console.log('submit')
});


function somefun(){
  myform.requestSubmit();
}


somefun()

<form id="cloneFile" method="post">
  <label>test: <input type="text" /></label>
</form>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Note: HTMLFormElement.requestSubmit() is not supported in Internet Explorer or Safari