时间戳

首页 > 解决方案 > 将文本字段中的值转换为段落

javascript - 将文本字段中的值转换为段落

问题描述

我正在尝试填写表格并从中生成一封电子邮件，但规模很大。HTML 代码如下，位于https://jsfiddle.net/csq7kwmb/4/：

<form class="form">
    <label>Merchant name <input type="text" class="mName" value=""></label><br>
    <label>Merchant ID number <input type="text" class="mId" value=""></label><br>
    <label>Merchant email <input type="text" class="mEmail" value=""></label><br>
    <button onclick="generateEmail()">
      Generate
    </button>
</form>
<p class="paragraph">
    Merchant name is <span class="merchantN"></span>, merchant ID is <span class="merchantID"></span> and his email is <span class="merchantE"></span>.
</p>

function generateEmail() {
  //generated email variable
  var email = document.querySelector('.paragraph');

  //input
  var merchantName = document.querySelector('.mName');
  var merchantId = document.querySelector('.mId');
  var merchantEmail = document.querySelector('.mEmail');

  //output
  var paragraphName = document.querySelector('.merchantN');
  var paragraphId = document.querySelector('.merchantID');
  var paragraphEmail = document.querySelector('.merchantE');
  //var paragraph = document.getElementById('field2');

  //properly filled email
  paragraphName.textContent = merchantName.value;
  paragraphId.textContent = merchantId.value;
  paragraphEmail.textContent = merchantEmail.value;

  //displaying email, giding text fields
  merchantName.style.display = none;
  merchantId.style.display = none;
  merchantEmail.style.display = none;
  email.style.display = block;
}

当我在本地执行此操作时，该页面只会刷新。

标签： javascripthtml

解决方案

发生的事情是因为您有<button>一个元素内部<form>，当您单击按钮时，表单正在执行其提交操作，这会导致页面刷新。您需要做的是防止您的表单被提交或将您的按钮放在表单之外。

按钮外部形式：

<form class="form">
  <label>Merchant name <input type="text" class="mName"></label><br>
  <label>Merchant ID number <input type="text" class="mId"></label><br>
  <label>Merchant email <input type="text" class="mEmail"></label><br>
</form>
    <button onclick="generateEmail()">
  Generate
  </button>
<p class="paragraph">
  Merchant nname is <span class="merchantN"></span>, merchant ID is <span class="merchantID"></span> and his email is <span class="merchantE"></span>.
</p>

防止表单提交：

<form class="form" onsubmit="return false;">
  <label>Merchant name <input type="text" class="mName"></label><br>
  <label>Merchant ID number <input type="text" class="mId"></label><br>
  <label>Merchant email <input type="text" class="mEmail"></label><br>
    <button onclick="generateEmail()">
  Generate
  </button>
</form>
<p class="paragraph">
  Merchant nname is <span class="merchantN"></span>, merchant ID is <span class="merchantID"></span> and his email is <span class="merchantE"></span>.
</p>

推荐阅读