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);
}
You have missed the last ">" sign in the first line of form tag.
Otherwise, this code working fine on my end.
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>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>Note: HTMLFormElement.requestSubmit() is not supported in Internet Explorer or Safari