Allow Visitor to customize html content using input field

Question

Does anybody have suggestions for allowing a input field to update parts of a paragraph?

example, the visitor would type in their name, and it would customize the paragraph to use their name.

<input type="text"> 
<button>Submit</button>

<<Name>> went for a run, then <<Name>> took a nap.

Are you using any framework or you just want a plain script for only this? — vsync, Dec 05 '19 at 16:03
You need a programming language like { php , python , java etc. } — Wassim Al Ahmad, Dec 05 '19 at 16:09
Does this answer your question? [Find and replace specific text characters across a document with JS](https://stackoverflow.com/questions/18643766/find-and-replace-specific-text-characters-across-a-document-with-js) — Heretic Monkey, Dec 05 '19 at 16:10

Rounin · Answer 1 · 2019-12-05T16:16:24.853

I'm going to guess that you are new to the DOM (Document Object Model).

One approach would be:

include in your markup <spans> (identifiable by id or class or data-*) which will hold the submitted data
create a function which can populate the <spans>
invoke the function using an EventListener
attach the EventListener to the <button>

Then the <button>, when clicked, will trigger the EventListener which will invoke the function which will populate the <spans>.

Working Example:

// GET ELEMENTS FROM DOM
const nameInput = document.getElementsByName('nameInput')[0];
const submitButton = document.getElementsByClassName('submitButton')[0];
const nameSpans = document.querySelectorAll('[data-type="name"]');

// DECLARE FUNCTION
const populateNameSpans = () => {

  nameSpans.forEach((nameSpan) => {
  
    nameSpan.textContent = nameInput.value;

  });

}

// ATTACH EVENT LISTENER TO submitButton
submitButton.addEventListener('click', populateNameSpans, false);

<input name="nameInput" type="text" /> 
<button type="button" class="submitButton">Submit</button>

<p><span data-type="name"></span> went for a run, then <span data-type="name"></span> took a nap.</p>

So if I was working this into a wordpress site, I would use the above code in the functions.php file, and the html on the page? just wrap it in function brackets? function replaceName() { //code goes here } — jprly, Dec 05 '19 at 16:43
PHP is a server-side scripting language. The code above is javascript which is used most often as a client-side scripting language (ie. a scripting language which runs in the browser, rather than on a remote server). — Rounin, Dec 05 '19 at 19:36

score 0 · Answer 2 · answered Dec 05 '19 at 16:10

This simple demo here will place whatever is typed in the input inside the placeholder elements within the <p> paragraph (I've used here <mark> elements for the sake of the demo).

As you can see, the "trick" is to place HTML tags (DOM elements) at the places where you wish to "inject" text into, and then find those elements using querySelectorAll and iterate them and set their innerHTML when wanting to set their text content.

var elmsToReplace = document.querySelectorAll("p mark")

document.querySelector('input').addEventListener('input', updateText)

function updateText(){
  [...elmsToReplace].forEach(elm => elm.innerHTML = this.value)
}

<input> 
<p><mark></mark> went for a run, then <mark></mark> took a nap.</p>

Allow Visitor to customize html content using input field

2 Answers2