Use JavaScript (or jQuery) to add event listeners to each input field. Any time any field changes value, the change is reflected in whatever HTML is used to generate the example. This HTML would be appropriately styled with CSS to accurately reflect the real product.
Some JavaScript references of methods and properties you’d likely use:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
This is the code that i am trying to apply :
Text Box Id First name : fname
Text Box Id Last Name : lname
Text Box Id Company Name : cname
The text that need to be changed once text in area box inputed : cardtext
button to call action : btncard
<script>
let text = ''
const cardText = document.querySelector('#cardtext')
const fname = document.querySelector('#fname')
const lname = document.querySelector('#lname')
const cname = document.querySelector('#cname')
const previewBtn = document.querySelector('#btncard')
previewBtn.addEventListener('click', () =>{
text = <code>${fname.value} ${lname.value} ${cname.value}</code>
cardText.value = text
})
</script>
Your test page is good start, but there are no cardText or previewBtn fields visible? Also, the form fields have no enclosing <form> tags, so submitting an order will not go anywhere.
WP jQuery runs in noConflict mode, so the common $ shortcut will not work. Either use the full jQuery or implement a noConflict wrapper that assigns a shortcut token.
There are extraneous <p> tags in your script on the page’s actual HTML source. You’ve apparently placed your script in page content? That’s not a good idea. The WP editor will corrupt script. Script blocks should be output via PHP code using appropriate action hooks like “wp_head” or “wp_footer”. Or put your code in an external .js file and enqueue it with wp_enqueue_script(). Another option is to create a custom shortcode or block that will output your script in page content without the editor corrupting it.
I wondered how the card text would be altered so it matches the perspective of the background image (later on, once the basics are working). I’m not up on the latest CSS tricks, but I just learned that there are a number of transformation properties that will easily accomplish this. Perhaps you already knew, but I didn’t.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective()#examples
It may not be a good idea, but I wonder if the cardText field could overlay the card image and be transformed to match perspective, so users can type in their content right on the card and get a good approximation of appearance?
. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
