0
名前付きタブのそれぞれに共通のdivに定義された共通の入力セットがあるhtmlタブフォームを作成しようとしています。送信がヒットしたら、すべてのタブからのすべての入力が返されるようにしたいと思います。チェックされていないチェックボックスが見つからない場合は問題ありません。共通のdivでタブ付きhtmlフォームを作成する方法
各入力には、タブ名に基づいて一意のIDが必要です。私はいくつかの方法を試しましたが、私はそれを正しいものにすることはできません。
単純なコード例は素晴らしいでしょう。 jqueryを使用し、ajaxは問題ありません。
歓声。
編集： 入力は、タブ内容のdiv内の正しいdivにコピー/追加されます。入力の名前とIDをタブ名と組み合わせて変更したい。宛先div内の子は未定義なので、入力の名前を変更することはできません。
<script>
// More hackery, list the tab divs
var tabs = ["tab1","tab2"];
var currenttab = '';
function showTab(tab){
// Make sure all the tabs are hidden
for(i=0; i < tabs.length; i++){
var obj = document.getElementById(tabs[i]);
obj.style.display = "none";
}
// show the 'one' tab we're interested in
obj.style.display = "block";
}
function aciOnload() {
// Get the tab we're interested in
var objs =[];
for(var i = 0; i < tabs.length; i++){
var obj= document.getElementById(tabs[i]);
// Find the correct div
var cldrn = obj.childNodes;
for(var m = 0; m < cldrn.length; m++)
{
if(cldrn.item(m).id == "common")
{
// Copy the common content over to the tab
var child = cldrn.item(m);
child.innerHTML ='';
child.innerHTML += document.getElementById("common_stuff").innerHTML;
eval(child);
var inputs = child.childNodes;
// Change the input names
// ***NOTE: there a 3 childNodes which are "undefined"***
for (var n = 0; n< inputs.length; n++){
if (inputs.item(n).tag == 'input'){
inputs.item(n).id= tabs[i] +'_' + inputs.item(n).id;
inputs.item(n).name= tabs[i] +'_' + inputs.item(n).name;
}
}
break;
}
}
}
}
// run our loader
// if(typeof aciOnload=='function')aciOnload();
</script>
</head>
<body onload='aciOnload()'>
<h1>Tabbed Form</h1>
<hr/>
<div class="tabs">
<a class="tab" onclick="showTab('tab1')">Tab One</a>
<a class="tab" onclick="showTab('tab2')">Tab Two</a>
</div>
<form name="myForm" action="#" >
<!-- note that for the first tab we need to
manually set the display to visible -->
<div id="tab1" class="tabContent" style="display:block">
<div id="common" >
</div>
</div>
<div id="tab2" class="tabContent">
<div id="common" >
</div>
</div>
<input type="submit" action="http://example.com/" method="post">
</form>
<div id="common_stuff" class="common_stuff" >
<table>
<tr>
<td>Field One: </td>
<td><input type="text" name="fieldOne" id="exfieldOne" value=""/></td>
</tr>
<tr>
<td>Field Two: </td>
<td><input type="text" name="fieldTwo" id="exfieldTwo" value=""/></td>
</tr>
<tr>
<td>Field Three: </td>
<td><input type="text" name="fieldThree" id="exfieldThree" value=""/></td>
</tr>
</table>
</div>
<hr>
</body>
EDIT2：ここ は、作業コードです：
<script>
// this is a bit of a hack here
// just list the tab content divs here
var tabs = ["tab1","tab2"];
var currenttab = '';
function showTab(tab){
// Make sure all the tabs are hidden
for(i=0; i < tabs.length; i++){
var obj = document.getElementById(tabs[i]);
if (tabs[i] == tab){
var currenttab = obj;
}
obj.style.display = "none";
}
// show the tab we're interested in
currenttab.style.display = "block";
}
function aciOnload() {
// Get the tab we're interested in
for(var i = 0; i < tabs.length; i++){
var obj= document.getElementById(tabs[i]);
// Find the correct div
var cldrn = obj.childNodes;
for(var m = 0; m < cldrn.length; m++)
{
if(cldrn[m].id == "common")
{
// Copy the common content over to the tab
var child = cldrn[m];
var cc = document.getElementById("common_stuff");
var ccc = cc.childNodes;
// collect and clone tables
for (var n = 0; n< ccc.length; n++){
if (ccc[n].tagName == "TABLE"){
var tbl = ccc[n].cloneNode(true);
child.appendChild(tbl);
for (r=0;r<tbl.rows.length;r++){
var row = tbl.rows[r];
for (c=0; c< row.cells.length;c++){
var cell = row.cells[c];
var inputs = cell.childNodes;
for (s=0;s< inputs.length; s++){
if(inputs[s].tagName == "INPUT"){
inputs[s].id= tabs[i] +'_' + inputs[s].id;
inputs[s].name= tabs[i] +'_' + inputs[s].name;
}
}
}
}
}
}
break;
}
}
}
}
// run our loader
// if(typeof aciOnload=='function')aciOnload();
</script>
</head>
<body onload='aciOnload()'>
<h1>Tabbed Form</h1>
<hr/>
<div class="tabs">
<a class="tab" onclick="showTab('tab1')">Tab One</a>
<a class="tab" onclick="showTab('tab2')">Tab Two</a>
</div>
<form name="myForm" action="#" >
<!-- note that for the first tab we need to
manually set the display to visible -->
<div id="tab1" class="tabContent" style="display:block">
<div id="common" >
</div>
</div>
<div id="tab2" class="tabContent">
<div id="common" >
</div>
</div>
<input type="submit" action="http://example.com/" method="post">
</form>
<div id="common_stuff" class="common_stuff" >
<table>
<tr>
<td>Field One: </td>
<td><input type="text" name="fieldOne" id="exfieldOne" value=""/></td>
</tr>
<tr>
<td>Field Two: </td>
<td><input type="text" name="fieldTwo" id="exfieldTwo" value=""/></td>
</tr>
<tr>
<td>Field Three: </td>
<td><input type="text" name="fieldThree" id="exfieldThree" value=""/></td>
</tr>
</table>
</div>
<hr>
</body>
</html>
現在の構造、または少なくとも2つのタブを備えたカットダウンバージョンを表示できますか？ 「それぞれの名前付きタブに共通のdivで定義された共通の入力がある」と言うと、複数のタブに同じフィールドにマッピングされているフィールドがありますか？これは、すべてのタブからすべてのフィールドを送信する要件に適合していないようです。 – nnnnnn
div内に何があるかは、隠されているかどうかにかかわらず関係ありません。重要なのはのチェックボックス、テキスト、隠しなどの要素です.btwはjquery UIのタブを探しているようですね？ http://jqueryui.com/demos/tabs – robert
タブをフォームにラップした場合、フォーム上のすべての入力を受け取っただけではありませんか？ http://stackoverflow.com/questions/169506/obtain-form-input-fields-using-jquery –