Incorporate and Delete a text field

I am attempting to dynamically add and remove an input box based on the checkbox status. However, I am encountering some difficulties. One thing I am uncertain about is how to link the $this (div) with additional attributes.

HTML:

<form>
    Lifetime Secs <input id="sec" type="checkbox" name="sec" value="sec" /> <br />
    Lifetime KBytes <input id="kb" type="checkbox" name="kb" value="kb" />
</form>

JavaScript:

$("#sec, #kb").click(function() {
    if ($(this).is(':checked')) {
        $(this).after('<input type="text" name="input" id="inputbox" />');
    } else {
        $(this).next('input').remove();
    }
});

JSFiddle: http://jsfiddle.net/felix001/eA32C/22/

Thanks,

Answer №1

Several fixes have been implemented. Details provided below:

$(function() {
    $('input:checkbox').change(function() {        
        if ($(this).is(':checked')) {
            $(this).after('<input type="text" name="input" id="inputbox"  />');
        } else {
            $(this).next('input').remove();
        }
    });
});

VIEW DEMO

Answer №2

$(document).ready(function() {
  $('input:checkbox').on('change', function() {
    if ( this.checked ) {
        $(this).after('<input type="text" name="textbox" id="textbox"  />');
    } else {
        $(this).next('input').remove();
    }
  });
});

Answer №3

$(document).ready(function() {
    $("#sec,#kb").click(function() {
        $this = $(this);

        if ( $this.attr('checked')) {

            $this.after('<input type="text" name="input" id="inputbox"  />');

        } else {

            $('#inputbox').remove();

        }
    });
});

http://jsfiddle.net/eA32C/39/

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

Obtaining values from a text box using jQuery

I found this code online and I am looking to customize it to fit my specific requirements. I have two number boxes and I want the code to show me the sub total and total when I input numbers into them. However, the code only retrieves the value from the ...

I am experiencing issues with CSS functionality in my Ruby on Rails application

Currently, I am in the process of creating a blog based on Mackenzie Child's 12 in 12 RoR tutorials. I diligently followed all the steps in the tutorial and adhered strictly to his code. However, I encountered an issue with the CSS stylesheets not be ...

What is the best way to change the color of a website button upon hovering over it?

Hello everyone, I'm new to stackoverflow and seeking some guidance. I am currently working on my website and I would like the background color of the top navigation links to change when hovered over. Specifically, not just the text but the entire are ...

What is the best way to insert a video as the background of a section in HTML Bootstrap while also reducing its opacity?

`Hello everyone! I'm diving into coding and creating my own website for the first time. I've managed to put together a decent site, but now I want to take it up a notch by adding video backgrounds that adjust automatically based on the device. B ...

Center two lines of text in a div in a vertical fashion

After going through several articles on this topic, I've picked up some tricks for vertical alignment like using line-height for a single line of text, display:table for multiple divs, and Flexbox in CSS3. However, I'm still struggling to align t ...

Add HTML content to a common div in every loop iteration

Within the success function of my AJAX call, I have a for loop that iterates through the results array. On each iteration, I create a new div element. My goal is to append all the div elements generated during the iterations to a common div. For Loop in A ...

Changing color schemes in bootstrap using class overrides vs. individually editing numerous .css files

I am aiming to customize the nav-pills to appear in a bold red color. After reviewing information on these two pages https://getbootstrap.com/docs/4.4/utilities/colors/#background-color https://getbootstrap.com/docs/4.4/components/buttons/ I gathered t ...

Why isn't JQuery's .prependTo('body') function functioning correctly?

It's getting late and I should probably call it a night, but I am completely puzzled. I hate to admit it, but why isn't this working?? var informationBox = ''; informationBox += '<div class="informationBox">'; informati ...

The JsonResult function is not being invoked when making an AJAX request

Here is the link to the JSON output: http://localhost:50028/Account/ Below is my JsonResult method: [HttpGet] public JsonResult GetGroupList() { try { DataConnection store = new DataConnection(); DataTable ...

Adjusting the dimensions of :before with JavaScript: A Step-by-Step Guide

There's this CSS3 tag named body:before that I'm working with, and I'm looking to adjust the height and width of body:before using JavaScript. Any suggestions on how to achieve this? ...

Float-related question: How does setting the width of the second element create confusion with floating?

Here is the HTML code I am working with: <div class = "block1">hi</div> <div class = "block2">hi</div> In one scenario, this is the CSS being used: .block1 { width:100px; border:1px solid; float: left; } .block2 { ...

The tooltip in chart.js stubbornly holds onto past data even after it's been

Utilizing chart.js, I have implemented a feature where a tooltip displays when a user hovers over the chart successfully. However, I encountered an issue. I added an option for users to un-check data-points, which works correctly. But now, the tooltip fun ...

Tips for adding padding to a parent div without affecting a specific child element

This is the desired outcome I am aiming for https://i.sstatic.net/nKiz3.png The parent div has a white background, and I want to add padding to the left, right, and top, without applying it to the last child div. How can this be achieved using CSS? When ...

Effortless Wordpress AJAX Retrieval

Currently, I am facing an issue with my JavaScript file where I am using AJAX to retrieve a PHP file containing WordPress functions and basic HTML. While the JavaScript file works perfectly in fetching the file using jQuery, it encounters WordPress errors ...

Div overlaps div on certain screen dimensions

When the screen size falls within a specific range, typically in the low 1000s, there is an issue where my content div overlaps completely with the navigation div. It appears as if both divs are positioned at the top of the page. Below is the HTML code sn ...

What is the method for animating the hiding of <details>?

Having successfully used @keyframes to animate the opening of the details tag, I am now facing the challenge of animating the closing. Unfortunately, I have not been able to find a CSS solution for this. The @keyframes for closing are not working as expect ...

Modifying .vue files within Laravel seems to unexpectedly impact unrelated CSS styles

I've been working on a Laravel project that involves building Vue components. Strangely, every time I update a .vue file and add it for a commit, modifications are also made to the app.css and app.js files. These changes seem to be undoing a particula ...

Experiencing a problem with my widget library where I am getting an error message stating "jQuery not defined"

My Current Project I am currently working on developing a distributable jQuery widget library that has the capability to add an anchor element to an HTML page. Encountered Problem While implementing the 'MyWidget.prototype.Render' method in th ...

Is there a way to create a layout with a row containing two columns and another row with just one column using MUI Grid?

Is it possible to achieve the design displayed in the image using MUI components? I am facing an issue where I am unable to properly insert a third Button into the MUI grid with the same width as the other two buttons. Any suggestions on how to solve this ...

Responsive menu not functioning properly with jQuery

I am currently working on a website located at . My goal is to incorporate the navigation plugin called MeanMenu into the site. I have followed all the instructions provided in the tutorial: adding the jQuery script to my HTML, including the CSS in the hea ...