Using AngularJS to pass radio button value to a $http.post request

Can you please advise on how to extract the value from a radio button and send it using $http.post in AngularJS? Here is an example:

HTML

  <input name="group1" type="radio" id="test1" value="4"/>
  <label for="test1">Four paintings</label>

  <input name="group1" type="radio" id="test2" value="6" />
  <label for="test2">Six paintings</label>

  <button ng-click="submit()">Submit</button>

One radio button has a value of 4, and the other has a value of 6. These values need to be sent to Angular and then saved in the database.

Angular

$scope.submit = function(){
  // assuming radioValue stores the selected value from radio buttons
  if ( radioValue == 4 ) {
     $http.post(apiURL, {
        numberOfpaintings: radioValue,
        ...      
       });
   } else if( radioValue == 6 ) {
     $http.post(apiURL, {
        numberOfpaintings: radioValue,
        ...
       });
   }
}

The 'radioValue' variable needs to store the value from the selected radio button before sending it through $http.post. Thanks!

Answer №1

Take a look at this example:

Check out the code on Plunker: http://plnkr.co/edit/b3AAr9XlVcS0IW962tUT

Here's the script snippet:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$http) {
  $scope.paintings = 4;

  $scope.submit = function(){

  alert($scope.paintings);

 $http.post(apiURL, {
    numberOfpaintings: $scope.paintings
   });
 }
});

And the corresponding HTML:

<body ng-controller="MainCtrl">

<input name="group1" ng-model="paintings" type="radio" id="test1" value="4"/>
<label for="test1">Four paintings</label>

<input name="group1"  ng-model="paintings" type="radio" id="test2" value="6" />
 <label for="test2">Six paintings</label>

<button ng-click="submit()">Submit</button>


</body>

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 method to save data into the browser's local storage when the reload button is clicked in AngularJS?

Is there a way to store data into the localstorage in AngularJS when the reload button is clicked? I've tried using the code below, but it doesn't seem to work: window.onbeforeunload = function (event) { var $body = angular.element(documen ...

JavaScript allows for inserting one HTML tag into another by using the `appendChild()` method. This method

My goal is to insert a <div id="all_content"> element into the <sector id="all_field"> element using Javascript <section id="all_field"></section> <div id="all_content"> <h1>---&nbsp;&nbsp;Meeting Room Booki ...

Tips for utilizing CSS container queries in conjunction with the Material-UI framework

I'm looking to implement CSS container queries with MUI. In my code, I want to change the background color to red if the parent width is less than 300px. Check out the sandbox const StyledItem = styled("div")(({ theme }) => ({ border: ...

Can you make two elements match each other at random?

Currently, I am working on developing a word guessing game where the displayed image should correspond with the word to be guessed. Unfortunately, I am encountering two major challenges in this process. Firstly, I am unable to get the image to display co ...

Dynamic headers with $save in AngularJS $resource

I have been attempting to include dynamic headers in a $resource as shown below: angular.module('app') .factory('API', function ($resource, API_URL) { return { event: function(userId){ return $resource(API_URL + '/event/ ...

What is the method for adding pages to the ion-nav component in Ionic with Angular?

How can I implement a UINavigationController-like functionality in iOS using an ion-nav element? The example provided here is in Javascript, but I need assistance with implementing it in Angular. Specifically, I'm unsure of how to programmatically add ...

Top Pagination Tool for Angular Web Development

Currently, I am developing an Angular and Bootstrap application and in need of a reliable pagination plugin. Can you recommend the best one for me to use? I have experimented with a plugin available at: https://github.com/michaelbromley/angularUtils/tree/ ...

Implementing dynamic loading with a Vue component loader

Is it possible to dynamically import a component using a default Loader if it's not loaded? Currently, we are using the following approach: import Dashboard from '../components/dashboard'; Vue.component('dashboard', Dashboard); ...

Unable to access the inner object using key-value pair in Angular when working with Firebase

Within my json object, there is an inner object labeled data, containing {count: 9, message: "9 sites synced"} as its contents - also in json format. My objective is to extract the value from message, rather than count. Provided below is the temp ...

Step-by-step guide for dynamically including dropdown options

Is there a way to dynamically add a dropdown using JavaScript? I currently have a dropdown with numbers that creates another dropdown when selected. However, I want to add the dynamic dropdown through JavaScript. How can I achieve this? Below is the PHP ...

Testing the slider directive using Jasmine unit tests

Here is the code for a slider directive: appCommon.directive('slider', [function () { return { require: 'ngModel', restrict: "A", link: function (scope, element, attr, ngModel) { var mySlider = ...

Display modal within a React list

I need to display a list of items with an edit button for each item, which should trigger a modal showing the details of that specific item. Initially, I had a single modal component in the parent element and passing the visible values to the parent state ...

Fetching server-side data for isomorphic React app: A guide to accessing cookies

Currently, I am in the process of developing an isomorphic/universal React + Redux + Express application. The method I use for server-side data fetching is quite standard: I identify the routes that match the URL, call the appropriate data-fetching functio ...

Why does the for loop function correctly with console.log but not with innerHTML?

Hello! I'm completely new to JavaScript, so please excuse any oversight... Below is the code that runs when a button on the page is clicked: function getNumbers() { var firstValue = document.getElementById("time_one").value; var ...

Is it possible for Angular models to have relationships with one another? Can one model make references to

I have a complex navigation structure set up like this to create the top nav: [ {id: 1, label: 'Home', icon: 'fa-home', subitems: []}, {id: 2, label: 'Sitemap', icon: 'fa-sitemap', subitems: []}, ...

What could be causing the error in sending JSON data from JavaScript to Flask?

Check out this cool javascript code snippet I wrote: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type=text/javascript> $(function() { $.ajax({ type: 'PO ...

Issue: angular2-cookies/core.js file could not be found in my Angular2 ASP.NET Core application

After spending 2 hours searching for the source of my error, I have decided to seek help here. The error message I am encountering is: "angular2-cookies/core.js not found" I have already installed angular2-cookie correctly using npm. Below is the code ...

Separate JavaScript/ASP statements using commas

I'm having trouble comma-delimiting this line in JavaScript, as I keep encountering errors: <a href="javascript:doSubmit(<%= pound & rs("AdvertiserID")%>, <%=rs("AdvertiserName")%>)"> It's Friday, what can I say... The &l ...

Route.post() is in need of a callback function, however, it was provided with an [object String

I've been working on developing my own vocabulary app by following and modifying the MDN node/express tutorial. While the MDN tutorial runs smoothly, I'm encountering issues with my version. Below are the errors I'm facing: Error: Route.p ...

My extension seems to be missing the content script I uploaded

I am currently developing an extension for Google Chrome. My goal is to create a content script that can retrieve meta tags from the tab when the popup is clicked. In my manifest, I have included the following permissions: "content_scripts": [{ "js" ...