使用 javascript 将值从一个表单传递到另一个表单

Pass value from one form to another with javascript

本文关键字:表单 一个 另一个 javascript 使用      更新时间:2023-09-26

<body>
<form style=" float:left" name="left">
<div style=" border:1px solid red; width:150px; padding:10px 10px 10px 10px">
<table width="100" border="0" cellspacing="3">
  <tr>
    <td><input type="text" placeholder="Name" id="cc1"/><br /></td>
  </tr>
  <tr>
    <td><input type="text" placeholder="Surname" id="cc2" /><br /></td>
  </tr>
  <tr>
    <td><input type="text" placeholder="Last name" id="cc3"/><br /></td>
  </tr>
  <tr>
    <td><input type="text" placeholder="ID"  id="cc4"/><br /></td>
  </tr>
</table>
</div>
<div style="margin-left:70px;">
<input type="checkbox" name="c" id="c1" /><br />
<input type="checkbox" name="c" id="c2"/><br />
<input type="checkbox"  name="c" id="c3"/><br />
<input type="checkbox"  name="c" id="c4"/><br />
</div>
</form>
<form style="float:left" name="mid">
</div>
<div style="margin-top:60px;">
<input type="button" value="<" name="ml" onClick="form()" />
<input type="button" value=">" name="mr" onClick="form()" />
</div>
</form>
<form style=" float:left" name="right">
<div style=" border:1px solid red; width:150px; padding:10px 10px 10px 10px">
<table width="100" border="0" cellspacing="3">
  <tr>
    <td><input type="text" placeholder="Name" id="dd1"/><br /></td>
  </tr>
  <tr>
    <td><input type="text" placeholder="Surname" id="dd2" /><br /></td>
  </tr>
  <tr>
    <td><input type="text" placeholder="Last name" id="dd3" /><br /></td>
  </tr>
  <tr>
    <td><input type="text" placeholder="ID" id="dd4"/><br /></td>
  </tr>
</table>
</div>
<div style="margin-left:70px;">
<input type="checkbox"  id="d1" /><br />
<input type="checkbox"  id="d2"/><br />
<input type="checkbox"   id="d3"/><br />
<input type="checkbox"   id="d4"/><br />
</div>
</form>

因此,当选中确切的复选框时,我需要使用更大和更小的符号从右到左和从左到右传递值。示例:如果选中左侧的前两个复选框,并且您点击了更大的符号,则应将"姓名"和"姓氏"传递到右侧形式中。

这是你的工作 jsfiddle

注意:我已经将函数名称从form()更改为lefttoright()和righttoleft()

    var cc1 = document.getElementById("cc1");
var cc2 = document.getElementById("cc2");
var cc3 = document.getElementById("cc3");
var cc4 = document.getElementById("cc4");
var dd1 = document.getElementById("dd1");
var dd2 = document.getElementById("dd2");
var dd3 = document.getElementById("dd3");
var dd4 = document.getElementById("dd4");
function lefttoright(){
    var c1 = document.getElementById("c1").checked;
var c2 = document.getElementById("c2").checked;
var c3 = document.getElementById("c3").checked;
var c4 = document.getElementById("c4").checked;
    if(c1){dd1.value = cc1.value};
    if(c2){dd2.value = cc2.value};
    if(c3){dd3.value = cc3.value};
    if(c4){dd4.value = cc4.value};

};
function righttoleft(){
  var d1 = document.getElementById("d1").checked;
var d2 = document.getElementById("d2").checked;
var d3 = document.getElementById("d3").checked;
var d4 = document.getElementById("d4").checked;
    if(d1){cc1.value = dd1.value};
    if(d2){cc2.value = dd2.value};
    if(d3){cc3.value = dd3.value};
    if(d4){cc4.value = dd4.value};
};