Implement a commenting feature upon the button being clicked

Question

Implement a commenting feature upon the button being clicked

When a button is clicked, I want to insert some HTML code onto my page. Here's the code that I wish to add:

    <form action="#" id="Reactie_form">
        <input id="Form_voornaam" type="text" placeholder="Voornaam" style="width: 50%"> <br>
        <input id="Form_achternaam" type="text" placeholder="Achternaam" style="width: 50%"><br>
        <input id="Form_email" type="email" placeholder="E-mail" style="width: 50%">
        <textarea id="Form_bericht" style="width: 100%"></textarea>
        <input id="files" type="file" @change="fileSelected" multiple accept=".png, .jpg, .webp, jpeg, .gif">
        <input type="button" class="sendButt" value="Verstuur" @click="submitReactie">
    </form>
    <span v-if="!files || !files.length"></span>
    <ul v-else>
        <li v-for="files in files" :key="files.name">{{ files.name }}</li>
    </ul>

I appreciate your help.

javascript html css vue.js

Answer 1

Answer №1

It looks like you're utilizing VueJS, which simplifies tasks like this!

Here's how I would approach it:

In your data() method, include the following: isClicked: false

Enclose your code within a container, like so:

<div v-if='isClicked'>
    <form action="#" id="Reactie_form">
        <input id="Form_voornaam" type="text" placeholder="First Name" style="width: 50%"> <br>
        <input id="Form_achternaam" type="text" placeholder="Last Name" style="width: 50%"><br>
        <input id="Form_email" type="email" placeholder="Email" style="width: 50%">
        <textarea id="Form_bericht" style="width: 100%"></textarea>
        <input id="files" type="file" @change="fileSelected" multiple accept=".png, .jpg, .webp, jpeg, .gif">
        <input type="button" class="sendButt" value="Send" @click="submitResponse">
    </form>
    <span v-if="!files || !files.length"></span>
    <ul v-else>
        <li v-for="files in files" :key="files.name">{{ files.name }}</li>
    </ul>
</div>

Also, add the following to your button:

<button @click='isClicked = true'>

Answer 2

It looks like you're utilizing VueJS, which simplifies tasks like this!

Here's how I would approach it:

In your data() method, include the following: isClicked: false

Enclose your code within a container, like so:

<div v-if='isClicked'>
    <form action="#" id="Reactie_form">
        <input id="Form_voornaam" type="text" placeholder="First Name" style="width: 50%"> <br>
        <input id="Form_achternaam" type="text" placeholder="Last Name" style="width: 50%"><br>
        <input id="Form_email" type="email" placeholder="Email" style="width: 50%">
        <textarea id="Form_bericht" style="width: 100%"></textarea>
        <input id="files" type="file" @change="fileSelected" multiple accept=".png, .jpg, .webp, jpeg, .gif">
        <input type="button" class="sendButt" value="Send" @click="submitResponse">
    </form>
    <span v-if="!files || !files.length"></span>
    <ul v-else>
        <li v-for="files in files" :key="files.name">{{ files.name }}</li>
    </ul>
</div>

Also, add the following to your button:

<button @click='isClicked = true'>

Answer 3

Answer №2

Enclose your code within a wrapper div and apply a hidden class to it. This will allow you to capture the click event and dynamically change the CSS using JavaScript.

Answer 4

Enclose your code within a wrapper div and apply a hidden class to it. This will allow you to capture the click event and dynamically change the CSS using JavaScript.

Implement a commenting feature upon the button being clicked

Answer №1

Answer №2

Similar questions

Delay a macro task in the user interface event listener

How can I create a top right profile button similar to Google using AngularJS?

Adjust the margins of an image within a text box

Steps for activating all iframes on an HTML page

Receiving a NoSessionIdError issue when using Webdriver.io

PHP Random Background Image Selector

The Enigmatic Essence of TypeScript

How can the outer function be connected to the resolve method of $routeProvider?

Are There Other Ways to Replicate the Actions of an Anchor Link/Target Pseudo-Class?

Why is Emmet's document snippet failing to include the "http-equiv='X-UA-Compatible'" meta tag?

Using ES6, when utilizing array map in ReactJS, the function does not produce a return value

Having trouble with Angular redirecting to the home page?

An internal server error has occurred: The code generation node is missing for the element/if/for node. Please ensure that the necessary transformations have been

Retrieving a dynamic JSON object for the MusicBrainz application using AngularJS

Instructions on how to automatically navigate to a different tab upon clicking an <a> element on a separate webpage, and subsequently display the designated tab on that

Isn't AJAX all about the same origin policy?

Getting the most out of Ziggy when integrated with Vuex

Error code 302 is triggered when attempting to retrieve an HTML file from a web address

Is there a way to invoke a function within a mat-error element?

Transforming a file with a node module that lacks a .js class into a browseable format