CODEWITHSUNDEEP
phpjqueryajaxjson
programm3r
programm3r

Reputation: 217

JQuery $.post with data parsing

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);

?>

Upvotes: 1

Views: 261

Answers (2)

Kundan Singh Chouhan
Kundan Singh Chouhan

Reputation: 14282

You are using wrong jquery method to put values in textboxes

Replace this 

$("#textbox").html(data.first);

With 

$("#textbox").val(data.first);

Hope this will fix your problem.

Upvotes: 0

kapa
kapa

Reputation: 78671

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().

Upvotes: 1

Related Questions