We Keep Coding

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:
Any help would be highly appreciable.

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>

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.

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.

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.

Why i can not get value from input using javascript?

When i press on click here It's wil be alert blank and blank value.
I want to know why not alert 400 and 400
test1.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form id="first_image_data_url_fid" style="display: block;">
<input type="text" name="first_image_data_url" id="first_image_data_url"/>
<input type="text" name="first_image_data_dimension_width" id="first_image_data_dimension_width"/>
<input type="text" name="first_image_data_dimension_height" id="first_image_data_dimension_height"/>
</form>
<span id="mySpan_check_image_data_width_height"></span>
<div onclick="test_fn()">click here</div>
<script language="JavaScript" type="text/javascript">
function test_fn()
{
var first_image_data_url = "https://pbs.twimg.com/profile_images/839721704163155970/LI_TRk1z_400x400.jpg";
document.getElementById("first_image_data_url").value = first_image_data_url;
document.getElementById("first_image_data_dimension_width").value = "";
document.getElementById("first_image_data_dimension_height").value = "";
$.ajax
(
{
url: 'test2.php',
type: 'POST',
data: $('#first_image_data_url_fid').serialize(),
cache: false,
success: function (data) {
$('#mySpan_check_image_data_width_height').html(data);
//get_first_image_data_width_height();
}
}
)
var item = get_first_image_data_width_height();
}
</script>
<script>
function get_first_image_data_width_height(){
var item;
var first_image_data_dimension_width_val = document.getElementById("first_image_data_dimension_width").value;
alert(first_image_data_dimension_width_val);
var first_image_data_dimension_height_val = document.getElementById("first_image_data_dimension_height").value;
alert(first_image_data_dimension_height_val);
var item = "0";
return item;
}
</script>
test2.php
<?PHP
session_start();
include("connect.php");
$first_image_data_url = mysqli_real_escape_string($db_mysqli,$_POST['first_image_data_url']);
$first_image_data_dimension = getimagesize($first_image_data_url);
$first_image_data_dimension_width = $first_image_data_dimension[0];
$first_image_data_dimension_height = $first_image_data_dimension[1];
?>
<script>
document.getElementById("first_image_data_dimension_width").value = "<?PHP echo $first_image_data_dimension_width; ?>";
document.getElementById("first_image_data_dimension_height").value = "<?PHP echo $first_image_data_dimension_height; ?>";
</script>

If I understood your question correctly, you want to know why alerts gives you an empty string even if you see 400 and 400 in your inputs. It is because JS is asynchronous language and your timeline looks like this:
function test_fn()
{
var first_image_data_url = "...";
// (1) setting an empty values
document.getElementById("first_image_data_url").value = first_image_data_url;
document.getElementById("first_image_data_dimension_width").value = "";
document.getElementById("first_image_data_dimension_height").value = "";
// (2) starting AJAX call
$.ajax
(
{
url: 'test2.php',
type: 'POST',
data: $('#first_image_data_url_fid').serialize(),
cache: false,
success: function (data) {
// (4) END of AJAX call
$('#mySpan_check_image_data_width_height').html(data);
//get_first_image_data_width_height();
// you should get your 400 and 400 here
//var item = get_first_image_data_width_height();
}
}
)
// (3) showing the result
var item = get_first_image_data_width_height();
}
If you look carefully, you will see that you try to alert values before they come.
BTW, you don't need to do mysqli_real_escape_string before get_image_size.
If you don't do any calculations on the image nor downloading it, you can obtain it dimensions by pure JS. See this answer

Need to get some value of variable from linked lists

I have some page with form, which loading some data to POST when i submit it. Then it links user to the next page. On this page I catch data from POST, and I have two dropdownlists, where the second one depends on the first. The first get's value from POST data:
echo '<script type="text/javascript">
jQuery("#markid").val("'.$GLOBALS["i"].'"); </script>';
Where $GLOBALS["i"] = id from DB, which has kept in data from POST by previous page.
But it doesn't work for the second dropdownlist which depends on it:
echo '<script type="text/javascript">
jQuery("#comm").val("'.$GLOBALS["i1"].'"); </script>';
I think it can be from the part of code, which realises depending of the second dropdown list:
<script>
jQuery(function(){
var id = jQuery(".mark").val();
jQuery.ajax({
type:"POST",
url: "wp-content/com.php",
data: {id_mark: id},
success: function(data){
jQuery(".comm").html(data);
}
});
jQuery(".mark").change(function(){
var id = jQuery(".mark").val();
if(id==0){
}
jQuery.ajax({
type:"POST",
url: "wp-content/com.php",
data: {id_mark: id},
success: function(data){
jQuery(".comm").html(data);
}
});
});
Where "mark" - first dropdownlist, "comm" - the second one.
This is the first part of my problem.
The second: I have some value on the page which depends on the value of the second dropdownlist. I tried to:
jQuery(".comm").change(function(){
var id = jQuery(".comm").val();
if(id==0){
}
jQuery.ajax({
type:"POST",
url: "wp-content/pricecar.php",
data: {id_mark: id},
success: function(data){
jQuery(".price9").html(data);
var price1 = jQuery(".price1").val();
var price2 = jQuery(".price2").val();
var price3 = jQuery(".price3").val();
var price4 = jQuery(".price4").val();
var price5 = jQuery(".price5").val();
var price6 = jQuery(".price6").val();
var price7 = jQuery(".price7").val();
var price8 = jQuery(".price8").val();
var price9 = jQuery(".price9").val();
jQuery.ajax({
type:"POST",
url: "../wp-content/price.php",
data: {price1: price1,price2: price2,price3: price3,price4: price4,price5: price5,price6: price6,price7: price7,price8: price8, price9: data},
success: function(data){
jQuery(".summPrice").html(data);
}
});
}
});
But it works only one time, and i don't know why.
I'll be glad for any offers.

I don't have a full visibility of the rendered html and of the ajax responses, but I would give a try with:
Remove this lines
echo '<script type="text/javascript">
jQuery("#markid").val("'.$GLOBALS["i"].'");
</script>';
echo '<script type="text/javascript">
jQuery("#comm").val("'.$GLOBALS["i1"].'"); </script>';
And do something like this where you print the html
...
<select id="markid" data-val="<?php echo isset($GLOBALS["i"]) ? $GLOBALS["i"] : -1;?>"></select>
<select id="comm" data-val="<?php echo isset($GLOBALS["i1"]) ? $GLOBALS["i1"] : -1;?>"></select>
And in your javascript have something like
<script>
(function ($) {
//when everything is ready
$(fillUpCommOptions);
$(watchSelectsChanges);
function fillUpCommOptions() {
var id = $('#markid').data('val') ? $('#markid').data('val') : $('#markid').val();
$('#markid').removeAttr('data-val');//remove data-val, at next change event we want the select new val
$.ajax({
type: "POST",
url: "wp-content/com.php",
data: {id_mark: id},
success: function (data) {
//assuming data is something like
// '<option value="niceValue">nice value</option>
$("#comm").html(data);
if ($("#comm").data('val')) {
//apply values from post also for the second dropdown
// assuming that data contains and option with value == $("#comm").data('val')
$("#comm").val($("#comm").data('val'));
$('#comm').removeAttr('data-val');
$("#comm").change()//trigger change after setting the value
}
}
});
}
function watchSelectsChanges() {
$('#markid')
.off('change')//just in case, could not be needed
.on('change', fillUpCommOptions);
$('#comm')
.off('change')//just in case, could not be needed
.on('change', handleDependentValues);
}
function handleDependentValues() {
var id = $("#comm").val();
if (id) {
$.ajax({
type: "POST",
url: "wp-content/pricecar.php",
data: {id_mark: id},
success: function (data) {
jQuery(".price9").html(data);
var price1 = jQuery(".price1").val();
var price2 = jQuery(".price2").val();
var price3 = jQuery(".price3").val();
var price4 = jQuery(".price4").val();
var price5 = jQuery(".price5").val();
var price6 = jQuery(".price6").val();
var price7 = jQuery(".price7").val();
var price8 = jQuery(".price8").val();
var price9 = jQuery(".price9").val();
jQuery.ajax({
type: "POST",
url: "../wp-content/price.php",
data: {
price1: price1,
price2: price2,
price3: price3,
price4: price4,
price5: price5,
price6: price6,
price7: price7,
price8: price8,
price9: data
},
success: function (data) {
jQuery(".summPrice").html(data);
}
});
}
})
}
}
})(jQuery);

Reset the data after unchecking the checkbox

I have some results in div's ,each result has one checkbox associated with it, when a user click on single checkbox user, Current checked box's value is passed to another page using an ajax call and data is fetched and displayed in a hidden div box.
Now problem is, when user uncheck the checkbox it should remove the data associated with the checkbox.
My code is :
<div id='compare_box'>
</div>
<div class="col-md-3 photo-grid " style="float:left">
<div class="well well-sm">
<a href="final.php?id=<?php echo $id;?>&name=<?php echo $title;?>" target="_blank">
<h4><small><?php echo $title; ?></small></h4>
</a>
<br>
<input type ='checkbox' name="compare" class="compare" value="<?php echo $id;?>">add to compare
</div>
</div>
Ajax call
<script type="text/javascript">
$(document).ready(function()
{
$(".compare").change(function() {
if(this.checked) {
var check = $(this).val();
$.ajax({
type: 'POST',
url: 'compare.php',
dataType : 'JSON',
data:{value : check},
success: function(data)
{
console.log(data);
$('#compare_box').append(data);
}
});
}
});
});

Use something like this to empty the contents of the DIV
$('#compare_box').empty()

better way is to keep the reference map, something like this
$(document).ready(function() {
var boxes = {};
$(".compare").change(function() {
var check = $(this).val();
var data = $(this).closest('.box').clone();
if (this.checked) {
boxes[check] = data;
$('#comparebox').append(boxes[check]);
} else if (!this.checked && boxes[check]) {
boxes[check].remove();
delete boxes[check];
}
});
});
EDIT - should be working (not tested)
var check = $(this).val();
if (this.checked) {
$.ajax({
type: 'POST',
url: 'compare.php',
dataType: 'JSON',
data: {
value: check
},
success: function(data) {
boxes[check] = $(data);
$('#compare_box').append(boxes[check]);
}
});
} else if(!this.checked && boxes[check]) {
boxes[check].remove();
delete boxes[check];
}
DEMO

How to insert into mysql table using ajax?

I want to insert data into table using ajax so data will insert without reload of page.
This code insert data into table very well but code also reload the page.
But I want insert without reloading of page.
How can i do this ?
<?php
include('connection.php');
if(isset($_POST['cmt'])){
$comment = addslashes($_POST['cmt']);
$alertid = $_POST['alert_id'];
mysql_query("INSERT INTO `comments` (`id`, `alert_id`, `comment`, `username`) VALUES (NULL, '".$alertid."', '".$comment."', 'tomas')");
}
?>
<script>
function submitform(){
var comment = $("#comment").val();
var alertid = $("#alertid").val();
$.ajax({
type: "POST",
//url: "ana.php",
data:{cmt:comment,alert_id:alertid}
}).done(function( result ) {
$("#msg").html( result );
});
}
</script>
<form method = "POST" onsubmit = "submitform()">
<textarea onFocus = "myFunction(1)" onBlur = "myFunction(0)" style="margin: 0px 0px 8.99305534362793px; width: 570px; height: 50px;" rows = "6" cols = "40" id = "comment"></textarea><br />
<input type = "text" placeholder="Enter Maximium 100 Words" id = "alertid" value = "10">
<input type = "submit" name = "submit" value = "Comment">
</form>

try this add this to form onsubmit = "return submitform();"
function submitform(){
var comment = $("#comment").val();
var alertid = $("#alertid").val();
$.ajax({
type: "POST",
//url: "ana.php",
data:{cmt:comment,alert_id:alertid}
}).done(function( result ) {
$("#msg").html( result );
});
return false;
}

return false from your event handler function.
onsubmit="submitform(); return false;">
Consider moving to modern methods of event binding.

You have to create a php file that insert into your table the posted data and call it with ajax like that :
$.ajax({
url: "/file.php",
type: "POST",
cache: false,
dataType: "json",
data: postValue,
success: function(results) {
bootbox.alert(results.message, function() {
bootbox.setIcons(null);
window.location.reload();
});
},
error: function(results) {
bootbox.alert(results.message, function() {
bootbox.setIcons(null);
});
}
});