问题描述
在一个表单中，有多个div面板
<form>
<div class="panel1">
<input type="text" value="" name="bank0" id="bank0">
<input type="text" value="" name="shank0" id="shank0">
<input type="text" value="" name="dhank0" id="dhank0">
<input type="text" value="" name="raank0" id="raank0">
</div>
<hr>
<div class="panel2">
<input type="text" value="" name="bank1" id="bank1">
<input type="text" value="" name="shank1" id="shank1">
<input type="text" value="" name="dhank1" id="dhank1">
<input type="text" value="" name="raank1" id="raank1">
</div>
</form>
要求 ：如果用户将panel1留空，并在panel 2中输入了文本； 那么我们想将所有值从面板2移到面板1； 在最终提交表格时。
在实际用例中，我们有10个这样的面板。 小提琴： :
1楼
尝试这个。
var inputsValue = []; $("button").click(function () { $(".panel2 input").each(function () { inputsValue.push(this.value); }); $(".panel1 input").each(function (i, value) { $(this).val(inputsValue[i]); }); inputsValue = []; });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="panel1"> <input type="text" value="" name="bank0" id="bank0"> <input type="text" value="" name="shank0" id="shank0"> <input type="text" value="" name="dhank0" id="dhank0"> <input type="text" value="" name="raank0" id="raank0"> </div> <hr> <div class="panel2"> <input type="text" value="" name="bank1" id="bank1"> <input type="text" value="" name="shank1" id="shank1"> <input type="text" value="" name="dhank1" id="dhank1"> <input type="text" value="" name="raank1" id="raank1"> </div> <hr> <button>Submit</button>
2楼
如果第一个面板留为空白（我从需求中读取的内容），这只会将数据从面板2移动到面板1。
此外，它还会擦除面板2的数据，以防止发布重复的表单数据。 从您的问题来看，我认为这是您的目标？
这是如何在jQuery中实现此功能的方法：
$("button").click(function(){ var moveData = true, formvalues = []; $(".panel1 input").each(function(e, field){ if( field.value != '' ){ moveData = false; return false; } }); // only move data if first panel is blank if( moveData ){ $(".panel2 input").each(function(){ formvalues.push( this.value ); this.value = ''; }); $(".panel1 input").each(function (i) { this.value = formvalues[i]; }); } });
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <div class="panel1"> <input type="text" value="" name="bank0" id="bank0"> <input type="text" value="" name="shank0" id="shank0"> <input type="text" value="" name="dhank0" id="dhank0"> <input type="text" value="" name="raank0" id="raank0"> </div> <hr> <div class="panel2"> <input type="text" value="" name="bank1" id="bank1"> <input type="text" value="" name="shank1" id="shank1"> <input type="text" value="" name="dhank1" id="dhank1"> <input type="text" value="" name="raank1" id="raank1"> </div> <hr> <button>Submit</button>
我还使用香草JS编写了该解决方案，以供您参考（可能有用），因为纯JS的性能更高。
var submitBtn = document.getElementsByTagName("button")[0]; submitBtn.addEventListener("click", function(){ var moveData = true, formvalues = [], panel1 = document.getElementsByClassName("panel1"), panel1Fields = panel1[0].getElementsByTagName("input"), panel2 = document.getElementsByClassName("panel2"), panel2Fields = panel2[0].getElementsByTagName("input"); for(var i=0; i < panel1Fields.length; i++){ if( panel1Fields[i].value != '' ){ moveData = false; return false; } } // only move data if first panel is blank if( moveData ){ for(var i=0; i < panel2Fields.length; i++){ formvalues.push( panel2Fields[i].value ); panel2Fields[i].value = ''; } for(var i=0; i < panel1Fields.length; i++){ panel1Fields[i].value = formvalues[i]; } } });
<div class="panel1"> <input type="text" value="" name="bank0" id="bank0"> <input type="text" value="" name="shank0" id="shank0"> <input type="text" value="" name="dhank0" id="dhank0"> <input type="text" value="" name="raank0" id="raank0"> </div> <div class="panel2"> <input type="text" value="" name="bank1" id="bank1"> <input type="text" value="" name="shank1" id="shank1"> <input type="text" value="" name="dhank1" id="dhank1"> <input type="text" value="" name="raank1" id="raank1"> </div> <button>Send</button>