Retrieve the radio button value without using a key when submitting a form in JSON

Looking to extract the value upon form submission in Angular, here is the code:

In my Typescript:

constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public formBuilder: FormBuilder, public alertCtrl: AlertController,
public loadingCtrl: LoadingController) {

this.memleticsForm = formBuilder.group({
    changeType: [{}, Validators.required]
});
}


memleticsSubmitForm(form) {
    console.log(form);

  }

Html:

 <form name="learningtestForm" [formGroup]="memleticsForm" (submit)="memleticsSubmitForm(memleticsForm.value)" novalidate>
<table>
  <tr>
    <th>Question</th>
    <th>0</th>
    <th>1</th>
    <th>2</th>
  </tr>

  <tr>
   <td>You have a personal or private interest or hobby that you like to do alone.</td>
   <td>
      <input type="radio" formControlName="changeType" [value]=0>
   </td>
   <td>
      <input type="radio" formControlName="changeType" [value]=1>
   </td>
   <td>
      <input type="radio" formControlName="changeType" [value]=2>
   </td>
  </tr>

</table>

<button ion-button block color="secondary" end type="submit">Submit</button>

Upon clicking and submitting the button, the output on the console.log shows "Object {changeType: 2}"

The goal is to only retrieve the "2" and use it for calculations like this:

memleticsSubmitForm(form) {
    var x = form * 5;
console.log(x); // if 2 is selected, display should be 10
}

Answer №1

If you encounter this situation, you may consider implementing the following solution:

handleFormSubmission(formData) {
    console.log(formData.changeType);
    const changeType = formData.changeType; // Ensure your form includes this attribute
    var result = changeType * 5; // Utilize it accordingly ;)
    console.log(result);
}

Trust this guidance proves beneficial!

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

EBUSY: Unable to access resource due to being busy or locked, unable to retrieve information from 'C:hiberfil.sys'

I am running into an issue while attempting to publish an npm package. The error message I keep receiving is causing me some trouble. Does anyone have any suggestions on how I can resolve this? Your help would be greatly appreciated! Thank you in advance ...

What could be causing the errors I'm encountering in my TypeScript component within AngularJS?

I am working with an AngularJS component written in TypeScript called news.component.ts. This component makes a call to a service named google.service.ts in order to fetch news RSS using a service that converts XML to JSON. Within the NewsComponent, I hav ...

The jQuery extension for XDomainRequest in the $.ajax function called onprogress is

Summary: I am trying to make this compatible with this: Detailed Explanation: My goal is to develop a jQuery extension that introduces a progress method to the $.ajax object and works seamlessly with IE8 & IE9's XDomainRequest object. Currently, I ...

Uncovering the xpath of an element within an iframe using QTP

When attempting to set a value in the <input type="file" name="file007"> element using QTP, I encountered an issue. The element is located within an iframe, making it inaccessible through xpath on the page. <iframe id="file_007" src="javascript:& ...

Looking for assistance with arranging and managing several containers, buttons, and modals?

My goal is to create a grid of photos that, when hovered over, display a button that can be clicked to open a modal. I initially got one photo to work with this functionality, but as I added more photos and buttons, I encountered an issue where the first b ...

Implementing a persistent header on a WordPress site with Beaver Builder

My website URL is: . I have chosen to use beaver builder for building and designing my website. I am in need of a fixed header that can display over the top of the header image. Here is the code snippet that I currently have: <div id="header">html ...

Transform JSON data into a Google Sheet using Google Apps Script

Having trouble inserting the JSON response into Google Sheet using Google Apps Script with the code below. Running into errors, even though I can't seem to pinpoint the issue. Take a look at the screenshot and code snippet provided: function myF ...

Share a Node.js Express.js npm package for universal access within the project

Here is my current folder structure. /app.js /src /routes /controllers Within the routes folder, there are multiple javascript files that all require the passport.js package like so: const passport = require('passport'); Is it possible to c ...

Transmitting an array of objects via Ajax to PHP

Assistance Needed: I have created my object using the following code: var data = []; $("#report-container [id^='report-']").each(function(index) { var reportObject = { "subject" : "", "photo" : "", "rating" : "", ...

Decoding with Gson: Say No to Wrapper Classes

Working on deserializing the JSON data provided using Gson in Kotlin. { "things": [ { "name": "Thing1" }, { "name": "Thing2" } } } Currently, there are two classes involved in deserialization; ThingWrapper - Contains a p ...

NextJS 13 causes tailwind to malfunction when route group is utilized

I've encountered an issue in my NextJS 13 application where Tailwind classes are no longer being applied after moving page.tsx/layout.tsx from the root directory to a (main) directory within the root. I suspect that there may be a configuration that i ...

Find out the keycode of an event in ReactJS when a key is released

Whenever I try to get keyCode on a keyUp event, it always returns 0. Why is this happening? I want to avoid using keypress and similar methods, and I also need to utilize an arrow function: handleKeyPress = (e, type) => { let KeyCode = e.charCode; ...

Discovering the audio file URL hidden within javascript code

Is it possible to programmatically locate a link to an audio pronunciation clip on a website? I am in the process of creating a personalized language learning Anki deck. The specific site I am referring to is: When clicking on "Framburður," the audio cli ...

Uncovering the hidden gems within a data attribute

Trying my best to explain this clearly. What I have is a data-attribute that holds a large amount of data. In this case, I need to extract each individual basket product ID and display them as separate strings. The challenging part for me is locating thi ...

Analyzing the HTTP status codes of various websites

This particular element is designed to fetch and display the HTTP status code for various websites using data from a file called data.json. Currently, all sites are shown as "Live" even though the second site does not exist and should ideally display statu ...

Converting and downloading CSV to XLSX directly from the front end using TypeScript and React

After successfully converting a JSON response to CSV format for download using the function below, I am now looking to achieve the same functionality but with xlsx files on the front end. The current function works well for CSV files and handles Japanese ...

Are you experiencing problems with JSON formatting?

Currently, I am facing an issue with populating an HTML table using JSON data. The problem arises when I try to populate the table with the JSON data that was provided to me. After careful examination, I suspect that the issue might lie in the formatting o ...

Tips for sharing content within an iframe

Despite my efforts to find a solution, I have been unable to come across one that aligns with my specific situation. I currently have a form for inputting person data. Within this form, there is an iframe containing another form for adding relatives' ...

Achieving the functionality of toggling a div's visibility using jQuery by simply clicking on a

Here is the JavaScript code I am using: $(document).ready(function() { $('.LoginContainer').hide(); $('.list li a').click(function(){ $('.LoginContainer').togg ...

Discover how to achieve the detail page view in Vue Js by clicking on an input field

I'm a beginner with Vuejs and I'm trying to display the detail page view when I click on an input field. <div class="form-group row"> <label for="name" class="col-sm-2 col-form-label">Name</label> ...