Extract the content of a div with a specific class using JavaScript

Question

Extract the content of a div with a specific class using JavaScript

I have a pair of div elements

<div class="tab-pane active" id="home">

<div class="tab-pane" id="profile">

Both of these divs contain forms with a hidden field

<input type="hidden" name="selectedRadioValue" id="selectedRadioValue">

Therefore, I want to develop a javascript function that can set a value for the hidden input field.

if($("#home").hasClass("active")) {
      assign "radio1" as the value in the hidden input field 
    }
else if($("#profile").hasClass("active")) {
     assign "radio2" as the value in the hidden input field  
    }

I apologize for asking this kind of question. I am new to javascript and have attempted some code on my own but need assistance. How can I achieve this? Please provide guidance.

Solution:

$(function () {
    $('button').on('click', function () {
        if ($("#home").hasClass("active")) {
            $('.selectedRadioValue').val('radio1');
        } else if ($("#profile").hasClass("active")) {
            $('.selectedRadioValue').val('radio2');
        }
    });
});

javascript jquery html css

Answer 1

Answer №1

To retrieve the hidden value from a form within an active tab pane, iterate through each tab pane, locate the form inside it, and then extract the hidden value. Once you have the value, assign it to the corresponding radio button within the same form.

It's advisable to avoid using the same ID for multiple elements, such as #selectedRadioValue. Using classes would be a better approach in such cases.

$(function() {
    // Iterate over all active tab panes
    $('.tab-pane.active').each(function() {
        // Retrieve hidden input value
        var hiddenValue = $('form #selectedRadioValue', $(this)).val();

        // Assign hidden value to radio input
        // Radio inputs should have '.radio-input' class
        $('form .radio-input', $(this)).val(hiddenValue);
    });
});

Edit

If you want to map hidden inputs to radio1/radio2, simply ensure your code correctly assigns radio1/radio2 as values to the input. Add a class like radio-hidden to the input, and set the values using

$('.radio-hidden').val('radio1');

and so on.

$(function () {
    $('button').on('click', function () {
        if ($("#home").hasClass("active")) {
            $('.radio-hidden').val('radio1');
        } else if ($("#profile").hasClass("active")) {
            $('.radio-hidden').val('radio2');
        }
    });
});

Check out the fiddle here: http://jsfiddle.net/3NAC9/

Answer 2

To retrieve the hidden value from a form within an active tab pane, iterate through each tab pane, locate the form inside it, and then extract the hidden value. Once you have the value, assign it to the corresponding radio button within the same form.

It's advisable to avoid using the same ID for multiple elements, such as #selectedRadioValue. Using classes would be a better approach in such cases.

$(function() {
    // Iterate over all active tab panes
    $('.tab-pane.active').each(function() {
        // Retrieve hidden input value
        var hiddenValue = $('form #selectedRadioValue', $(this)).val();

        // Assign hidden value to radio input
        // Radio inputs should have '.radio-input' class
        $('form .radio-input', $(this)).val(hiddenValue);
    });
});

Edit

If you want to map hidden inputs to radio1/radio2, simply ensure your code correctly assigns radio1/radio2 as values to the input. Add a class like radio-hidden to the input, and set the values using

$('.radio-hidden').val('radio1');

and so on.

$(function () {
    $('button').on('click', function () {
        if ($("#home").hasClass("active")) {
            $('.radio-hidden').val('radio1');
        } else if ($("#profile").hasClass("active")) {
            $('.radio-hidden').val('radio2');
        }
    });
});

Check out the fiddle here: http://jsfiddle.net/3NAC9/

Answer 3

Answer №2

if($("#home").hasClass("active"))                              
{
  $("#selectedRadioValue").val("radio1");
}
else if($("#profile").hasClass("active"))
{
   $("#selectedRadioValue").val("radio2");
}

Hopefully this code accomplishes what you need it to do.

Answer 4

if($("#home").hasClass("active"))                              
{
  $("#selectedRadioValue").val("radio1");
}
else if($("#profile").hasClass("active"))
{
   $("#selectedRadioValue").val("radio2");
}

Hopefully this code accomplishes what you need it to do.

Answer 5

Answer №3

Modify the input fields to make them hidden:

<input type="hidden" name="selectedRadioValue" class="selectedRadioValue">

Then adjust your JavaScript code as follows:

var radio_map = {
    'home': 'radio1',
    'profile': 'radio2'
};
$('.selectedRadioValue').val(radio_map[$(".tab-pane.active").attr('id')]);

This is how the code functions:

$(".tab-pane.active") selects the active tab-pane element.
.attr('id') retrieves the ID of that element.
radio_map[id] accesses the value in radio_map related to the provided ID.
$(".selectedRadioValue") selects all hidden inputs with that class.
```
$(".selectedRadioValue").val(...)
```
updates their values accordingly.

Answer 6

Modify the input fields to make them hidden:

<input type="hidden" name="selectedRadioValue" class="selectedRadioValue">

Then adjust your JavaScript code as follows:

var radio_map = {
    'home': 'radio1',
    'profile': 'radio2'
};
$('.selectedRadioValue').val(radio_map[$(".tab-pane.active").attr('id')]);

This is how the code functions:

$(".tab-pane.active") selects the active tab-pane element.
.attr('id') retrieves the ID of that element.
radio_map[id] accesses the value in radio_map related to the provided ID.
$(".selectedRadioValue") selects all hidden inputs with that class.
```
$(".selectedRadioValue").val(...)
```
updates their values accordingly.

Extract the content of a div with a specific class using JavaScript

Answer №1

Edit

Answer №2

Answer №3

Similar questions

What is the method for retrieving properties with varied names from a collection?

Is it possible to bypass the execution of jQuery jsonp requests?

Looking to transform an HTML table into a stylish CSS layout complete with a form submission button?

Explore the contents of your Webpack bundle directly from your browser console

css top navigation does not appear at the top of the webpage

Using Javascript to transmit audio via a microphone

If I change the request mode to 'no-cors' in my Firebase cloud function, how will it impact the outcome?

Utilize image maps for dynamically displaying and concealing div elements

How can I show pagination links as buttons on a gridview in ASP.NET?

Navigating through an array of images using ng-repeat

Is it possible for jquery to run an entire HTML file using ajax?

When the language in Next.js is changed using setAppLanguage, the query becomes empty

A guide on leveraging *ngFor in Angular 4 to assemble a table featuring 2 columns in every row

jQuery user interface Dialog buttons

The uploadify plugin in jQuery: onAllComplete event triggered regardless of any errors

Is there a way to reveal hidden content using jQuery?

Instructions on adding an activity indicator in a centered box with a loader inside

Leveraging jQuery plugins within an AngularJs application

unable to toggle the navbar

The code is running just fine when tested locally, but it seems to encounter an issue when accessed remotely, yielding