Скопировать значение текстового поля в другое текстовое поле внутри динамической таблицы

Question

У меня есть текстовое поле, в котором пользователи вводят имя владельца, и я хочу скопировать его автоматически или по нажатию кнопки на текстовом поле внутри моей динамической таблицы.Как я могу сделать это с помощью JavaScript?Мне нужно, чтобы точная копия введенного значения в первом текстовом поле была значением текстового поля внутри динамической таблицы.Пожалуйста, помогите

window.onload = function() {
  var ModelArray = {
    "Mammals": {
      "Dog": {
        "Dog Food": ["Milk"]
      },
      "Cat": {
        "Cat food": ["Milk"]
      },
      "Tiger": {
        "Meat": ["Water"]
      },
      "Monkey": {
        "Banana": ["Water"]
      }
    },
    "Reptiles": {
      "Snake": {
        "Rat": ["None"]
      },
      "Turtle": {
        "Plant": ["Water"]
      },
      "Lizard": {
        "Insects": ["None"]
      },
      "Crocodile": {
        "Meat": ["Water"]
      }
    }
  }


  //Get html elements
  var model = document.getElementById("MODEL");
  var destination = document.getElementById("destination");
  var criteria = document.getElementById("criteria");
  var material_form = document.getElementById("material_form");

  //load models
  for (var model_value in ModelArray) {
    model.options[model.options.length] = new Option(model_value, model_value);
  }

  //model changed -> destination value
  model.onchange = function() {

    destination.length = 1;
    criteria.length = 1;
    material_form.length = 1;

    if (this.selectedIndex < 1) {
      criteria.options[0].text = ""
      return;
    }
    destination.options[0].text = "Select Animal..."
    for (var destination_value in ModelArray[this.value]) {
      destination.options[destination.options.length] = new Option(destination_value, destination_value);
    }
    if (destination.options.length == 2) {
      destination.selectedIndex = 1;
      destination.onchange();
    }
  }

  //destination changed -> criteria value
  model.onchange();
  destination.onchange = function() {

    criteria.length = 1;
    material_form.length = 1;

    if (this.selectedIndex < 1) {
      criteria.options[0].text = ""
      return;
    }
    criteria.options[0].text = ""
    for (var criteria_value in ModelArray[model.value][this.value]) {
      criteria.options[criteria.options.length] = new Option(criteria_value, criteria_value);
    }
    if (criteria.options.length == 2) {
      criteria.selectedIndex = 1;
      criteria.onchange();
    }
  }

  //criteria changed -> material form value
  criteria.onchange = function() {
    material_form.length = 1;

    if (this.selectedIndex < 1) {
      material_form.options[0].text = ""
      return;
    }
    material_form.options[0].text = ""
    var material_form_value = ModelArray[model.value][destination.value][this.value];

    for (var i = 0; i < material_form_value.length; i++) {
      material_form.options[material_form.options.length] = new Option(material_form_value[i], material_form_value[i]);
    }
    if (material_form.options.length == 2) {
      material_form.selectedIndex = 1;
      // material_form.onchange();
    }
  }
}

function SaveData() {

  var DataList = [];
  var table = document.getElementById("bod");
  var rowLength = table.rows.length;

  //loops through rows    
  for (i = 0; i < rowLength; i++) {

    //gets cells of current row  
    var oCells = table.rows.item(i).cells;

    //gets amount of cells of current row
    //var cellLength = oCells.length-2;

    //loops through each cell in current row
    var item = {};
    item["destination"] = oCells.item(0).innerHTML;
    item["criteria"] = oCells.item(1).innerHTML;
    item["material"] = oCells.item(2).innerHTML;

    DataList.push(item)
  }

  var request = new XMLHttpRequest()
  request.open("POST", "DOM_SAVE.php", true)
  request.setRequestHeader("Content-type", "application/json")
  request.send(JSON.stringify(DataList));

  console.log(DataList);
}


function addRow() {
  var table = document.getElementById("bod");
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);


  row.insertCell(0).innerHTML = destination.value;
  row.insertCell(1).innerHTML = criteria.value;
  row.insertCell(2).innerHTML = material_form.value;
  row.insertCell(3).innerHTML = '<input type ="button" value="Delete" onClick="Javacsript:deleteRow(this)">';
  row.insertCell(4).innerHTML = '<input type ="text" name = "owner">';
}

function deleteRow(obj) {
  var index = obj.parentNode.parentNode.rowIndex;
  var table = document.getElementById("myTableData");
  table.deleteRow(index);
}

Owner: <input type="text" name="field10" id="field10" readonly="true" />
<td><b>MODEL: </b></td>
<td>
  <select id="MODEL" NAME="MODEL" size="1" required>
    <option value="" selected="selected">Select Model...</option>
  </select>
</td>
<b>DESTINATION: </b></td>
<tr>
  <td>
    <select ID="destination" NAME="destination[]" required>
      <option value="" selected="selected">Select Model First...</option>
    </select>
    <select ID="criteria" NAME="criteria[]" contenteditable="true" required>
    </select>
    <select ID="material_form" NAME="material_form[]" required>
    </select>
    <input type="button" id="add" value="Add Destination" onclick="Javascript:addRow()">
  </td>
</tr>
</center>
<div id="mydata" style="text-align: center">
  <center>
    <table id="myTableData" border="1" style="text-align:center;"><br>
      <thead>
        <tr>
          <td style="padding: 0 10px 0 10px"><b>DESTINATION</b></td>
          <td style="padding: 0 10px 0 10px"><b>CRITERIA</b></td>
          <td style="padding: 0 10px 0 10px"><b>MATERIAL FORM</b></td>
          <td style="padding: 0 10px 0 10px"><b>.............</b></td>
          <td style="padding: 0 10px 0 10px"><b>Owner Name</b></td>
        </tr>
  </center>
  </thead>
  <tbody id="bod">
  </tbody>
  </table>
</div><br>
<center>
  <input type="submit" name="submit" value="Submit">

Answer 1

Да, вы можете.Я знаю, что вопрос устарел, но надеюсь, что он поможет будущим поисковикам.

Используя javascript, вы можете скопировать значение из одного текстового поля в другое:

HTML:

<input type='text' onblur="sync()" id='from'/>
<input type='text' id='to'/>

Javascript

<script type="text/javascript">

function sync() {
src = document.getElementById("from");
dest = document.getElementById("to");
dest.value = src.value;

}
</script>