Question

I’m trying to get textboxes to populate using JQuery based on an array sent from an external PHP file using json_encode(array). The select box option that is selected determines which option value gets sent to the external PHP file. Unfortunately, my textboxes are always empty. I have been trying to debug with Firebug and lint sites, but I can’t figure out why there is no population. Ignore the security part of this please

Main index page snippet:

function loadDoc()
{
   $('#verb').live('change', function()
   {
      $.post("loadTextBox.php", {verb_value: $(this).val()},
      function(data)
      {
         $("#textbox").html(data.first);
         $("#textbox2").html(data.second);
         $("#textbox3").html(data.third);
         $("#textbox4").html(data.fourth);
         $("#textbox5").html(data.fifth);
         $("#textbox6").html(data.sitxh);
      },"json");
   });
}

External PHP file code:

<?php

header('Content-Type:application/json;charset=utf-8');

$file_absolute = "---placeholder for correct file path---";
include_once($file_absolute);
$mysql = new mysqli($db_host, $db_username, $db_password, $db_name);
$verb_value = $_POST['verb_value'];

$mysql->query("SET CHARACTER SET 'utf8'");

$result = $mysql->query("SELECT present_tense FROM $verb_value");

$queryResult = array();

while ($row = $result->fetch_object())
{
    $queryResult[] = $row->present_tense;
}
$textboxValue = $queryResult[0];
$textboxValue2 = $queryResult[1];
$textboxValue3 = $queryResult[2];
$textboxValue4 = $queryResult[3];
$textboxValue5 = $queryResult[4];
$textboxValue6 = $queryResult[5];
$array = array('first'=>$textboxValue,'second'=>
$textboxValue2,'third'=>$textboxValue3,'fourth'=>
$textboxValue4,'fifth'=>$textboxValue5,'sixth'=>
$textboxValue6);
echo json_encode($array);

?>

Answer 1

If you have textboxes, consider using .val() instead of .html. .val() should be used for setting the value of form elements.

Also, the .live() method is deprecated, so please stop using it.

As of jQuery 1.7, the .live() method is deprecated. Use .on() to
attach event handlers. Users of older versions of jQuery should use
.delegate() in preference to .live().