troubleshooting Question

insert ID of database value into database instead of text value from text field

Avatar of Crazy Horse
Crazy HorseFlag for South Africa asked on
PHPAJAX
23 Comments2 Solutions186 ViewsLast Modified:
I had this question after viewing Getting search results to display ul for text field being inputted into.

I am having a hard time trying to figure this out. If I INSERT the data into the database using a foreach loop, it stores the actual text values of the search into the database. I would rather use the ID.

To try explain better, I have a table with reasons for lost time e.g.:

id                    reason
1             watching movies
2                    Sleeping
3              personal emails

When clicking on the search results it enters the text reason into the text field which is correct. But when submitting to the database it should insert the id number and not the text that is displayed.

This ID can only be obtained after the ajax call has been made and the database has been queried, just like the text value.

The php part for the ajax call echo's out the <li> where I have attempted to ad the ID for that record.

while($row = $result->fetch_assoc()) {
			$lost_time_desc = sanitize($row['lost_time_desc']);
			$lostId = sanitize($row['lost_time_reason_id']);
			echo "<li data-id='".$lostId."'>" . $lost_time_desc. "</li>";	
		}

And here is the existing jQuery:

$(function() {
  $("input").keyup(function() {
    // GET A REFERENCE TO THE <input> THAT TRIGGERED THE EVENT
    var jqo = $(this);
  
    // GET THE VALUE
    var input = jqo.val();
    jqo.addClass('loader').prop({disabled: false});
    // FIND THE result <div> FOR THIS <input>
	var parent = jqo.closest('div');
    var result = parent.find('.result');
    if (input.length > 3) {
//      jqo.addClass('loader').prop({disabled: true});
      // GET DATA FROM SERVER
      $.ajax({
        type: 'POST',
        url: 'lost-units-search.php',
        data: {
          name: input
        }
      })
      // .success IS ON ITS WAY OUT
      // I PREFER promise INTERFACE
      .done(function(data) {
        // data IS PLAIN HTML SO ADD IT TO OUR
        // result WINDOW
        result.html(data);
        result.data('input', jqo);
		  
		  
		jqo.removeClass('loader').prop({disabled: false});
      })
    }
    // THE REST IS THE SAME
    if (input.length < 1) {
      result.html("");
		jqo.removeClass('loader').prop({disabled: false});
    }
  });
  
  $('.result').on('click', function(evt) {
    $(this).data('input').val(evt.target.textContent);
    this.textContent = '';
	  
  });
});

I tried to create a variable with the id in it and console log that out when clicking on one of the <li>'s but it gives me an error,  '$lostId is not defined. '

 var $lostId = $(this).data('lost-id');
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 2 Answers and 23 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 23 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros