web-dev-qa-db-ja.com

ボタンクリックでフォームフィールドを動的に追加する

ボタンクリックでフォームセクションが作成されるのを楽しみにしています。 +ボタンをクリックしたときに何度でも新しい売り手エージェント情報セクションを追加したいとします。売り手エージェント情報セクションは基本的なテキスト、ドロップダウンなどを含むべきです.

このようにして新しく作成されたエントリはデータベースに格納されます。私はまた、後でエントリをCSVとしてエクスポートする必要があります。

私はプラットフォームとしてWordPressを使っていますが、他のPHP/AJAXソリューションでこの機能を追加しても構いません。

私は完璧な一致を見つけることができない、Formidableフォームはこれに近いですが、ボタンをクリックして追加を追加すると別ページに移動します。他のプラグインはこれを行う可能性を提供していません。

あなたが私が何かを逃した場合に備えて私がこれを実行するのを助けるためにあなたはどんな無料または有料のサードパーティ製フォームビルダー、ワードプレスのためのプラグインまたはサンプルコードを提案することができます。

私は、コーディングされるフォームのスクリーンショットを共有しました。

Dynamic form example

pluginsforms
1
kushalvm

新しいDOM要素を作成することにより、Javascriptを使用してこれを行うことができます。

これを使用できます W3Schools から自分で機能を試してください

このコードをコピーして自分で試してみて、どのように機能するかを確認してください。新しい段落が追加されるだけです。

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
<p><input type="button" value="Add Paragraph" onclick="addPara();"></p>
</div>

<script>
function addPara()
{
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
}
</script>

</body>
</html>

ここで、 SOのこの投稿を見て、フォームを追加する方法を確認してください。

申し訳ありませんが、データベースの一部を見逃していました。データ処理とデータベースへの保存を処理するphpページを作成する必要があります。繰り返しますが、私はW3schoolsを使用して、自分で機能を試してみます（ただし、一般に、そのWebサイトはより深刻でプロフェッショナルなプログラミング情報を信頼できません）。ここで php.

それはそれを行う1つの方法で、ページを更新します。私のお気に入りの方法は、Javascriptを使用してデータを収集し、AJAX呼び出しを使用してphpページに送信することです。 これは、phpを使用したajaxへのリンクです。

これは WP のデータベーステーブルの操作に関するガイドです。データ操作を処理するphpページでこれらの関数を使用するだけでよいと思います。

2
Marina Dunst