'How to call ajax function on buttonclick in laravel?

View Code:

<script>
    function getMessage(){
        $.ajax({
           type:'POST',
           url:'/getmsg',
           data:'_token = <?php echo csrf_token() ?>',
           success:function(data){
              $("#msg").html(data.msg);
           }
        });
     }
</script>


<body>
     <div id = 'msg'>This message will be replaced using Ajax. Click the button to replace the message.</div>
     <input type="button" value="Replace Message" onclick='getMessage()'>
</body>

Here ,When I click on the button it should be replaced by the other text. But nothings appears on clicking.

Controller code:

public function index(){
    $msg = "This is a simple message.";
    return response()->json(array('msg'=> $msg), 200);
}

ajax laravel

Solution 1:^[1]

In pure js that code work fine

     function getMessage(){
        alert('Its working!');
     }

<body>
  <div id = 'msg'>This message will be replaced using Ajax. 
     Click the button to replace the message.</div>


  <input type="button" value="Replace Message" onclick='getMessage()'>
</body>

Solution 2:^[2]

Looks OK.

Put a breakpoint in your success and see what data is.

Or do a console.log

Mick

Solution 3:^[3]

in your ajax code you didn't define dataType, add dataType:"json", to retrive the json data, change your ajax code as function getMessage(){

$.ajax({
     type:'POST',
     url:'/getmsg',
     dataType:'json',
     data:{
         _token = '<?php echo csrf_token() ?>'
     },
     success:function(data){
         $("#msg").html(data.msg);
     }
});

Solution 4:^[4]

Update your code with below mentioned code, and let's try.. i will working for me..

    <script type="text/javascript" charset="utf-8">

    $(document).on('click', '#btnSelector', function(event) {
        event.preventDefault();
        /* Act on the event */

        getMessage();

    });
    var getMessage = function(){
        $.ajax({
            type:'POST',
            url:'/getmsg', //Make sure your URL is correct
            dataType: 'json', //Make sure your returning data type dffine as json
            data:'_token = <?php echo csrf_token() ?>',
            success:function(data){
                console.log(data); //Please share cosnole data
                if(data.msg) //Check the data.msg isset?
                {
                    $("#msg").html(data.msg); //replace html by data.msg
                }

            }
        });
    }
 </script>

<body>

    <div id = 'msg'>This message will be replaced using Ajax. Click the button to replace the message.</div>
    <input type="button" value="Replace Message" id='btnSelector'>

</body>

Solution 5:^[5]

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<body>
     <div id='msg'>This message will be replaced using Ajax. Click the button to replace the message.</div>
     <input type="button" id="ajax_call" value="Replace Message">
</body>
<script>
   $(function () {
      $('#ajax_call').on('click', function () {
         $.ajax({
            type:'POST',
            url:'<?php echo url("/getms"); ?>',
            data:'_token = <?php echo csrf_token() ?>',
            success:function(data){
               $("#msg").html(data.msg);
            },
            complete: function(){
               alert('complete');
            },
            error: function(result) {
               alert('error');
            }
         });
      });
   });
</script>

Jquery onclick function: jquery onclick function not defined

Also check: Function not calling within an onclick event

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	layonez
Solution 2	Mick
Solution 3
Solution 4
Solution 5	Fefar Ravi

'How to call ajax function on buttonclick in laravel?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]