How to Submit an HTML Form Without Redirection

How to submit an HTML form without redirection

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 want to do after the form is successfully submitted
        }
    });
});

Also 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 want to do after the form is successfully submitted
       }
   });
}

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

Submit a HTML form without redirection and showing a success message

Put an ID to your form

<form id='myForm'>
....
</form>

Use jQuery (For easy code)

   ....
   <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"></script>
</body>

Use $.ajax

$('#myForm').submit(function(e) {

   e.preventDefault(); // prevent from submitting form directly

   $.ajax({
     url: 'form.php',
     method: 'post',
     data: $("#myForm").serializeArray() // convert all form data to array (key:value)
   })
   .done(function(response){
     alert(response); // show the response
     $("#myForm").reset(); // reset the form
   })
   .fail(function(error){
     alert(error); // show the error.
   });

})

How to submit form without redirecting to its action page?

You could use onsubmit and event.preventDefault(); on form:

<form onsubmit="event.preventDefault(); doSomething()">
    ...
    <input type="submit" value="Confirm">
</form>

and JavaScript:

<script type="text/javascript">
function doSomething() {
    //AJAX request...
}
</script>

To submit a form without redirecting to other page

Replace $("#submit-button").submit(function(e) { with $("#submit-button").closest("form").submit(function(e) { :-)

The preventDefault method seems to work :

function customSubmit () {  $("#on-btn").attr("disabled", "disabled");  $("#off-btn").removeAttr("disabled");  $("form").on("submit", function (ev) {    ev.preventDefault();    console.log($(this).serialize());  });}function defaultSubmit () {  $("#off-btn").attr("disabled", "disabled");  $("#on-btn").removeAttr("disabled");  $("form").off("submit");}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><p>  <button id="on-btn" type="button" onclick="customSubmit()">Custom submit</button>  <button id="off-btn" type="button" onclick="defaultSubmit()" disabled>Default submit</button></p><form action="" method="POST">  <input type="text" name="dummy" value="dummy">  <input type="submit" name="submit"></form>

executeSearch(event){
    ...
    event.preventDefault();
    window.location.href = '/#/search/' + formattedURL;
}