I'm in need of creating a form that includes input text, color selection, and an add button. Once the button is clicked, I want the entered information to be displayed in a table.
For example, if I type "Attend Selection Day" and choose "critical", the output should resemble what is shown in this image:
https://i.sstatic.net/BQu25.jpg
Thank you!
There are various methods to implement the task you requested, such as using jQuery tables, bootstrap, or thymeleaf frameworks. However, for a simple solution, we can create a basic HTML structure with embedded javascript to achieve the desired result. We will utilize javascript to dynamically update the selected priority in the dropdown menu with text and apply the appropriate color.
Below is a sample code snippet that illustrates how to accomplish this task effectively. The 'show()' function checks the user's input and updates the result table based on the selected dropdown value and text entered in the text box.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<script language="JavaScript">
function show(){
var textEntry = document.getElementById('myText').value;
if(textEntry == ''){
alert("Please enter a task");
return;
}
var selection = document.getElementById('mySelection');
var selectionText = selection.options[selection.selectedIndex].text;
var fontColor='';
if(selection.value=='normal'){
fontColor='#259523';
}
if(selection.value=='undecided'){
fontColor='#3339FF';
}
if(selection.value=='critical'){
fontColor='#FF9F33';
}
document.getElementById('textEntry').innerHTML='<font color="'+fontColor+'">'+textEntry+'</font>';
document.getElementById('priority').innerHTML='<font color="'+fontColor+'">'+selectionText+'</font>';
}
</script>
</head>
<body>
<table>
<tr>
<td>
<input type="text" id="myText">
</td>
<td>
<select id="mySelection">
<option value="normal" selected>Normal</option>
<option value="undecided">If You Can</option>
<option value="critical">Critical</option>
</select>
</td>
<td>
<input type="button" onclick="show()" value="Add">
</td>
</tr>
<tr>
<td id="textEntry"></td>
<td id="priority"></td>
</tr>
</table>
</body>
</html>
Using the css property ::before, I am attempting to insert a tag before a paragraph. While I am able to display the tag correctly, it is causing the text within the paragraph to be shifted to the right. Ideally, I would like the tag to appear in the top-le ...
In the process of using the Flex 3 Air application, I am in need of generating a CSS file. It is crucial that I have the ability to both create and modify the CSS file, and also be able to reach specific styles by their respective class names. If you hav ...
Hello, I am a beginner in utilizing MongoDB and Node.js and I have a query. Below is my product schema: const mongoose = require('mongoose'); const Schema = mongoose.Schema; const categorySchema = require('./category'); const Produc ...
I am trying to create a simple JavaScript program that allows users to like and dislike content. However, I am new to JavaScript and finding it a bit challenging. Basically, when the user clicks on the Follow button, the "countF" variable should increase ...
My website can be found at: . There seems to be an unusual ~25px gap at the top of the page before the content starts displaying. The current code/layout was inherited from the previous web design company and doesn't meet my standards, but it functio ...
I created an HTML form and noticed that Chrome's autofill feature successfully fills in the street address, city, and zip code. However, when I use a select/option dropdown list for the state input, it does not get auto-filled. I have tried using sta ...
Exploring WP themes has been an interesting journey for me. Currently, I am working on creating a shortcode for some html/script and encountering an issue with enqueuing the js file. My initial query is about whether I am loading this from the correct loc ...
After familiarizing myself with Reactjs, I came across an interesting concept called componentDidUpdate(). This method is invoked immediately after updating occurs, but it is not called for the initial render. In one of my components, there's a metho ...
As I work on creating a placeholder image/svg for the Next.js image component, I found some code on their GitHub repository that helped guide me. Because my experience lies more in frontend development rather than backend, I had to do some research on conc ...
Looking at the code snippet below, I have a requirement for 2 specific values from the response: The HTML response retrieved from the specified page URL The value of the URL used to request the page OR the array index utilized in the call. for (le ...
I am facing an issue with using await at the specified location in 1.vue file. Whenever I try to use await, it throws an error stating Unexpected reserved word 'await'. How can I modify async useFunctionToAllServers() to execute sequentially afte ...
I have a function in my application that requires an object as one of its parameters: const checkValues = { promoId: ..., ... unsaved: !JSON.parse(localStorage.getItem('unsaved')) ? [] : JSON.parse(localStorage.getItem('unsaved') ...
Modified: Here is the table along with its corresponding CSS styling: .table-hover tbody tr:hover { background-color: #fff !important; } <html lang="en"> <head> <meta charset="utf-8" /> <meta name="v ...
Although I know there are similar questions out there, I am new to C# and struggling to figure out the solution. On my main form, I have a DataGridView and a dialog box to add new records. I want to refresh the DataGridView on the main form when the dialo ...
My current project involves utilizing an API to monitor soccer scores. The issue I am encountering is that the response object does not provide a specific key for each team's score. Instead, the value is represented in a string format like this: &quo ...
My Bootstrap v4.5.0 navbar is giving me trouble. I am trying to use a logo as the navbar brand, treating it like HTML text. However, I can't seem to replicate it successfully. Despite having other items in my navbar besides just the brand, the image i ...
Currently, I am immersed in a project that involves HTML5, MVC 4, CSS 3, JQuery, and LINQ. We have meticulously designed styles for various ui, li, and other html controls within the project. However, I now face the challenge of integrating a JQ Grid (htt ...
I am attempting to make a POST call from a JavaScript file to a PHP file in order to insert a variable into a MySQL database. Here are the basic files I am working with: 1° PHP file for sending the call <html> <head> <script ...
Situation: In my attempt to integrate a Google address search feature into an online shopping website, I encountered a challenge. I don't have direct access to the website's HTML code, but I can insert code snippets in the header, footer, and in ...
Screen recording In the video above, I demonstrate the same web application in Safari, Chrome, and Firefox. Upon hitting start, an infinite loop creates a new tile, places it temporarily in the main array based on window.scrollY, waits for 1 second, then ...