How to disable redirection to the url specified in the form action attribute on form submitting

Question

I have a form with the action attribute set to "/tasks/". All I want is that on submitting the form, the data go to "/tasks/", but the user is not redirected to "/tasks/", they just stay on "/" instead. Is it possible to achieve? I tried to add "return false" and "preventDefault" to the "onclick" handler, but that's not what I need as they cancel the form submission.

    <form id="add-task-form" method="POST" name="add-task-form" action="/tasks/" enctype="multipart/form-data">
        <label for="name" class="field-description">*Name</label>
        <input id="name" type="text"required name="name" autofocus="true"><br>
        <label for="description-text" class="field-description">*Description</label>
        <textarea id="description-text"  name="description"></textarea><br>
    <button type="submit" id="save-button" class="saveButton"><span>Add task</span></button>
    </form>

      
     $('#save-button').on( 'click', function(){  
              if($('input').data().length() != 0){ 
                  var data = $('#add-task-form form').serialize();  
                  $.ajax({  
                    method: "POST",  
                    url: '/tasks/',  
                    data: data,  
                    success: function(response){  
                       $('#add-task-form').css('display', 'none');  
                       var task = {};  
                       task.id = response;  
                       var dataArray = $('#add-task-form form').serializeArray();  
                       for(i in dataArray) {  
                          task[dataArray[i]['name']] = dataArray[i]['value'];  
                       }  
                       appendTask(task);  
                       getTasksCount();  
                    }  
                  });  
                  return false;  
                  $('#home-page').show();  
                  $('#add-task-page').remove();  
                };  
            }) 

 

I'm new to js and jQuery and they are definitely not my strongest points, so please, advice.

adding `event.preventDefault()` on click event won't stop rendering the form `submit` event, you rather have to add the `event.preventDefault()` to form `submit` event. where this [link](https://stackoverflow.com/questions/17709140/how-to-prevent-default-on-form-submit) can help you. — kunal panchal, Feb 03 '21 at 11:06

score 1 · Answer 1 · answered Feb 03 '21 at 00:07

1

It's shall work like this :

$('#save-button').click(function(event) { 
    event.preventDefault();
    ...
    });

to know more about it : https://api.jquery.com/event.preventdefault/

answered Feb 03 '21 at 00:07

Nacim Harfouche

11
1
2

The thing is that `event.preventDefault()` prevents the form from being submitted as well, and that's not what I need. I want it to be submitted and the user not to be redirected to the formaction page. – Igor Feb 03 '21 at 10:04
Ok, then set the button type to button : – Nacim Harfouche Feb 12 '21 at 06:54

score 0 · Answer 2 · answered Feb 03 '21 at 11:15

You can do something like this.

$(document).ready(function(){
 var $form = $('form');
   $form.submit(function(){
     $.post($(this).attr('action','/tasks/'), $(this).serialize(), function(response){
        // Do something
     },'json');
     return false;
   });
});

quotation

score 0 · Answer 3 · answered Feb 03 '21 at 20:53

if you want to prevent it all, you can use event.preventDefault(). But since you are using ajax and you don't want to reload the page, you can try to apply this code:

  $("#save-button").click(function(){
            $.post('{post_url}',
                $("#add-task-form form").serializeArray(),
                function(data){
                    if (data.success){
                        redirect = '{last}';
                    } else {
                        reload(true); 
                    }
                },"json"
                );
        });

How to disable redirection to the url specified in the form action attribute on form submitting

3 Answers3