Question

我正在尝试填写表格并从中生成电子邮件，但规模很大。 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;
}

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

Answer 1

发生的事情是因为您在<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>

Answer 2

首先，如R10t所述，您需要将按钮移出表单，以避免重定向。

第二，如果打开浏览器控制台，则单击“生成”后将看到以下错误：

Uncaught ReferenceError: generateEmail is not defined

这与jsFiddle的设置有关：在JavaScript部分中，单击 JavaScript + No-Library（纯JS），然后将 LOAD TYPE （加载类型）更改为{{ 1}}

第三，您需要在No wrap - bottom of <head>和none周围加上引号：

block

正在工作的jsFiddle：https://jsfiddle.net/ajdc8ypf/3/

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

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';
}

.paragraph{
  display: none;
}

UPD：：如果要对多个表单使用一个JS函数，则可以传递表单编号/ id作为参数，然后根据该表单查询所需的表单。看一下这个例子：

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

function generateEmail(formNumber) {
  //generated email variable
  var email = document.querySelector('#paragraph' + formNumber);
  
  //input
  var merchantName = document.querySelector('#form' + formNumber + ' .mName');
  var merchantId = document.querySelector('#form' + formNumber + ' .mId');
  var merchantEmail = document.querySelector('#form' + formNumber + ' .mEmail');
  
  //output
  var paragraphName = document.querySelector('#paragraph' + formNumber + ' .merchantN');
  var paragraphId = document.querySelector('#paragraph' + formNumber + ' .merchantID');
  var paragraphEmail = document.querySelector('#paragraph' + formNumber + ' .merchantE');
  
  //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';
}

.paragraph{
  display: none;
}

将值从文本字段转换为段落

2 个答案:

表格外的按钮：

阻止表单提交：