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

質問

java script かajaxのカテゴリーだと思います。

受注管理のシステムを作成しております。
PHP 5.x
MySQL 5.x
です。

管理者が商品受注のデータを入力する際に、商品名をプルダウン等で選ぶのがイヤで
商品コード（例：1001等）を手打ちで入力して、その瞬間その画面で、商品名と金額を呼び出して、あとは個数を入れる
という作業を10商品くらい繰りかした後、単価×個数を全て計算して合計金額をその場で
表示されることはできないでしょうか？

どなたかお詳しい方、お知恵を貸してください！！

回答No.6

babu_baboo

そして、さっそくていせい。
これらしきところを、これに。

　　ajax ('sql.php', 'post', {sql: 'SELECT name, tanka FROM database_name WHERE id=' + cd + ' LIMIT 1'}, function (res) {

やっつけでかいたから、うごかせないなら、あきらめてね

回答No.5

babu_baboo

その２

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

回答No.4

babu_baboo

すくりぷとぶぶんをぶんかつ。
<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, furigana FROM zenkohdo.shain 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);

回答No.3

babu_baboo

ajaxをとうさいしてみる
でんじゃらすだし、すくりぷとからSQLぶんをおくるなんてもってのほかだけど、やってみる。
うごかせないなら、あきらめようね
まずは、sql.php として

<?php
mb_language ('Japanese');

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

$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');
?>

回答No.2

reggaepunc

提案としてこんなUIはどうでしょう。（コード汚いのは重々承知です。）
※絞込しかやってないです。
<body>
<input type="text" id="inputArea">
<div id="output"></div>
<script type="text/javascript">
/*
@regepan
*/
var inputArea = document.getElementById('inputArea');
inputArea.addEventListener( 'keyup', keyupEvent, false );

var output = document.getElementById('output');

var txt;
var i;
var items = [];
// 初期化
function init()
{
for( i = 0; i < 50; i++ )
{
var obj = {};
var num = Math.floor( Math.random() * 10 ) + '';
num += Math.floor( Math.random() * 10 ) + '';
num += Math.floor( Math.random() * 10 );

obj.id = num;
obj.name = '商品名';
obj.price = 1000;

txt = document.createTextNode( obj.id + ' ' + obj.name + ' ' + obj.price );
var a = document.createElement('a');
a.href = '#';
var p = document.createElement('p');;

a.appendChild( txt )
p.appendChild( a );
output.appendChild( p );

items.push( obj );
}
}
init();
// itemの再構築
function makeList()
{
for( i = 0; i < items.length; i++ )
{
var obj = items[i];

txt = document.createTextNode( obj.id + ' ' + obj.name + ' ' + obj.price );
var a = document.createElement('a');
a.href = '#';
var p = document.createElement('p');;

a.appendChild( txt )
p.appendChild( a );
output.appendChild( p );
}
}
// keyupEvent
function keyupEvent()
{
var pool = [];
var temp;
var str;
var val;
output.innerHTML = '';

for( i = 0; i < items.length; i++ )
{
val = this.value;
val = val.slice( 0, this.value.length );

var item = items[i];
temp = item.id;
temp = temp.slice( 0, this.value.length );
temp -= 0;

if( val == '' )
{
makeList();
break;
}
else
{
if( temp == val )
{
txt = document.createTextNode( item.id + ' ' + item.name + ' ' + item.price );
var a = document.createElement('a');
a.href = '#';
var p = document.createElement('p');

a.appendChild( txt )
p.appendChild( a );
output.appendChild( p );
}// if
}// if
}// for
}// keyupEvent
</script>
</body>

回答No.1

babu_baboo

もじすうせいげんがなかったら、もっとかけたのに、ざんねん。
こーどのしつも、ざんねんだけど、ajax は、だれかに！

<!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でよびだすこーどをかく！
　　if (cd === '123') {
　　　inp[1].value = '洋野町名産　塩ウニ';
　　　inp[2].value = '1800';
　　}
　　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);

</script>