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

The webpack-bundle-analyzer tool reveals that running webpack -p does not eliminate the development dependency react-dom.development.js

Here is my custom webpack configuration: const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const SO ...

pretending to make an ajax call using jQuery

To enhance the user experience of file upload, I have implemented a fake ajax request. When the user clicks submit, the form disappears, a loading graphic appears, and after a few seconds, the page refreshes to display the newly uploaded image. However, e ...

Buefy: Secure the header of the table in place while allowing the rows to scroll freely

How can I make the header of the table component stay fixed while allowing only the rows to scroll? ...

Counting records in a nested ng-repeat using AngularJS

As a newcomer to AngularJS, I am facing an issue with a nested ng-repeat using a custom filter. I want to display the record count of Orders being shown, but when applying a product filter, it does not work as expected. For instance, if an order has no pro ...

Analyzing JSON parsing efficiency

I am currently working on a client application using jquery and html5 For my project, I have a data file that is 70 MB in size The file named data.json contains the following: var myData = [ { "id":"000000001", "title":"title1", "c ...

How can you conceal the navigation and footer components on a 404 page using Next.js?

import Footer from "./Footer"; import Navigation from "./Navigation"; import { useRouter } from "next/router"; function CustomLayout({ children }) { const router = useRouter(); return ( <> {router.pathname ...

Is there a way to dynamically change the title of a tab when new content is added to a minimized page?

Is anyone familiar with how websites like Facebook and Buzzfeed update their tab titles when there are multiple tabs open? I have noticed that sometimes they add a "(1)" or "(2)" to indicate changes on the page. Do they use JavaScript to achieve this eff ...

Enhance a collection by incorporating methods to the result of an angular resource query

After executing a query, I am left with an array from the resource: .factory('Books', function($resource){ var Books = $resource('/authors/:authorId/books'); return Books; }) I was wondering if there is a way to incorporate pr ...

Using values from a select menu in a math calculation without including a decimal point

I am working with a dropdown menu that contains various values... <select id="number1a" onChange="Addition()"> <option value="0" selected>-</option> <option value="10">10</option> <option value="7.5">7.5</optio ...

Attempting to parse a file using JSON.parse

I'm currently in the process of downloading a file and attempting to utilize JSON.parse. The result should be { dateTime: "2012-04-07T17:15:00.000-05:00", value: "1065.91" }. Can someone verify if I am passing the correct object through JSON.parse and ...

Troubleshooting a misformatted JSON string that lacks proper double quotes in Java Script

{ DataError: { user_id: [ [Object] ] } } I want to transform this string into JSON structure like below: { "DataError": { "user_id": [ [Object] ] } } Is there a potential method to achieve this outcome from incorrectly formatted JSON string? ...

Is there a way to simulate a click event within a Jasmine unit test specifically for an Angular Directive?

During the implementation of my directive's link function: $document.on('click.sortColumnList', function () { viewToggleController.closeSortColumnList(); scope.$apply(); }); While creating my unit test using Jasmine: describe(&apo ...

Is Angular a good choice for a NW.js project that will only be used locally?

For my upcoming project, I plan to develop a mid-size application using NodeJS and NW.js (formerly known as node-webkit). This application will be pulling data from various online sources, except for one specific service that I manage. I'm wondering ...

How to verify CSRF protection on Node.js/Express endpoints

I have added csrf (cross-site request forgery) protection to my express application like this: ... app.use(express.csrf()); app.use(function (req, res, next) { res.cookie('XSRF-TOKEN', req.csrfToken()); next(); }); ... Everything is working ...

What methods are available for parsing JSON data into an array using JavaScript?

I possess an item. [Object { id=8, question="وصلت المنافذ الجمركية في...طنة حتّى عام 1970م إلى ", choice1="20 منفذًا", more...}, Object { id=22, question="تأسست مطبعة مزون التي تع... الأ ...

Switch Button Hyperlink in HTML/CSS

I have the following code: document.addEventListener("DOMContentLoaded", function(event) { (function() { requestAnimationFrame(function() { var banner; banner = document.querySelector('.exponea-banner3'); banner.classList ...

The headers set in jQuery's $.ajaxSetup will be used for every ajaxRequest, even if they

Below are the parameters set for all ajax calls in the <head> of my document. (This is necessary to fix an iOS ajax bug referenced at $.ajaxSetup ({ cache: false, headers: { "cache-control": "no-cache" } }); I am wo ...

Can a condition be incorporated in a gulpfile to execute a task depending on the size of a file?

Currently, I am utilizing gulp for image compression. However, my requirement is to only compress images exceeding 200kb in size. Can JavaScript be used to loop through a directory and selectively run the minification process on files larger than 200kb? ...

Why is the script from URL "http://.../js/myscript.js" not executing as expected after being fetched?

Is it possible to have the server run a JavaScript file specified in a URL, such as "http://.../js/script_name.js", and return the result instead of just displaying the source code? I am assuming that the server is using node.js. ...

Waiting for a method to finish in Node.js/Javascript

Currently, I am in the process of creating a trade bot for Steam. However, I have encountered an issue where the for-loop does not wait for the method inside it to finish before moving on to the next iteration. As a result, the code is not functioning as i ...