Converting the result of a jquery function into a variable I can use in PHP

Question

With help from this forum I have completed a form which uses jQuery and the resulting JSON data. I would like to take it one stage forward.

I have written a user FORM which has a textbox, when the user starts to type in the name of a company the jquery function runs and performs a look up on the data table and returns any matches in json format.

The user can then select the required company name and this then gets inserted in to the the textbax. At the same time the name of the campany logo is inserts in to another textbox as a .png file.

My company name textbox and image name textbox:

<input name="ClientName[]" placeholder="Client name" class="imaindatesel" id="search-box_1" type="text"  size="60" maxlength="40" />
<input name="CompanyImage[]" type="text"   id="company_image_1" class="ui-autocomplete-input"/>

My jquery function:

$(document).ready(function() {    
$('#search-box_1').autocomplete({
source: function( request, response ) {
    $.ajax({
        url : 'check_name.php',
        dataType: "json",
        data: {
           name_startsWith: request.term//,

        },
         success: function( data ) {
             response( $.map( data, function( item ) {
                var code = item.split("|");
                return {
                    label: code[0],
                    value: code[0],
                    data : item
                }
            }));
        }
    });
},
autoFocus: true,            
minLength: 3,
select: function( event, ui ) {
    var names = ui.item.data.split("|");                        
    $('#company_image_1').val(names[1]); //<---- I would like to use this as a PHP variable
$("#SelectView").hide();
// The line below is all I added to get the result I needed.
$("#LookUpCompanyImage").html("<img src=\"../../../conf/conf_images/boards/" + names[1] + "\">");

}               
});    

})

My PHP script

$query = $db->query("SELECT RecordID, CompanyName, ImageName FROM conf_image_depository WHERE CompanyName LIKE '".$_GET['name_startsWith']."%' GROUP BY CompanyName ORDER BY CompanyName ASC");


$data = array();

while ($row = $query->fetch_assoc()) {
    //$data[] = $row['CompanyName']. " " . $row['ImageName'];
    $name = $row['CompanyName'].'|'.$row['ImageName'];
    array_push($data, $name);   

}

//return json data
echo json_encode($data);

The result of the ajax call:

["British Airways|British-Airways.png","British Assessment Bureau|british-assessment-bureau.png","British Gas|BritishGas.png","British Sugar|BritishSugar.png"]

At the moment I have a textbox which is populated by "$('#company_image_1').val(names[1]);".

What I need to do is use "$('#company_image_1').val(names[1]);" from the jquery function and convert it in to a PHP variable.

The reason is, after the user has selected a company returned by the jquery function,JSON contains the company name and the image name of ther company logo. I then want to do two things, display the image on screen and use the name of the image in a MySQL insert.

Again, many thanks for your time.

Teun Betting · Accepted Answer · 2016-10-26 18:55:34Z

1

I would create another ajax call in the select function which posts the image name to php.

So you would need to create an ajax call something like this:

$.ajax({
    url : 'save_name.php',
    dataType: "POST", // Set the dataType to POST, so we can send data to php
    data: {
       name: names[1],
    },
     success: function( data ) {
        console.log('successfully sent the name');
    }
});

Then in the php file save_name.php you can catch the $_POST variable and retrieve the name value out of it. Something like this.

if(isset($_POST['name'])){
    // Post name is set so we can use it.
    $name = $_POST['name']; 
}

And then of course you use sql to update your database with the name value.

answered Oct 26, 2016 at 18:55

Teun Betting

515 bronze badges

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

5 Comments

DCJones Over a year ago

Thanks for your reply. I have added the following:select: function( event, ui ) { var names = ui.item.data.split("|"); $('#company_image_1').val(names[1]); $.ajax({ url : 'save_name.php', dataType: "POST", // Set the dataType to POST, so we can send data to php data: { name: names[1], }, success: function( data ) { console.log('successfully sent the name'); } }); } But when I look in the console there is no log written. It looks like the POST is not sending the name.

Teun Betting Over a year ago

Did you create "save_name.php"? Because thats where ajax is trying to send the post to. And try to use this ajax call, it will log "error" when something went wrong.

$.ajax({ 	      	url : 'save_name.php',  	      	type: 'POST', 	      	data: { name: names[1] } 	    }) 	    .done(function() { 	      	console.log("success"); 	    }) 	    .fail(function() { 	      	console.log("error"); 	    }) 	    .always(function() { 	      	console.log("complete"); 	    });

DCJones Over a year ago

Hi, Using the above code I now get info in the console. Using Google developers tools I can see the Response showing the correct file name. But, how do I use it in my POSTING script as a PHP variable?

Teun Betting Over a year ago

You can simply retrieve the post variables in your php script like so: <?php print_r($_POST); // Will print all post parameters print_r($_POST['name']); // Will print the name ?>

DCJones Over a year ago

Hi, many thanks for all your help but I think you have missed what I am trying to do. I have 2 script, the main script has a form where the user types in the name of a company. The same script performs a jQuery/Ajax request to find if the comany is in the data table. If true, the jquery function returns the name of the company logo as an image name. Its the name of that image I need to put in to a PHP variable so the image is display and available for when the user has completed the form and submitted it. At that point the MySQL INSERT takes place. Is there a way to get populate a PHP var.

DCJones · Accepted Answer · 2016-10-27 18:03:20Z

0

I have worked out how to resolve my issue. All I needed to do was to add the following line of code: $("#SelectView").hide(); $("#LookUpCompanyImage").html("");

I have edited my post to reflect the changes I made

answered Oct 27, 2016 at 18:03

DCJones

3,5015 gold badges38 silver badges63 bronze badges

Collectives™ on Stack Overflow

Converting the result of a jquery function into a variable I can use in PHP

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related