商品コードを入力で、商品名、金額を表示、合計計算

JavaScript 教えてgoo

http://oshiete.goo.ne.jp/qa/6676351.html
商品コードを入力で、商品名、金額を表示、合計計算

でも、文字コードの設定でつまずくだろうなぁ〜。

<?php
mb_language ('Japanese');

define ('HOST', '127.0.0.1');
define ('USER', 'root');
define ('PASS', 'xxxxxxxxx');

$ID = mysql_connect (HOST, USER, PASS);
if ($ID) {
  $sql = $_POST['sql'];
  if ($sql) {
    $R = mysql_query ($sql, $ID);
    
    if ($R) {
      while ($r = mysql_fetch_array ($R, MYSQL_NUM))
        $b[] = join (chr (31), $r);

      exit (join (chr (30), $b));
    }
  }
}
exit ('Error');
?>

変な区切り文字使うより、・・・。
Ajaxは、「JavaScript ++かも日記」から見よう見まね。
http://jsgt.org/mt/archives/01/000409.html

<!DOCTYPE html>
<title></title>
<style type="text/css">
table, td, th { border :1px #888 solid }
td input[type="text"] { border : 0px none }
</style>
<body>
<form action="#">
<table id="hoge">
  <thead><tr><th>コード<th>商品名<th>単価<th>個数<th>金額</thead>
  <tbody>
    <tr>
      <td><input type="text" name="cd" value="" size="10">
      <td><input type="text" name="pn" value="" size="20">
      <td><input type="text" name="up" value="" size="10">
      <td><input type="text" name="qt" value="" size="10">
      <td><input type="text" name="pr" value="" size="16">
  </tbody>
</table>
</form>

<script>
var table = document.getElementById ('hoge');

function calculate () {
  var tr = table.querySelectorAll ('tbody > tr');
  Array.forEach (tr, function (tr, idx) {
    var inp = tr.querySelectorAll ('input');
    
    var up = parseFloat (inp[2].value);
    var qt = parseFloat (inp[3].value);
    var pr = 0;
    
    if (idx === this.max)
      inp[4].value = this.total;
    
    else if (isNaN (up) || isNaN (qt))
      return;
    
    else {
      inp[4].value = (pr = up * qt);
      this.total += pr;
    }

  }, {max: tr.length - 1, total : 0});
}

function handler (evt) { /*@cc_on*/
  var e = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/;
  var tr = e.parentNode.parentNode;
  var inp = tr.querySelectorAll ('input');
  var cd;
  
  switch (e.name) {
  case 'qt' : case 'up' :
    calculate ();
    break;
  case 'cd' :
    cd = e.value;
    ajax ('sql.php', 'post', {sql: 'SELECT name, tanka FROM database_name WHERE id=' + cd + ' LIMIT 1'}, function (res) {
      var rec;
      if (! /^Error/.test (res)) {
        rec = res.split (/\u001f/g);
        this[1].value = rec[0];
        this[2].value = rec[1];
        this[3].focus ();
      }
    }, inp);
    break;
  }
}
 
table./*@if (@_jscript)
  attachEvent ('onfocusout' + @else@*/
  addEventListener ('blur'/*@end@*/,
    handler, true);

(function (t) {
  var tbody = t.querySelector ('tbody');
  var tr = tbody.querySelector ('tr');
  var max = 10;
  
  while (--max)
    tbody.appendChild (tr.cloneNode (true));
})(table);

(function () { // Ajax

  if ('undefined' === typeof XMLHttpRequest)
    this.XMLHttpRequest =
      (function () {
        for (var i = 0, h; h = arguments[i++];)
          try { h (); return h; } catch (err) { ; }
        return null;
      })(function () { return new ActiveXObject ('Msxml2.XMLHTTP.6.0') },
         function () { return new ActiveXObject ('Msxml2.XMLHTTP.3.0') });
  

  var obj2str =
    (function (obj) {
      var p = [];
      var i, I, k, q, idx, key, val;

      switch (typeof obj) {
      case 'string' :
        obj = obj.split ('\u0026');
        for (i = 0, I = obj.length; i < I; i++) {
          if (q = obj[i]) {
            idx = q.indexOf ('=');
            if (-1 === idx)
              break;
            key = encodeURIComponent ( q.substring (0, idx));
            val = encodeURIComponent ( q.substring (idx + 1)) || '';
            p.push (key + '=' + val);
          }
        }
        return (p.length) ? '\u0026' + p.join ('\u0026'): '';
      
      case 'object' :
        for (i in obj)
          if (obj.hasOwnProperty (i))
            p.push (encodeURIComponent (i) + '=' + encodeURIComponent (obj[i]));

        return (p.length) ? '\u0026' + p.join ('\u0026'): '';
      }
    });


  var ajax =
    (function (uri, method, parameter, callbackfn, callbackobj) {
      var httpObj;
      var para;

      if (httpObj = new XMLHttpRequest) {
        para = 'SendTime=' + (new Date).getTime() + obj2str (parameter);
        
        if ('GET' === method.toUpperCase ())
          uri += '?' + para;

        httpObj.open (method, uri, true);
        httpObj.setRequestHeader ('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        httpObj.onreadystatechange =
          function () {
            if (4 === httpObj.readyState) {
              try {
                if (200 === httpObj.status)
                  callbackfn.call (callbackobj, httpObj.responseText);
              }
              catch (err) { ; }

              httpObj.onreadystatechange = new Function;
              uri = method = parameter = callbackfn = callbackobj = httpObj = para = null;
            }
          };

        httpObj.send (para);
      }
    });

  this.ajax = ajax;
})();
</script>