1

I have created a form to submit the data into the database. This is working fine when I don't use AJAX.

Even after adding ajax it takes me to another page and displays the text, what I have returned in the controller.

My controller function

 public function newAppointment(Request $request){
    // Validate the request...
    $this->validate($request, [
        'name' => 'required',
        'email' => 'email|required',
        'mobile' => 'numeric|required',
        'date' => 'date|required',
        'time' => 'required',
    ]);

    $otp = rand(100000, 999999);

    $schedule = new \App\Schedules;

    $schedule->name   = $request->name;
    $schedule->email  = $request->email;
    $schedule->mobile = $request->mobile;
    $schedule->date   = $request->date;
    $schedule->time   = $request->time;

    $schedule->save();

    $id = $schedule->id;

    $verify = array('otp'=>$otp, 'id'=>$id);
    echo json_encode(array('verify'=> $verify));


}

Ajax Script

<script type="text/javascript">     
        $(document).ready(function (e){
            $("#newAppointment").on('submit',(function(e){
                e.preventDefault();
                $.ajax({
                    url: "appointment",
                    type: "POST",
                    data:  {name: $("#name").val, email: $("#email").val, mobile: $("#mobile").val, date: $("#date").val, time: $("#time").val },
                    contentType: "application/json",
                    cache: false,
                    processData:false,
                    success: function(data){
                        alert("Success");
                    },
                    error: function(data){
                        alert(data.error->first());
                    }           
                });
            }));
        });
        </script>

When I click on the Submit button, I get a some text as output, i.e. what I have returned in the controller, in a new page.

How can I be on the same page after submitting the form.

{"verify":{"otp":847042,"id":44}}
Improve this question
3
  • you still being redirected after submitting the form ? is that your main problem ? Commented Aug 9, 2016 at 20:52
  • if i understand your problem correctly you want not redirect after you submit form click. you must change type of you submit button to button Or after Ajax request add return false; statement Commented Aug 10, 2016 at 3:49
  • Yes, When i click on submit button I'm being redirected to a blank page with text that I'm returning on my controller.. Commented Aug 10, 2016 at 7:51

4 Answers 4

Reset to default
1

You don´t need to submit the form. Just send the AJAX request (type POST) to the URL (/appointment) that you have defined in ROUTE that takes you to the function newAppointment.

Try to return something in the controller so you can receive it in

success: function(data){
    alert("Success");
},

in data you should have what you have returned in the controller.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I am returning an array in json format on success . echo json_encode(array('verify'=> $verify));
No, echo is printing on the browser. Use return json_encode(array('verify'=> $verify)); to send the information back to the AJAX request.
Thanks for that, I changed echo to return, but as I'm returning an array from my controller using syntax return json_encode(array('verify' => $verify));. So, how can I print this on my view..
you are receiving the array in the success function in Javascript (data variable). So, you can echo(data) or use jQuery to put the information whereever you want.
The problem is when I use $("#errors").html(data);, it prints {"verify":{"otp":183111,"id":5}}. And $("#errors").html(data["otp"]); is not working.
0

try:

  $("#newAppointment").on('click',(function(evt){
            evt.preventDefault();
            $.ajax({
                url: "/appointment",
                type: "POST",
                data:  {name: $("#name").val(), email: $("#email").val(), mobile: $("#mobile").val(), date: $("#date").val(), time: $("#time").val() },
                processData: false,
                contentType: false,
                success: function(data){
                    console.log(data)
                },
                error: function(msg){
                    console.log(msg)
                }           
            });
        }));
Improve this answer

2 Comments

still being redirected to a new page with text that I'm redirecting in my controller..
ok, try also adding your form code from the form opening to closing to see if theres an issue here, otherwise also try adding return false; in the success and error functions to also prevent the form being sent, etc
0

Try

$("#newAppointment").submit(function(){
   ...
   ...
});

OR

$("#newAppointment").on('submit', function(){
   ...
   ...
});
Improve this answer

1 Comment

Tried both but still I'm getting redirected to a new page with text that I've encoded in json format..
0

because your js code has an error:

error: function(data){
    alert(data.error->first());
}

this will cause this event never occurs.

Improve this answer

1 Comment

I tried like this.error: function(data){ alert(data.error.first); } Now I'm getting MethodNotAllowedHttpException in RouteCollection.php line 218 error..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.