CODEWITHSUNDEEP
javascriptphpjqueryajaxlaravel
Haris Khan
Haris Khan

Reputation: 335

Fetch Data in a form through Ajax in Laravel

I am making an auto-complete form, in which user enter only the id and the whole information related to that id comes in other field. I am using ajax and Laravel 5.4. The Data is coming in alert but how i can insert data in input fields of a form. Here is my script:

<script type="text/javascript">
 $('#submitid').on('click', function() {

    var vid = $( "#vid" ).val();
       //var id=$(this).data('id');

        $.ajax({
              url: '/inquiryVendor',
              type: "Get",
              data:{id:$("#vid").val()}, // the value of input having id vid
               success: function(response){ // What to do if we succeed

            alert(response); console.log(response);


        }
            });
    });
</script>

this is my controller:

public function VendorDetail(Request $request)
    {

    $id= $request->id;

      $data = DB::select(DB::raw("SELECT * from bp where id = '$id'"));
      echo json_encode($data);

    }

here is my console.log response:

[{"id":37,"card_name":"Maka Furniture Co.,Ltd ","trade_type":"Manufacturer","address":"Xinzhang development zones,Shengfang town,Hebei province.","fc":"121AC209","status":0,"created_at":"2018-10-10 10:02:27","user":"admin"}]

here is the screenshot of response:

enter image description here

Any help would be highly appreciable.

Upvotes: 2

Views: 6658

Answers (4)

Vinod Joshi
Vinod Joshi

Reputation: 176

Suppose you have input fields like this in your form

<input type="text" name="vendor_name" id="vendor_name">
<input type="text" name="vendor_mobile" id="vendor_mobile">
<input type="text" name="vendor_email" id="vendor_email">

You ajax code should be like this and I hope you get the parameters in your JSON response

<script type="text/javascript">
 $('#submitid').on('click', function() {

 var vid = $( "#vid" ).val();
   //var id=$(this).data('id');

    $.ajax({
          url: '/inquiryVendor',
          type: "Get",
          data:{id:$("#vid").val()}, // the value of input having id vid
           success: function(response){ // What to do if we succeed
            $('#vendor_name').val(response.vendor_name)
            $('#vendor_mobile').val(response.vendor_mobile)
            $('#vendor_email').val(response.vendor_email) 
           }
        });
});
</script>

If this can't help then could you please do console.log(response) and paste the debug data so it will be easy to help you more. 

<script type="text/javascript">
 $('#submitid').on('click', function() {

 var vid = $( "#vid" ).val();
   //var id=$(this).data('id');

    $.ajax({
          url: '/inquiryVendor',
          type: "Get",
          data:{id:$("#vid").val()}, // the value of input having id vid
           success: function(response){ // What to do if we succeed
            console.log(response)
           }
        });
});
</script>

if you don't want response[0] then you need to change in your controller File like this.

$vendor = DB::table('bp')->where('id', '.$id.')->first();
return response()->json($vendor);

As per your need, this will help for sure.

Upvotes: 0

Khagesh
Khagesh

Reputation: 191

If you want all data in single input you can use this

<script type="text/javascript">
     $('#submitid').on('click', function() {

        var vid = $( "#vid" ).val();
           //var id=$(this).data('id');

            $.ajax({
                  url: '/inquiryVendor',
                  type: "Get",
                  dataType: 'json',//this will expect a json response
                  data:{id:$("#vid").val()}, 
                   success: function(response){ 
                        $("#inputfieldid").val(response);     
            }
                });
        });
    </script>

or if you want on different input field you can do like this

<script type="text/javascript">
 $('#submitid').on('click', function() {

    var vid = $( "#vid" ).val();
       //var id=$(this).data('id');

        $.ajax({
              url: '/inquiryVendor',
              type: "Get",
              dataType: 'json',//this will expect a json response
              data:{id:$("#vid").val()}, 
               success: function(response){ 
                    $("#inputfieldid1").val(response.id); 
                    $("#inputfieldid2").val(response.2ndcolumnName);
                    $("#inputfieldid").val(response.3rdcolumnName); 

        }
            });
    });
</script>

Upvotes: 1

Saman Ahmadi
Saman Ahmadi

Reputation: 687

add unique ID property to your input like this:

<input id="name" type="text">

Then fill this input with ajax result by this code:

<script type="text/javascript">
 $('#submitid').on('click', function() {

    var vid = $( "#vid" ).val();
       //var id=$(this).data('id');

        $.ajax({
              url: '/inquiryVendor',
              type: "Get",
              data:{id:$("#vid").val()}, // the value of input having id vid
               success: function(response){ // What to do if we succeed
                $('#name').val(JSON.parse(response)[0].name); //<---- This line,

        }
            });
    });
</script>

Do this for all your input base you logic.

Upvotes: 0

Inzamam Idrees
Inzamam Idrees

Reputation: 1981

In your other fields you can do the following in success method:

success: function(response) { 
  $('.input1').val(response.input1);
  $('.input2').val(response.input2);
  $('.label1').html(response.label1);
}

I hope it would helpful.

Upvotes: 0

Related Questions