时间戳

首页 > 解决方案 > 如何显示在动态创建的输入中输入的多个值？

javascript - 如何显示在动态创建的输入中输入的多个值？

问题描述

我正在调用这个方法 addpoc() 它创建一个输入框块和一个下拉列表。在选择下拉选项个人/工作邮件时，会出现一个输入框。

2）当我将多个输入添加到不同的输入块然后尝试在屏幕上显示时，它只需要多次输入第一个输入。请让我知道我哪里出错了。编辑：我在stackoverflow上尝试了其他解决方案，似乎不适用于我的用例

//code to delete the input block
$('body').on('click', '.delbtn', function(e) {
  $(this).closest(".contactIp").remove();
});
//function to add the input block
function addpoc() {
  let el = '';
  el += '<div class="contactIp"><div><div class="name"><label for="fname">First name:</label><br><input type="text" class="fname" name="fname" placeholder="Ricky"></div><div class="name"><label for="lname">Last name:</label><br><input type="text" class="lname" name="lname" placeholder="Ju"></div></div><div class="parent" style="width: 100%;"><div id="one"><select id="contact method" onchange="showMail(this)"><option disabled selected>Prefered contact method</option><option value="workmail">Work email </option><option value="personalmail">Personal Email</option></select></div><div class="two" id="two" style="display: none;"><input type="email" name="workemail" placeholder="Work email"></div><div class="three" id="three" style="display: none;"><input type="email" name="personalemail" placeholder="Personal email"></div></div><br><br> <div><button class="delbtn"><span class="inbtn">&times</span>Delete</button></div></div>'

  $('.addelement').append(el);
}

function showMail(selecteop) {
  var first = $(".fname").val();
  var second = $(".lname").val();
  var workemail1 = $(".workemail").val();
  var personalemail1 = $(".personalemail").val();
  document.getElementById("contact").innerHTML += '<br>' + first + " " + second;
  if (selecteop.value == "workmail") {
    document.getElementById("contact_mail").innerText = workemail1;
    $(selecteop).closest(".parent").find(".two").show();
    $(selecteop).closest(".parent").find(".three").hide();

  } else {
    $(selecteop).closest(".parent").find(".three").show();
    $(selecteop).closest(".parent").find(".two").hide();
    document.getElementById("contact_mail").innerHTML = personalemail1;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1>Where can we reach YOU?</h1>
  <div class="addelement">
    <div class="contactIp">
      <div>
        <div class="name"><label for="fname">First name:</label><br><input type="text" class="fname" name="fname" placeholder="Ricky"></div>
        <div class="name"><label for="lname">Last name:</label><br><input type="text" class="lname" name="lname" placeholder="Ju"></div>
      </div>
      <div class="parent" style="width: 100%;">
        <div id="one">
          <select id="contact method" onchange="showMail(this)">
            <option disabled selected>Prefered contact method</option>
            <option value="workmail">Work email </option>
            <option value="personalmail">Personal Email</option>
          </select>
        </div>
        <div class="two" id="two" style="display: none;">
          <input class="workemail" type="email" name="workemail" placeholder="Work email">
        </div>
        <div class="three" id="three" style="display: none;">
          <input class="personalemail" type="email" name="personalemail" placeholder="Personal email">
        </div>
      </div>
    </div>
  </div>


  <div style="width:100%">
    <button style="width:100%" id="addbtn" onclick="addpoc()">Add another point of contact</button>
  </div>

</div>
<p id="contact"></p>
<p id="contact_mail"></p>
</div>

标签： javascripthtmljquery

解决方案

因此，您的 deleteInp 函数会删除页面上的第一项。这可能不是你想要的。我建议将调用更改为作为参数传递this（值将是被单击的按钮），然后使用该参数查找最近的contactIp：

<button onclick="deleteInp(this)">

function deleteInp(theButton) {
  $(theButton).closest(".contactIp").remove();
}

再次使用您的 showMail 功能，您将拉出出现在页面上的第一个“名字”，而不是与单击的按钮对应的那个。你已经通过了this。所以做类似的事情

var first = $(selecteop).closest(".fname").val();

推荐阅读