How can i insert 2 actions using HTML, JavaScript and Laravel?

Question

I need to set up 2 functionalities in the same time. I need to redirect a action to a route in Laravel. And use the void operator of Javascript to keep the modal page without redirect to other route.

This become a problem when i try to fix other problem about this question !

For example, i pretend to implement a code that seems like this functionalities in the same time.

  <form method="post" action="javascript:void(0)" >
  <form method="post" action="{{ route('myRoute.store') }}">

The output should be i redirect a post method to any route that i want that have POST method like above. And keep my modal page without redirecting to other page, like using de void operator of JavaScript.

I'm not pretend to use the AJAX request in this situation. I want just use other alternative to create the action="javascript:void(0)" when my form redirect to my route with method POST in Laravel. How can i do it?

Answer 1

Use AJAX to accomplish this, send a POST request to {{ route('myRoute.store') }} with the same form data and open up the modal on success of that AJAX. A simple ajax request in Jquery looks like this:

$.ajax({
    method:'POST',
    url: '{{ route('myRoute.store') }}', 
    data:{'id':id},
    success: function(result){
        $("#div1").html(result);
    }

});

Here, id is an example of data to be submitted to the requested url.

Answer 2

Using the example of the question cited. It's not necessary to use the form in HTML to insert a similar functionality like the action="javascript:void(0)" . In the AJAX request, you can use the preventDefault() function. This function is used in Jquery, and need of a event to works. Here is your documentation .

And to put this function on your code, you should to do as the code below:

        form.submit(function(b){              
          b.preventDefault();  // put the function here
          $.ajax({
            url: "{{route('prospectEmails.store')}}",
            type: "POST",
            data : form.serialize(),
            dataType: "json",
            success:function(response) {

              $('#res_message').html(response.msg);
              console.log(response.msg);
              showEmails(p.id);
            }

          });
        });

This function will to prevent the next event if this same can be canceled.