How can I make a button add an input field when clicked, and then turn into another button or element once the input is submitted?
<button>add tag</button>
<input type="text" name="" placeholder="tag">
$(document).ready(function () {
$('button').click(function () {
$("button").before("input");
});
});
Give this a shot
$(document).ready(function() {
$('button').click(function() {
$("body").before("input");
});
$("input").keyup(function(e) {
if (e.keyCode == 13)
$(this).attr("type", "button");
$(this).val('button')
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>add tag</button>
<input type="text" name="" placeholder="tag"><button>add tag</button>
<input type="text" name="" placeholder="tag"><button>add tag</button>
<input type="text" name="" placeholder="tag"><button>add tag</button>
<input type="text" name="" placeholder="tag"><button>add tag</button>
<input type="text" name="" placeholder="tag"><button>add tag</button>
<input type="text" name="" placeholder="tag">Recently, I undertook a project that required me to replicate the exact content from https://www.google.com/atap/project-jacquard/. The issue arose when I used a video tag to play a background video, as it only displayed half of the video in Internet Expl ...
In my cr-route.js file, I have a function that ensures the user is authenticated before displaying their name. module.exports = function (app, passport) { // ===================================== // HOME PAGE (with login links) ======== // == ...
Does anyone know how to properly handle a variable on a page that looks like this? var userdetails = "{ 'id': '1', 'username': 'me', }"; I am trying to call a function to load the id and username from this vari ...
I've been attempting to collapse multiple targets with just one click. The Bootstrap documentation suggests that this can be achieved by specifying a matching CSS selector with the data-target attribute. However, it seems that the collapsing only work ...
Check out my Codepen link for the resizable event While using Jquery UI resizable, everything is functioning correctly. However, I am now looking to have the resizable event activate one block at a time. When another block is clicked, the resizable event ...
I am currently in the process of setting up a new blog using node.js. Everything is working smoothly on my local setup, but I am facing an issue when it comes to adding images to my articles. Despite utilizing bootstrap for input display, I am unable to sa ...
I am working with a Jade template that includes two dropdown menus and a Load button. The goal is to send the selected values from these dropdowns to my Node API when the user clicks on the Load button. Here's the code I have been trying: extends lay ...
How can I apply an active class to the selected item in a ngFor loop without toggling it on every item? <div class="mb-2 item rounded bg-white border" *ngFor="let item of keys(); let i = index" (click)=&qu ...
I'm currently working on setting up a JqGrid with a subgrid like this... jQuery(document).ready(function() { jQuery("#list").jqGrid({ url: '/OrganizationalUnit/FindAll/', datatype ...
I have designed a simple form with two dropdown menus. Both menus have the same options: <option value='1234:0'>Closed</option> <option value='4567:2'>Open</option> <option value='6857:1'>Dead< ...
Please take note: The scrollbar-gutter: stable; property is not compatible with Safari. Additionally, the issue seems to be specific to Chrome and works fine in Firefox. I have observed some unusual behavior when attempting to position elements fixed to t ...
I keep encountering a connection reset error. I strongly believe it's stemming from a lengthy REST request, causing it to timeout. { [Error: socket hang up] code: 'ECONNRESET' } Is there a method to deactivate request timeouts within Koa, ...
I am in the process of updating a specific section on my webpage periodically. This particular section is located in my index.html.erb file and has the following structure: <div id="shared_tasks_div"> <ul> <% @canEditTasks.each do |elem| ...
Can someone provide the correct command to write in an ExpressJS file in order to expose a single HTTP endpoint (/api/search?symbol=$symbol&period=$period)? Here is what's currently working: app.get('/api/search/', (req, res) => ...
I was experimenting with threading in different languages like Java, PHP, and JavaScript. I am aware that JavaScript is single-threaded and PHP lacks robust threading capabilities. Below is the code snippet I have been working on: <body> <p id= ...
Is there a way to have an error message display just above the sign-in form if the username and password are incorrect? I don't want it to redirect to another page, but simply show the error right above the form in my code. <!Doctype html> < ...
Is there a way to add spacing between each button in the bootstrap 5 navbar? Currently, the buttons are too close to each other, and I would like to create some space between them. How can I achieve this? <link href="https://cdn.jsdelivr.net/npm/ ...
I need help with inserting a material-ui icon into my component using props. Can you please advise on what I might be doing wrong? I am struggling with passing the icon down in JSX, and here is the attempt that is not working: This code snippet shows me t ...
In relation to this jQuery plugin found at , I am facing a situation with my ajax function where it takes some time to retrieve the data - therefore, I would like to display a spinner in the modal div. $("#basic-modal-content").modal(); $("#basic-modal- ...
Hello, let's dive into the code. <div class="nyhet"> <img src="#" width="785" class="attachement-full" /></div> <div class="nyhet"> <img src="#" width="390" class="attachement-full" /></div> <div class="nyhet"&g ...