私はphpを初めて使用し、ユーザーが各行が単一のデータポイントを表すさまざまな行にデータを入力する必要があるフォームを作成したいと考えています。任意の行に対してデータが入力されるたびに、その特定のデータ ポイントが更新され、残りのエントリを待たずに mysql サーバーに格納されるように設計したいと考えています。データが特定のセルに入力されるとすぐに発生するはずです。Return キーを押すと、mysql サーバーで更新がトリガーされます。PHPでそれを行うことは可能ですか、それとも他のテクノロジーを使用する必要がありますか
3 に答える
私の答えでは、更新は一度に1セルずつ行われるべきであるとあなたが言及している質問の部分に焦点を当て、フォーム全体を送信したくないという仮定を立てます-おそらく不要なダミーデータまだ入力されていないセル。
PHPだけではできません。PHP はサーバー上で実行され、コードはブラウザーで発生するイベントに反応できません。PHP サーバー コードと JavaScript クライアント コードを組み合わせる必要があります。
ユーザーは同じフォームに入力し続けることになっているため、フォームの送信方法を指摘するソリューションでは不十分です。フォームが送信されると、ページもリロードされます。
一度に 1 つのセルを送信するには、Ajax が必要です。特に Internet Explorer の古いバージョンをサポートする場合、Ajax をクロスブラウザーで使用するには少し複雑になる可能性があります。したがって、Ajax リクエストには jQuery を使用することをお勧めします。jQuery は、クロスブラウザーの問題に対処します。
jQuery は、フォーム フィールドからデータを取得するのにも役立ちます。PHP コードに次のような HTML を出力させる場合:
<input type="text" class="datapoint" name="datapoint1" value="default value" />
<input type="text" class="datapoint" name="datapoint2" value="default value" />
...
次に、jQuery で学習しようとしているのは、次のようなものを記述する方法です。
$(document.ready(function() { // This is a way to have jQuery bind the desired actions when the page is built in the browser.
$('.datapoint') // Finds all elements in the document with class="datapoint"
.on("change", function () { // Binds an action to execute when the value is changed - detected when the input loose focus, i.e. when the user moves to the next cell
var params = { name: $(this).attr('name'), value: $(this).attr('value') }; // Extracts name and value from the input field changed
$.ajax({
url: updatevalue.php,
data: params
});
});
}); // Ends the $(document.ready(function() {
updatevalue.php
サーバーでは、次のようなコード(または選択した他の URL) を使用してこのコードをバックアップする必要があります。
$name = $_REQUEST['name'];
$value = $_REQUEST['value'];
switch ($name) {
case 'something':
// Prepare PDO statement
break;
case 'something else':
// Prepare some other PDO statement
break;
...
}
... execute PDO ...
PHP の初心者には、データベース アクセスに PDO を使用することを学ぶことをお勧めします。PDO で準備済みステートメントを使用していることを確認してください。その方法については、PHP のマニュアルを参照してください。
また、次のような動的 SQL 式を作成するために値を使用しないでください。name
$query = 'UPDATE myTable SET '.$name.'=:value'; // Very bad idea!
アプリケーションに巨大なセキュリティ ホールが生じるためです。
まだ足りないものがあります。WHERE
あなたの句に何を入れますか?
data
ユースケースの詳細に応じて、 HTML で属性を使用する方法をすばやく簡単に理解できることを願っています。ブラウザーのサポートは完全ではありませんが、最新のすべてのブラウザーで動作します。上記のスニペットは次のように変更されます。
var params = { name: $(this).attr('name'), value: $(this).attr('value'), recordid: $(this).data('recordid') };
...
<input type="text" class="datapoint" name="datapoint1" data-recordid='1234' value="default value" />
これまでの回答はあなたの質問には答えていません。これは、ユーザーが Enter キーを押してセルを更新できないためです。ユーザーは入力フィールドをタブで移動でき、ユーザーがフィールドを離れるとデータベースが更新されます。
ユーザーが Enter キーを押して個々の値を更新できるようにするには、次のことも行う必要があります。
- Enter キーを押しても完全なフォームが送信されないことを確認してください。
- Enter キーを押すと、入力で変更イベントがトリガーされることを確認してください。
それらについては、Ignacio Belhot Colistro:s answer を使用するように変更できます
$('.datapoint').keydown(function (e) {
との代わり$(document). ...
に
e.preventDefault();
$(this).blur(); // As if the user tabbed or clicked to focus on some other element
の代わりにalert
。
注意: これは簡単なコーディング方法です。ただし、新しい関数を構築して、ページ内の多くの要素の keydown イベントにアタッチするのは非常に非効率的です。多くのフィールドがある場合、このアプローチではパフォーマンスの問題が発生する可能性があります。その場合、既製のプラグイン (Bttle Butkus の回答のものなど) を使用するのがおそらく最善の解決策です。
上記の注意は、私のすべてのスニペットに当てはまります。それらはすべて調整して完了する必要があります。しかし、この回答はすでに長すぎます。これが、初心者が求める詳細な機能を実現するための最も現実的な方法であると思います。
これが、少なくとも良い方向に進むのに役立つことを願っています。
JavaScript と ajax を使用する必要があります。
個人的には、jeditable jquery プラグインを使用しています。ENTER で更新するように設定するか、ボタンのクリックが必要になるように設定できます。入力は、テキスト ボックスまたはドロップダウンなどにすることができます。非常にクールです。
http://www.appelsiini.net/projects/jeditable
例:
http://www.appelsiini.net/projects/jeditable/default.html
今すぐ作業を開始し、コードに関する質問をスタック オーバーフローに投稿することをお勧めします。あなたの現在の質問は実際にはコードの質問ではなく、反対票を投じられます。