CODEWITHSUNDEEP
javascripthtml
Goran Sovilj
Goran Sovilj

Reputation: 77

Convert value from text field to paragraph

I'm trying to fill forms and generate an email from that, but on big scale. HTML code is bellow and located on 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;
}

The page, when i do that locally, only refreshes.

Upvotes: 2

Views: 300

Answers (2)

Kirill Simonov
Kirill Simonov

Reputation: 8491

First of all, as mentioned by R10t, you need to move the button out of the form to avoid redirecting.

Second, if you open the browser console, you will see the following error once you click Generate:

Uncaught ReferenceError: generateEmail is not defined

This is related to the setup of your jsFiddle: in the JavaScript section click on JavaScript + No-Library (pure JS) and change the LOAD TYPE to No wrap - bottom of <head>

Third, you need quotes around none and block:

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

Working jsFiddle: https://jsfiddle.net/ajdc8ypf/3/

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

UPD: If you want to use one JS function for many forms, you could pass the form number / id as a parameter and then query the form you need based on it. Take a look at this example:

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;
}
FORM 1:
<br>
<form class="form" id="form1">
  <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(1)">
  Generate
</button>
<p id="paragraph1">
  Merchant nname is <span class="merchantN"></span>, merchant ID is <span class="merchantID"></span> and his email is <span class="merchantE"></span>.
</p>
<br>
FORM 2:
<br>
<form class="form" id="form2">
  <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(2)">
  Generate
</button>
<p id="paragraph2">
  Merchant nname is <span class="merchantN"></span>, merchant ID is <span class="merchantID"></span> and his email is <span class="merchantE"></span>.
</p>

Upvotes: 2

R10t--
R10t--

Reputation: 829

What is happening is because you have a <button> inside of a <form> element, when you click the button, the form is performing its submit action and this causes the page to refresh. What you will need to do is to prevent your form from being submitted or place your button outside of the form.

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

Prevent form submit:

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

Upvotes: 2

Related Questions