ボタンの横にボタンを追加すると、index.jspどのように表示されますか。ボタンを押すと、前と同じ（以下に表示）別の検索フォームが表示されますが、パラメータやフィールドが異なります。例：Add moreProcessageyear<!-- how will I change the cloned form instead of displaying Car reg: <input type="text" name="car" /> to show age: <input type="text" name="age" /> --> <!-- how will I change the cloned form instead of displaying <input type="button"
onClick="addMoreForm('age')" value="Add More" /> to show <input type="button"
onClick="delete('age')" value="delete" /> -->
</div>
質問する
4026 次
1 に答える
0
これで始められるかもしれません...
関数を呼び出すためのボタンまたはアンカー<a>リンク (好きな方) を作成できます。
<input type="button" onClick="addMoreForm('the parameters come here*')" value="Add More" />
parametersjavascriptを使用してフォームを作成するにはaddMoreForm、formName、fieldName、fieldType、formAction、formMethod などのメソッドを使用します。javascript で要素を作成するためのリンクを次に示します (要素です :-) ):<form>- http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/
- jQuery の場合: jQuery document.createElement と同等ですか?
- https://stackoverflow.com/a/327068/468763
- https://stackoverflow.com/a/867981/468763
また
- コピーするフォームの
formNameandを渡すことができます。これもいくつかのリンクです。formId - https://stackoverflow.com/a/921302/468763
- https://stackoverflow.com/a/710347/468763
純粋なjavacriptを使用したクローン作成の例です。作成するタグのようなコンテナを作成するためにクローン
form1を作成してform2います。addingMoreId<div>form2var form2 = document.getElementById("form1").cloneNode(true); form2.setAttribute("name", "form2"); form2.setAttribute("id", "form2"); document.getElementById("addingMoreId").appendChild(form2);
PS:ブラウザとの互換性のために、jQueryやYUIなどの JavaScript ライブラリを使用できます。
編集：これはサンプルコードです。このコードを大幅に改善し、より一般的にすることもできます。
<input type="button" onClick="addMoreForm('age')" value="Add More" />
<div id="addingMoreId">
<!-- This is empty, the form2 will be created here -->
<!-- So it is not required that the form be present here -->
</div>
<!-- This script tag goes into the <head> tag -->
<script>
// this function will create the form2 in the div
// you agree or not, you need to learn a lot more about Javascript :-)
function addMoreForm(fieldName) {
var form2 = document.getElementById("form1").cloneNode(true);
form2.setAttribute("name", "form2");
form2.setAttribute("id", "form2");
document.getElementById("addingMoreId").appendChild(form2);
form2.car.setAttribute("name", fieldName); // one way to access the element inside a form: "form2.car", where "car" is the name of the element created inside the form2
form2.elements[fieldName].setAttribute("id", fieldName); // another way to access the element inside a form: "form2.elements["car"]"
}
</script>
これが役立つことを願っています:-)
于 2012-08-07T13:24:39.307 に答える