DCJones
DCJones

Reputation: 3451

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

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.

Upvotes: 0

Views: 60

Answers (2)

DCJones
DCJones

Reputation: 3451

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

Upvotes: 0

Teun Betting
Teun Betting

Reputation: 51

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.

Upvotes: 1

Related Questions