javascript - 在 2 个表单之间动态传递输入数据

Question

我有 2 个表单想要将用户输入从新表单发送到旧表单。我试图找到最有活力的方式来实现这一目标。

我尝试了 for 循环和 Jquery 每个函数，但感到困惑

<form class="new-form">
    <input type="text" placeholder="Name" name="new-name" class="new-name">
    <input type="tel" placeholder="phone" class="new-phone" name="new-phone">
    <input type="email" placeholder="email" class="new-email" name="new-email">
</form>

<form class="old-form hidden">
    <input type="text" placeholder="Name" name="name" class="name">
    <input type="tel" placeholder="phone" class="phone" name="phone">
    <input type="email" placeholder="email" class="email" name="email">
</form>

标签： javascriptjquery

Answer 1

你可以这样做：

$('.new-form input').keyup(function() {
  var p = $(this).attr("placeholder");
  var v = $(this).val();

  $('.old-form input[placeholder=' + p + ']').val(v)
});

假设占位符相同，它使用占位符来标识旧表单中的相同元素，然后将值复制到.keyup()事件上

演示

$('.new-form input').keyup(function() {
  var p = $(this).attr("placeholder");
  var v = $(this).val();

  $('.old-form input[placeholder=' + p + ']').val(v)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="new-form">
  <input type="text" placeholder="Name" name="new-name" class="new-name">
  <input type="tel" placeholder="phone" class="new-phone" name="new-phone">
  <input type="email" placeholder="email" class="new-email" name="new-email">
</form>

<form class="old-form hidden">
  <input type="text" placeholder="Name" name="name" class="name">
  <input type="tel" placeholder="phone" class="phone" name="phone">
  <input type="email" placeholder="email" class="email" name="email">
</form>