How to submit html form without redirection?

If I have form like this:

<form action="/Car/Edit/17" id="myForm" method="post" name="myForm"> ... </form>

how to submit it without redirecting to another view by JavaScript/Jquery? I read plenty of answers from StackOverflow, but all of them redirect me to the view returned by POST function.

SOLUTION 1 :

in order to achieve what you want, you need to use jquery ajax as below:

$('#myForm').submit(function(e){
e.preventDefault();
$.ajax({
url:'/Car/Edit/17/',
type:'post',
data:$('#myForm').serialize(),
success:function(){
//whatever you wanna do after the form is successfully submitted
}
});
});

UPDATED: (based on the comments below)

try this one:

function SubForm(e){
e.preventDefault();
var url=$(this).closest('form').attr('action'),
data=$(this).closest('form').serialize();
$.ajax({
url:url,
type:'post',
data:data,
success:function(){
//whatever you wanna do after the form is successfully submitted
}
});
}

UPDATE 2 (the OP added this part as this was his final solution)

This worked flawlessly. I call this function from Html.ActionLink(...)

function SubForm (){
$.ajax({
url:'/Person/Edit/@Model.Id/',
type:'post',
data:$('#myForm').serialize(),
success:function(){
alert("worked");
}
});
}

SOLUTION 2 :

You can achieve that by redirecting form's action to an <iframe>. It requires no JavaScript or any other type of scripts.

<iframe width="0" height="0" border="0" name="dummyframe" id="dummyframe"></iframe>

<form action="submitscript.php" target="dummyframe">
<!-- form body here -->
</form>

if you're really crafty, you can tinker with position=absolute and z-index value in CSS to make sure that the frame doesn't render. If it matters that much though, you might be better off using AJAX anyway.

SOLUTION 3 :

Place a hidden iFrame at the bottom of your page and target it in your form:

<iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe>

<form action="/Car/Edit/17" id="myForm" method="post" name="myForm" target="hiddenFrame"> ... </form>

Quick and easy. Keep in mind that while the target attribute is still widely supported (& supported in HTML5) it was deprecated in HTML 4.01.So you really should be using ajax to future-proof.

SOLUTION 4 :

Okay, I'm not going to tell you a magical way of doing it because there isn't.If you have an action attribute set for a form element, it will redirect.

If you don't want it to redirect simply don't set any action and set onsubmit="someFunction();"

In your someFunction() you do whatever you want, (with AJAX or not) and in the ending, you add return false; to tell the browser not to submit the form...

SOLUTION 5 :

You need ajax to make it happen. Something like this

$(document).ready(function(){
$("#myform").on('submit', function(){
var name = $("#name").val();
var email = $("#email").val();
var password = $("#password").val();
var contact = $("#contact").val();

var dataString = 'name1='+ name + '&email1='+ email + '&password1='+ password + '&contact1='+ contact;
if(name==''||email==''||password==''||contact=='')
{
alert("Please Fill All Fields");
}
else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "ajaxsubmit.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
}
return false;
});
});

SOLUTION 6 :

See jQuery's post function.

I would create a button, and set an onClickListener ($('#button').on('click', function(){});), and send the data in the function.

Also, see the preventDefault function, of jQuery!

SOLUTION 7 :

Since all current answers use jQuery or tricks with iframe, figured there is no harm to add method with just plain JavaScript:

function formSubmit(event) {
var url = "/post/url/here";
var request = new XMLHttpRequest();
request.open('POST', url, true);
request.onload = function() { // request successful
// we can use server response to our request now
console.log(request.responseText);
};

request.onerror = function() {
// request failed
};

request.send(new FormData(event.target)); // create FormData from form that triggered event
event.preventDefault();
}

// and you can attach form submit event like this for example
function attachFormSubmitEvent(formId){
document.getElementById(formId).addEventListener("submit", formSubmit);
}

SOLUTION 8 :

The desired effect can also be achieved by moving the submit button outside of the form as described here:

Prevent page reload and redirect on form submit ajax/jquery

Like this:

<form id="getPatientsForm">
Enter URL for patient server
<br/><br/>
<input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" />
<input name="patientRootUrl" size="100"></input>
<br/><br/>
</form>
<button onclick="javascript:postGetPatientsForm();">Connect to Server</button>

SOLUTION 9 :

Using this snippet you can submit the form and avoid redirection. Instead you can pass the success function as argument and do whatever you want.

function submitForm(form, successFn){
if (form.getAttribute("id")!='' || form.getAttribute("id")!=null){
var id = form.getAttribute("id");
} else {
console.log("Form id attribute was not set; the form cannot be serialized");
}

$.ajax({
type: form.method,
url: form.action,
data: $(id).serializeArray(),
dataType: "json",
success: successFn,
//error: errorFn(data)
});
}

And then just do :

var formElement = document.getElementById("yourForm");
submitForm(formElement, function() {
console.log("Form submitted");
});

Label : tag_javascript tag_jquery tag_html tag_forms

Posting Komentar

2 Komentar

  1. This is a direct copy of https://stackoverflow.com/questions/25983603/how-to-submit-an-html-form-without-redirection

    BalasHapus
  2. Nice articel, This article help me very well. Thank you. Also please check my article on my site about HTML form target Attribute.

    BalasHapus