Home » Jquery » How to submit html form without redirection?

How to submit html form without redirection?

Posted by: admin November 30, 2017 Leave a comment

Questions:

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.

Answers:

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

Questions:
Answers:

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.

Questions:
Answers:

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.

Questions:
Answers:

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…

Questions:
Answers:

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!

Questions:
Answers:

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

Questions:
Answers:

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>