Post the value using Ajax

Question

I'm trying to post the value of input name="sub2" to process my query in my input="sub3". I used Ajax but the input name="sub3" still empty. The value of sub2 is came from dropdown option text, if option text value is Supplies It get only the 3 first letters of supplies, so now the value of sub2 is "SUP". That value what I need to post to function my query in my sub3 textbox. Help please?

This is fiddle example http://jsfiddle.net/xqGLS/3/

Code.php

<?php
    $resultcode = $mysqli->query("SELECT category, id, maincode FROM category GROUP BY id ORDER BY maincode");
    $code = '';
     while($row = $resultcode->fetch_assoc())
        {
        $code .= '<option value = "'.$row['maincode'].'">'.$row['category'].'</option>';
        }   
?>
<form action="<?php $_SERVER['PHP_SELF']?>" method="POST">
<br/>

<label>Category</label>
<select name="maincode" style="text-transform:uppercase;" onchange = "GetChangedValue(this);">
<option value=""></option>
<?php echo $code; ?>
</select>

</br>

<label>Sub1</label>
<input type="" name="sub1" id="sub1" value="" readonly style="width:45px;text-transform:uppercase;">

<script>
$('[name="maincode"]').change(function() {
   $('[name="sub1"]').val($(this).val());
   var input = $('[name="sub2"],[name="sub3"]'),
    input1 = $('[name="sub2"]'),
    input2 = $('[name="sub3"]'),
    input3 = $('[name="equal"]');
    input.change(function () {
    input3.val(input1.val() + input2.val());
});
});
</script>

<script>
function GetChangedValue(e) {
var value = e.options[e.selectedIndex].text;
var elem = document.getElementById("sub2"); elem.value = value.substring(0,3);
}
</script>

<label>Sub2</label>
<input name="sub2" id="sub2" value="" style="width:35px;text-transform:uppercase;" readonly>

<label>Sub3</label>
<input id="sub3" name="sub3" style="width:35px;text-transform:uppercase;" value=''>

<script type="text/javascript">
$('#sub2').change(function(){
$.ajax({
url : 'check.php',
data :{mainlist_id : $(this).val()},
dataType:'html',
type:'POST',
success:function(data){
$('#sub3').html(data);
}
});
});
</script>

<input id="equal" name="equal" value="" style="width:60px;text-transform:uppercase;" type="hidden">
<input type="submit" name="">
</form>

Check.php

<?php
    $mysqli = new mysqli("localhost", "root", "", "2015");
    $sub = $mysqli->real_escape_string($_POST["mainlist_id"]);

$result2 = $mysqli->query("SELECT * FROM code
WHERE sub1code LIKE '$sub-___' ORDER BY sub1code");

while($row = $result2->fetch_assoc())
  {
  $value = $row['sub1code'];
  }
  $first = substr($value, 0, 4);
  echo $first;
  $last = substr($value, -3);
  $i="0";
  while($i<=$last)
  {
  $i++;
  }
  $value2=strlen($i);
    echo $first;
    if($value2==1)
    {
    echo "00".$i;
    }
    elseif($value2==2)
    {
    echo "0".$i;
    }
    else
    {
    echo $i;
    }
    ?>

Answer 1

I think you want something like this. Just a little change on your code but it should work.

Code.php

<script type="text/javascript">
function GetChangedValue(str) {
    if (str==""){
        document.getElementById("sub3").innerHTML="";
        return;
    }
    if (window.XMLHttpRequest)   {
        // code for IE7+, Firefox, Chrome, Opera, Safari   
        xmlhttp=new XMLHttpRequest();  
    } else {
        // code for IE6, IE5   
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    } 
    xmlhttp.onreadystatechange=function(){   
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("sub3").value = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","check.php?q="+str,true);
    xmlhttp.send();
}
</script>

<select name="category" id="category" onchange="GetChangedValue(this.value);">
<option value=""></option>
<?php
$mysqli = new mysqli("localhost", "root", "", "2015");
$result2 = $mysqli->query("SELECT * FROM category ORDER BY maincode");
while($row = $result2->fetch_assoc())
{
$ok = $row['maincode'];
echo "<option value=".$row['maincode'].">".$row['category']."</option>";
}                               
?>
</select>


<input type="" name="sub3" id="sub3" value="" readonly style="width:85px;text-transform:uppercase;">

Check.php

<?php
if (isset($_GET["q"])) {
$q=$_GET["q"];
$mysqli = new mysqli("localhost", "root", "", "2015");

$sub = substr($q, 0, 4);

$result2 = $mysqli->query("SELECT * FROM code
WHERE sub1code LIKE '$sub-___' ORDER BY sub1code");

while($row = $result2->fetch_assoc())
  {
  $value = $row['sub1code'];
  }
  //$first = substr($value, 0, 3);
  echo $sub;
  $last = substr($value, -3);
  $i="0";
  while($i<=$last)
  {
  $i++;
  }
$value2=strlen($i);
if($value2==1)
{
echo "-"."00".$i;
}
elseif($value2==2)
{
echo "-"."0".$i;
}
else
{
echo "-".$i;
}
}
?> 

Answer 2

There are 2 problems:

1. Events should be added at first not in other event. If you do like this, when maincode is changed, sub1 and sub2 has changed, but now sub1 and sub2 have no expected change event.
2. The value of an input is changed by script can't trigger the change event.