Issue with retrieving selected radio button value from form in ExtJS. Value not being returned

I have successfully implemented the necessary steps to retrieve the chosen value from my radio button form.

        ....
        xtype: 'radiofield',
        name: 'timespan',
        id: 'timespan',
        value: 7,
        checked: true,
        fieldLabel: 'Time Span',
        boxLabel: '7 days'
    }, {
        xtype: 'radiofield',
        name: 'timespan',
        value: '30',
        fieldLabel: '',
        labelSeparator: '',
        hideEmptyLabel: false,
        boxLabel: '30 days'
    }, {
        xtype: 'radiofield',
        name: 'timespan',
        value: '60',
        fieldLabel: '',
        labelSeparator: '',
        hideEmptyLabel: false,
        boxLabel: '60 days'
    }, {
        xtype: 'radiofield',
        name: 'timespan',
        value: 'all',
        fieldLabel: '',
        labelSeparator: '',
        hideEmptyLabel: false,
        boxLabel: 'All' ....

I have employed various methods such as:

Ext.getCmp('filter_form').getForm().getValues()['timespan']

However, upon executing this in the console, instead of obtaining the selected button's value, I receive the term on. What is causing this issue? I have experimented with different combinations of getValues, getForm, and so on, yet I always end up with on, true, or false. Can anyone explain what might be happening here?

javascriptformsextjsextjs4

Answer №1

Make sure to specify the inputValue property of the radio button. This value will be inserted into the input element's attribute and used as the parameter for form submission.

{
        xtype          : 'radiofield',
        name           : 'duration',
        inputValue     : '60',
        hideEmptyLabel : false,
        boxLabel       : '60 minutes'
}

To access the value, use the following code:

Ext.ComponentQuery.query('[name=duration]')[0].getGroupValue();

For more information, check out the documentation on getGroupValue.

Answer №2

Hooray, I finally cracked the code! It turns out there was a mistake in my extjs sample code!

After some investigation, I switched value to inputValue. According to the Sencha Docs, inputValue is defined as:

The value that should be placed in the generated input element's value attribute and used as the parameter value when submitting it as part of a form. The default value for this is: 'on'

Eureka!! Because I didn't specify an actual value, it defaulted to on.

Lesson learned - always proceed with caution when utilizing extjs examples or sample code!

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

What is the best way to add timestamps to derivative posts or comments related to a post?

Currently working on a tutorial and I think it would be great to timestamp comments as well. For the main posts, the timestamp works fine, but not for the child posts or comments as we can call them for simplicity. Since I am using Firebase, I'm uns ...

javascripthtmlangularjsfirebase

Combining Ng-model with iOS credit card scanning functionality offers a seamless and

Dealing with Ng-model and iOS credit card scanning In my credit card form, each field is structured like this: <input type=“text” ng-model = “cc.number”, ng-class = validClass('cc.number’)> The function validClass returns either val ...

javascriptiosangularjsmobile-safari

Is styling in React not showing up?

Currently, I am tackling a third-party pagination component in Reactjs. The npm package instructs me to include the line import "rc-pagination/assets/index.css"; in the file. However, despite injecting the index.css into the DOM using the style loader, I ...

javascriptreactjswebpackcreate-react-appcss-loader

Error: "BODY" does not exist in the current context in the node.js, webpack, Babel setup

As someone new to node.js, I am seeking assistance with the output generated when running "npm run build-web," which executes "webpack --progress" and copies the results. Any guidance would be greatly appreciated. Child centerPin: Hash: 92640a144e27 ...

javascriptnode.jswebpack

Laravel Route parameter not found in request

Utilizing a modal for data editing involves populating it with information fetched via ajax. Encountering an issue related to the URL in AJAX and Laravel routes, leading to this error: Missing mandatory parameter [Route: get-project-data] [URI: get-proj ...

javascriptphpajaxlaravel

Executing PHP to capture and showcase the HTTP request received from one page onto another

As a beginner in web development, I humbly ask for patience as I navigate through unfamiliar territory. If possible, please guide me through the logical steps necessary to accomplish the task at hand. I am currently working with PHP and need assistance i ...

javascriptphpajaxinventory

Is there a way to determine if this particular element is the initial one with its class throughout the entire document?

Struggling to come up with a conditional to load a script. Looking for a conditional that can identify if this element is the first one in the entire document with a specific class. The issue I'm facing is that I've created a BBCode for a phpBB ...

javascriptjqueryhtmljquery-selectors

What is the method for selecting a specific row in a Primefaces Datatable using HtmlUnitDriver and Selenium?

Check out this code snippet: import org.openqa.selenium.By; import org.openqa.selenium.WebElement; import org.openqa.selenium.htmlunit.HtmlUnitDriver; import org.openqa.selenium.support.ui.ExpectedConditions; import org.openqa.selenium.support.ui.WebDriv ...

javajavascriptajaxseleniumprimefaces

Create a form that calculates results using user-inputted values

I am currently developing a Cardio Test calculator that assesses the risk of heart attacks. My aim is to assign a score-based value for each input provided. The algorithm for generating results is already functional, I just need assistance in obtaining the ...

javascriptjqueryformscalculator

Executing AngularJs controller functions invoke Jasmine test suite with Karma

I am relatively new to using Karma and Jasmine for writing unit tests on my AngularJs application. During the test suite execution, I noticed that functions called to initialize data in my controller are automatically being triggered. Is there a way to pr ...

javascriptangularjsunit-testingkarma-jasmine

Issues with Javascript events not functioning properly within a bootstrap popup (bootbox)

I am attempting to create a bootstrap popup using bootbox modal. Inside the form, there is an input text with masked input, but unfortunately, any events inside the popup do not seem to be working. You can see the issue here: http://jsfiddle.net/ens1z/UK6 ...

javascriptjquerytwitter-bootstrapjquery-eventsbootbox

Tips for transferring data to a different webpage while ensuring that dynamic elements remain active

Is There a Solution to Making Dynamic Elements Persist After Page Load and Transfer Data to the Next Page? I'm struggling with adding a new row that includes both a checkbox and textbox. I've been using the Clone() method to generate a new row, ...

javascriptc#jqueryhtmlasp.net

Calculating and modifying a specific value in my local storage using JavaScript

I've been working on a code that allows me to add, display, and delete objects in local storage. It's functioning fine, but I'm facing an issue when trying to update a specific object. Instead of modifying just the particular object I want, ...

javascriptjqueryarraysobjectlocal-storage

Implementing a class for a dropdown menu within a JavaScript function

I recently came across a code that I am interested in using on my form to automatically select an option when clicking on a div. $("div").on("click", function(e) { var $select = $("select"); $select.val($(this).data("value")); // simulate cli ...

javascript

Leveraging AngularJS ngBind with a JavaScript object

Within the given string, integrating a javascript object and embedding it into an ngBinding does not result in proper evaluation. I have a string where I want to incorporate a specific part of a javascript object and am transitioning to Angular for its use ...

javascripthtmlangularjs

Display Bootstrap modal automatically upon page load three times for each individual user

i need the bootstrap modal to appear on page load and i have come across the following code. However, there are a couple of issues: 1- I want the modal to display for every user three times, not just the first time! How can I achieve that, my friends? 2 ...

javascriptjquerybootstrap-modal

retrieving a date from a different source and displaying it in a date

Is there a way to ensure that the date format in an input of type date always follows the dd/MM/yyyy Brazilian pattern, regardless of the computer or browser specifications? <div class="input-group input-group text-center in ...

javascripthtmlangular

List with option to input a new value rather than selecting from the existing options

Currently, I am working on developing a small website using php/mysql. In my database, I have a table containing various laptop specifications such as brand, CPU, etc. When adding a new laptop via an HTML form, I want to be able to select from a list of di ...

javascriptphpmysqldatabasedrop-down-menu

Angular filter that replaces underscores with spaces

Looking for a solution to replace underscores with spaces in a string ...

javascriptregexangularjsangularjs-filter

There was a dependency resolution error encountered when resolving the following: [email protected] 12:15:56 AM: npm ERR! Discovered: [email protected] . The Netlify deploy log is provided below for reference

5:27:42 PM: Installing npm packages using npm version 8.19.3 5:27:44 PM: npm ERR! code ERESOLVE 5:27:44 PM: npm ERR! ERESOLVE could not resolve 5:27:44 PM: npm ERR! 5:27:44 PM: npm ERR! While resolving: [email protected] 5:27:44 PM: npm ERR! Foun ...

javascriptreactjsnpmnpm-installreact-otp-input