Creating tags in HTML and displaying them on a webpage

I have a code that sends a message from a textarea after completion tags are entered as I wrote. The desired output should be:

<h1> Thanks </h1>

The expected output is:

Transmitter Thanks

instead of

<h1> Thanks </h1>

Code snippet from comment:

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
                    <textarea class="mdl-textfield__input" type="text" rows="3" id="emailbody" data-required="true"></textarea> 
                    <label class="mdl-textfield__label" for="sample5">Email body</label> 
                </div>
javascriptjqueryhtmlcss

Answer №1

Perhaps you are looking for this kind of desired outcome.

 $(document).ready(function () {
       $(".submit").click(function() { 
         var inputVal = $(this).siblings(".mdl-textfield__input").val();
         if(inputVal != ''){
           function removeHTMLTags(text){
             var regex = /(<([^>]+)>)/ig;
             return text.replace(regex, "");
           }
           var cleanText = removeHTMLTags(inputVal);
           $(".mdl-textfield__label").text("Your value is:"+cleanText);
           var resetInput = $(this).siblings(".mdl-textfield__input").val("");
         }   
     });

    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <textarea class="mdl-textfield__input" type="text" rows="3" id="emailbody" data-required="true"></textarea><br><button class="btn submit btn-primary">Submit</button><br><label class="mdl-textfield__label" for="sample5"></label></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discrepancy in Syntax Highlighting in HAML Code

Hopefully this is an easy fix, as I am struggling with highlighting some HAML code using the prism library. %pre %code.language-haml &#37;header.post-header &#37;h1= data.title &#37;time{ datetime: data.date }= pretty_date(data.d ...

htmlcsshamlsyntax-highlighting

How can I fix my HTML Image input not redirecting when clicked?

I have successfully implemented the following code: <input type="button" name="btnHello" value="Hello" onclick="Test();"/> Here is the JS function that accompanies it: function Test() { window.location.href = "Page2.aspx"; } Initially, clicking ...

javascripthtmlimagehttp-redirectimagebutton

Exploring the functionality of Angular's Controller As using Jasmine testing framework

I am a beginner in Jasmine/Angular testing and I'm attempting to test a controller that I have created. The code for the controller is shown below: (function () { 'use strict'; angular .module('App') .controller('Act ...

javascriptangularjsunit-testingjasmine

Restrict input to only text characters in a textbox using AngularJS

Looking for a way to ensure that users can only input characters into a textbox in my project. Any suggestions on how I can accomplish this? ...

javascriptangularjsangularjs-directive

Guide to making an object with a value sourced from the redux store

I am looking to develop an object with custom getters and a key representing language. Depending on the language key, different values should be returned by the getters. This is specifically for a customizable language selection feature. As an example, one ...

javascriptreact-nativelocalizationreact-redux

What is the best way to determine which array to manipulate based on its current state?

I'm facing an interesting challenge where I need to determine which array to map over based on the length of shownAppointments. {shownAppointments.length ? shownAppointments .flat() .map((appointment) => ( ...

javascriptreactjs

Build an intricate nested array structure using the properties of an object

My data object is structured like this: "parameters": { "firstName": "Alexa", "lastName": "Simpson", "city": "London" } The task at hand involves implementing the followin ...

javascriptarraysjsonjavascript-objects

Multiple occurrences of setting the state on an array result in logging an empty array each

My current challenge involves fetching data from a backend server and storing it in an array. However, when I attempt to pass this array to another component, I encounter an issue where multiple empty arrays are being passed instead of one filled with data ...

javascriptarraysreactjs

What is the best way to deactivate the time-based trigger in an old version of a Google sheet, while ensuring it remains active in the duplicated new version?

When I initially copied a Google Sheet, I assumed that the app scripts would be duplicated as well. However, it turns out that this is not the case. Here's the background story: I made a version 2 by copying version 1. Because I wanted to ensure that ...

javascriptgoogle-apps-scriptgoogle-sheets

What is the function of the next and back buttons in AngularJS?

I need assistance with creating next and previous buttons in Angular. As I am new to programming, I have written a program that works when using a custom array $scope.data = []. However, it doesn't work when I use $http and I would appreciate any help ...

javascriptangularjs

Tips for incorporating flow and TypeScript typings into an NPM module

Are there any resources available for adding both flow and typescript typings to an NPM module at the same time? I've been struggling to find a comprehensive guide on this topic, and it seems to be a common issue faced by open source library maintain ...

javascripttypescriptmodulenpmflowtype

The function that iterates through the 'categoria' state and returns a new array is not functioning properly

Having difficulty with the object of a function using .map(). It works when the code is used directly, but not when put inside a function. For example: if(this.state.cat){ return _.map(this.state.cat, categoria => { if(this.state.search_ ...

javascriptreactjstypescriptreact-native

Heroku Internal Server Error with NextJs version 5.0.0

Below are the scripts that I am using: "scripts": { "dev": "node server.js", "build": "next build", "start": "NODE_ENV=production node server.js", "heroku-postbuild": "next build" }, This is the content of my procfile: web: npm start ...

javascriptreactjsherokudeploymentnext.js

Design: A stationary text box positioned on the left side alongside a selection of scrollable MDL cards on the right

I'm currently experiencing a challenge with adjusting the text on two specific pages. On one side, there is a box with text, while on the other are two MDL cards displaying dialogues. The trouble arises when I try to set a fixed position for the text ...

htmlcssscrollmaterial-designmaterial-design-lite

Verify the existence of a random entry in the database prior to insertion

After creating a code generator that provides various types of codes, I want to simplify it. When a user submits a registration form, certain information is collected and a random code is generated for them. However, I need this random code to be unique to ...

phpjquerymysqlajaxjson

In Javascript, when declaring a variable, check if a field is filled and assign its value if so; otherwise, set a default value

In the code snippet below, there are some rows with a nested field value present and some without. I am attempting to assign a value if the field is present, otherwise I want to set it as 'false'. Despite using the double pipe operator to handle ...

javascriptarrays

The Node application seems to be encountering an issue when attempting to handle

Whenever I click a button on my page in Node using Express, my JavaScript file sends the following request: toggleCartItem = index => { http = new XMLHttpRequest(); http.open("POST", `/cart_item/${index}`, true); http.send(); } Th ...

javascriptnode.jsexpressxmlhttprequesthttprequest

Unique button for custom "CODE" in Froala

Looking to create a custom button with functionality similar to bold (B) but for source code (Src). I have attempted the following, however it is not fully functional: $("#elm1").editable({ inlineMode: false, minHeight: 300, buttons: ["src"], c ...

javascripthtmlwysiwyg

Using Vue to pass data from a forEach loop to the href attribute

Currently, I am dealing with a situation in Vue where I have an array that I need to loop over and render anchor elements for each iteration. The array is passed in as one of my props. Despite trying various methods, I find that the solutions I come up wit ...

javascriptvue.jshref

Fixing the issue with animated scrolling in React Native's Flatlist component

I attempted to customize the default refresh indicator for a Flatlist in React Native. My goal was to create something similar to Snapchat, Instagram, or the default iOS refresh indicator instead of the unattractive Android indicator. This is what I tried: ...

javascriptreactjsreact-nativereact-native-flatlist