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>

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>

Answer 2

您可以在键入时使用键盘设置值

$('.new-name').keyup(function(){
$('.name').val($(this).val())
})
$('.new-phone').keyup(function(){
$('.phone').val($(this).val())
})
$('.new-email').keyup(function(){
$('.email').val($(this).val())
})

<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>

Answer 3

<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" onkeyup="$('#name').val(this.value)">
	<input type="tel" placeholder="phone" class="new-phone" name="new-phone" onkeyup="$('#phone').val(this.value)">
	<input type="email" placeholder="email" class="new-email" name="new-email" onkeyup="$('#email').val(this.value)">
</form>

<form class="old-form hidden">
	<input type="text" placeholder="Name" name="name" class="name" id="name">
	<input type="tel" placeholder="phone" class="phone" name="phone" id="phone">
	<input type="email" placeholder="email" class="email" name="email" id="email">
</form>

在2种形式之间动态传递输入数据

3 个答案: