How can I use "First Name" entered by user and use it as personalisation in a multi-step form questions? - Html

Frankie
April 23, 2023
159 views
1 vote
2 Answers

This is a simple HTML structure of a multi-step form. I want to use the first name of user as personalisation in form section .

For say if someone enters their name as "Jack" and then clicks on next button…. then in the next section the  will read as "Jack, What’s your age?" and then the final section’s  will be "Are you good Jack?"

<form action="">
  <div class="section1">
    <input type="text" placeholder="First Name">
    <button class="next-btn">Next</button>
  </div>
  <br>
  <div class="section2">
    <p>[First Name], What's your age?</p>
    <input type="number" class="age" placeholder="Your Age">
    <button class="next-btn">Next</button>
  </div>
  <br>
  <div class="section3">
    <p>Are you doing good [First Name]?</p>
    <input type="text" class="good" placeholder="Yes or No ?">
    <button class="submit">submit</button>
  </div>
</form>

I am new to JS. So am not able to understand how to do this. Looking forward to some assistance, please.

Answers

I would do it like this, i hope it helps you!

    var name;

    function triggerSection2() {
        document.getElementById("section1").style.display = "none"; //make the first section invisible

        name = document.getElementById("NameInput").value; //save the Name to an public variable
        document.getElementById("section2Text").innerHTML = name + ", What's your age?"; //change the innerHTML (text) of the "p" tag at the second section

        document.getElementById("section2").style.display = "block"; //make the second section visible
    }

    function triggerSection3() {
        document.getElementById("section2").style.display = "none"; //make the second section invisible

        document.getElementById("section3Text").innerHTML = "Are you doing good " + name + "?"; //change the text of the "p" tag at the third section

        document.getElementById("section3").style.display = "block"; //make the third section visible
    }

<form action="">
    <div class="section1" id="section1"> <!--need an id to call the element in js-->
        <input type="text" id="NameInput" placeholder="First Name"> <!--need an id to call the element in js-->
        <button class="next-btn" type="button" onclick="triggerSection2()">Next</button> <!--clearify the type="button" so the page don't reload on press and call an js function on click-->
    </div>
    <br>
    <div style="display: none" class="section2" id="section2"> <!--need an id to call the element in js-->
        <p id="section2Text"></p> <!--need an id to call the element in js, Text will be added by js-->
        <input type="number" class="age" placeholder="Your Age">
        <button class="next-btn" type="button" onclick="triggerSection3()">Next</button> <!--clearify the type="button" so the page don't reload on press and call an js function on click-->
    </div>
    <br>
    <div style="display: none" id="section3" class="section3"> <!--need an id to call the element in js-->
        <p id="section3Text"></p> <!--need an id to call the element in js, text will be added by js-->
        <input type="text" class="good" placeholder="Yes or No ?" >
        <input type="submit">
    </div>
</form>

To use the first name in later stages of the form, create empty s whose .textContent can be edited with JS.

Then, to get multistage functionality, you can create a CSS utility class hidden to hide everything except the first stage. Then, you can add event handlers for each of the "Next" buttons that will stop the default event (which is submitting the form), and optionally do some stuff (like setting some ‘s .textContent with the value of an input), then toggle off the hidden class on the next section to show it. Like this:

document.querySelector('#next1').addEventListener('click', e => {
  e.preventDefault();
  const firstName = document.getElementById('firstName').value;
  document.querySelectorAll('.firstName').forEach(el => el.textContent = firstName);
  document.querySelector('#section1').classList.toggle('hidden');
  document.querySelector('#section2').classList.toggle('hidden');
});

document.querySelector('#next2').addEventListener('click', e => {
  e.preventDefault();
  document.querySelector('#section2').classList.toggle('hidden');
  document.querySelector('#section3').classList.toggle('hidden');
});

.hidden {
  display: none;
}

<form id="form1" action="">
  <div id="section1">
    <input type="text" id="firstName" placeholder="First Name">
    <button id="next1">Next</button>
  </div>
  <br>
  <div id="section2" class="hidden">
    <p><span class="firstName"></span>, What's your age?</p>
    <input type="number" class="age" placeholder="Your Age">
    <button id="next2">Next</button>
  </div>
  <br>
  <div id="section3" class="hidden">
    <p>Are you doing good <span class="firstName"></span>?</p>
    <input type="text" class="good" placeholder="Yes or No ?">
    <button class="submit">submit</button>
  </div>
</form>

Please signup or login to give your own answer.

Click here to cancel reply.

How can I use "First Name" entered by user and use it as personalisation in a multi-step form questions? – Html

Answers