A text box will appear when you click on the edit button

When the edit button is clicked, I need to display text boxes and list boxes. Can someone please provide suggestions on how to accomplish this?

HTML:

<div class="textboxes">
<ul>
    <li><input type="text" id="txt" /></li>
    <li><input type="text" id="txt" /></li>
    <li><input type="text" id="txt" /></li>
</ul>
</div>

<input type="button" value="Edit" id="editBut" />

Javascript:

$("input[type='text']").blur(function(){
    $(this).hide().after('<span class="dfk">' + $(this).val() + '</span>');
});

Check out the js fiddle here: http://jsfiddle.net/thilakar/yvNuC/11/

Thank you!

Answer №1

Give this a shot

$("#editBut").on('click', function() {
 $('.textboxes span').hide();
 $('.textboxes input[type=text]').show();

});

Take a look at this DEMO

Answer №2

Check this out: http://jsfiddle.net/yvNuC/14/

$("#editBut").click(function() {
      if ($('.textboxes').is(':visible')) {
         $('.textboxes').hide();
         // perform save operation
         $(this).val('Edit');
     }
     else {
         $('.textboxes').show();
         $(this).val('Save');
     }        
});

Alternatively, if you want to display values after saving: http://jsfiddle.net/yvNuC/16/

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

Is jQuery failing to serialize the form data?

I have a question regarding my form. When I try to serialize it using a jQuery script, the output is empty. Could someone please assist me with this issue? Here is a snippet of my form: <form id="tabb2"> <!-- *************************** ...

What is the best way to add color to a Table Header?

I'm working on a HTML/CSS table and I want the header row to have a specific background color. Below is my code: <table class="contentTable"> <tr class="contentTableHeader"> <th>No.< ...

What could be causing the div to be wider than the content inside of it?

I am having an issue creating a webpage with a 20-60-20 flex fill layout. The div in the center, which should occupy 60% of the page, is wider than its content, causing it to appear off-center. https://i.stack.imgur.com/WwCJy.png Here is my home.componen ...

Eliminate duplicate time slots in Laravel and Vuejs

Currently, I am delving into laravel(5.2) and vuejs as a newcomer to both frameworks. My goal is to utilize vuejs to eliminate redundant time slots. In my blade file, the code looks like this: <div class="form-group"> <label for="form-fi ...

Swapping out video files with varying quality using HTML5 and Jquery

Objective: Implementing a feature to change the video being played when a user clicks a button using Jquery. Example website for reference: (click on the "hd" button in the player control) More details: When the page loads, the browser will play the fi ...

Searching for the final element within identical divs using Selenium in Python

My goal is to identify the final element within a div, display it on the console, and pause until the next one appears while utilizing selenium. Despite experimenting with for and while loops, I have not found success as they solely target the first elemen ...

Tips for incorporating a notification bar below the header

I'm fairly new to CSS and I'd like to create a black notification bar for free shipping right below the header, with white text. It needs to span the full width of the browser. I attempted to achieve this using CSS and `header::after`, but my te ...

Unable to make a jQuery Ajax HTTP Request within a Chrome extension

I'm facing an issue with sending a jQuery Ajax HTTP Request within google chrome extensions. I have already imported the jQuery library and used the following code: $.ajax({ method: "PUT", url: "https://spreadsheets.google ...

Is there a way to eliminate padding and increase the size of images in mobile view?

Over on my photography blog, I'm working on adjusting the padding within the blue box, increasing the size of my images, and eliminating hover effects for mobile views. Despite my efforts, the code I've implemented hasn't produced the desire ...

Issue encountered when attempting to select a button with selenium

I'm attempting to use Selenium to click on a button, but encountering an error in the process. The specific error message is shown below: https://i.stack.imgur.com/NQjnh.png This snippet of code represents the accessed HTML page: https://i.stack.i ...

The PHP login form must be submitted twice

I've encountered an issue that's stumping me. All of my other forms are functioning correctly, except for the Login Form, which needs to be filled out twice before it works. First, I input my username and password, submit the form, and the page ...

What steps can I take to make this menu more leisurely?

I've been experimenting with creating a horizontal menu using HTML and CSS. <section class="latest-albums-area section-padding-100"> <div class="container"> <div class="row"> ...

`Apply event bindings for onchange and other actions to multiple elements loaded via ajax within a specific div`

My form includes various input fields, dropdowns, and text areas. Upon loading, jQuery locates each element, sets its data attribute to a default value, attaches an onchange event, and triggers the change event. The issue arises when some dropdowns are d ...

Refreshing a page following an AJAX request made with jQuery

I am working on a JSP page that shows student details. When a student is selected from the dropdown box, it triggers an onchange event to retrieve the minimum and maximum marks for that student. <form name="listBean"> <c:forEach var="Item" i ...

Execute a task prior to invoking a different task

I'm currently working on an image slider that has some interactive features. Here's how it functions: When a user clicks on an image, it slides and comes to the front. On the next click, the image is flipped and enlarged. Then, on another click ...

Why can't JQuery/javascript's dynamic gallery's images be used as buttons instead of links?

I've been struggling with my online portfolio for several nights as I build my website. Despite exhaustive internet searches, I couldn't quite articulate my problem in words and tried multiple workarounds. To see the issue, please visit the beta ...

Troubleshooting a unique CSS bug in jQuery mouseover functionality

Check out this pen: https://codepen.io/anon/pen/eKzEVX?editors=1111 I recently created a Form Select in Laravel: {!! Form::select('status_id', $statuses, $post->status_id, ['class' => 'form-control post-sub-items-label &apo ...

Adaptable Design for Smartphones

Currently in the process of creating a website for my brother with Joomla 3.4 and Bootstrap. This marks my first venture into building a responsive site, so I'm seeking guidance on essential elements to include in my CSS such as font sizes in specific ...

The presence of CSS rollovers on a scrollable div is causing overflow problems

Currently, I am developing an interface that involves a list of items inside a scrollable div. Some of these items have rollover menus that extend beyond the boundaries of the div when hovered over. It is crucial for the website to be compatible with disab ...

Nothing is being returned when using JQuery AJAX POST

Having trouble identifying the issue, as all that seems to happen is the URL changes to "http://localhost/?search=test" when entering "test", for example. index.php <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquer ...