CODEWITHSUNDEEP
javascriptjqueryformshttp-redirectonsubmit
Igor
Igor

Reputation: 11

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

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.

Upvotes: 0

Views: 902

Answers (3)

Vladimir B.
Vladimir B.

Reputation: 305

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

Upvotes: 0

isarikaya
isarikaya

Reputation: 112

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

Upvotes: 0

Nacim Harfouche
Nacim Harfouche

Reputation: 11

It's shall work like this :

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

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

Upvotes: 1

Related Questions