Assigning numerical ratings to a web-based questionnaire in HTML

In my questionnaire, I have radio buttons and checkboxes that need to be graded. The format of the input elements looks like this:

 <input type="radio" name="1" value="Yes" 
    onclick="document.getElementById('pls').setAttribute('required', true)" required> Yes
 <input type="radio" name="1" value="No" 
    onclick="document.getElementById('pls').removeAttribute('required')"> No </br>

I cannot change the current purpose of the name and value attributes, so I am looking for a way to assign point values to different answers and calculate the total client-side. These points will then be added as a separate column in a database. The challenge lies in using an attribute to represent the answer value.

EDIT: Here is the complete format for 2 questions:

 <b>1.QUESTION?</b></br> 
  <input type="radio" name="1" value="Yes" data-points="1" onclick="document.getElementById('pls').setAttribute('required', true)" required> Yes  
   <input type="radio" name="1" value="No" data-points="0" onclick="document.getElementById('pls').removeAttribute('required')"> No </br>
   <input type="radio" name="1" value="I missed to look" onclick="document.getElementById('pls').removeAttribute('required')"> I missed to look </br>
      <i>COMENT?</i> </br>
     <textarea name="edno" id="pls"></textarea></br>
   </br>
   <b>2.QUESTION?</b></br> 
   <input type="radio" name="2" value="Yes" data-points="1" onclick="document.getElementById('2a').removeAttribute('required')" required> Yes  
    <input type="radio" name="2" value="No" data-points="0" onclick="document.getElementById('2a').setAttribute('required', true)"> No     </br>
     <i>COMMENT</i> </br>
    <textarea id="2a" name="dve"></textarea></br></br>

When "Yes" is checked for option one, I need to add 1 point, and when "No" is checked, 0 points should be added to the final score. Hopefully, this explanation clarifies things.

javascriptphphtml

Answer №1

Utilize data-attributes:

<input type="radio" name="1" value="Yes" data-points="10" onclick="changePoints(this); document.getElementById('pls').setAttribute('required', true)" required>Yes 
<input type="radio" name="1" value="No" data-points="5" onclick="changePoints(this); document.getElementById('pls').removeAttribute('required')">No

This allows you to access them with javascript:

function changePoints(el)
{
    var points = el.dataset.points;
    alert(points);
}

See Example

Remember: Always use data- attributes for storing custom data in an element, rather than overloading default attributes.

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

Having difficulty generating dynamic rows and tree dropdowns in AngularJS

Struggling to implement dynamic row functionality with Angular JS. The rows are working well, but I also need to incorporate a tree dropdown within each row. Unfortunately, clicking the "add row" button populates the same data in all rows. I have shared m ...

javascriptjqueryangularjs

How can express.js be properly installed using typescript?

Currently, I am in the process of setting up a new project that involves using express.js with typescript integration. Would it suffice to just install @types/express by running the following command: npm install @types/express Alternatively, do I also ...

javascripttypescriptexpressnpm

Tips for implementing two Secondary Actions in React Material UI, with one positioned on the left corner and the other on the right, while ensuring that the behavior of the

Is there a way to display two secondary actions on either end of a list item without triggering additional onclick events? The placement can be adjusted by overriding the CSS properties right and left. https://i.stack.imgur.com/rhr7N.gif The issue arises ...

javascriptreactjsmaterial-ui

Connect this - initiate the removal of an item

I am seeking assistance from more experienced colleagues to help me understand the code below and implement it in my App. The main objective is to trigger a REDUX action from a button, which will delete an item from a database. Here is the code that curr ...

javascriptreactjsreduxmaterial-ui

Exploring the Concept of Nested ViewModels in Knockout.js Version 3.2.0

I have a global view model that is applied to the main div and I also have other view models that I want to apply to nested elements within my main div However, I am encountering an issue: You cannot bind multiple times to the same element. Below is ...

javascripthtmldata-bindingknockout.jsviewmodel

The variable req.body.Dates has not been declared

I am currently working on a project that involves dynamically populating two drop down menus using SQL Server. Depending on the selected items, I need to load a specific ejs template using AJAX. My goal is to load data based on the selected criteria. For e ...

javascriptjquerynode.jssql-serverexpress

What are some strategies for accessing the original values of form components that have not been altered when using ngModel?

I am currently developing a form and I intend to utilize the previous values as "value" in the form. By employing ngModel dynamically, I am able to change some properties. However, I have encountered an issue where the field that remains unchanged by the u ...

htmlangularformsevent-handlingmean-stack

Updating databases with the click of a checkbox

Currently, I am developing a program for monitoring cars as part of my thesis. My current focus is on user management, and I have come across an issue where the database needs to be updated when the status of a checkbox changes. To visualize checkboxes, y ...

javascriptphpmysqlajax

Require modifying the radio button's value based on the presence of a certain class in an input field

Feeling overwhelmed. I am currently working on implementing a credit card auto system using the Stripe Payment plugin, but I find myself at a loss. Specifically, when a MasterCard is entered in the card number input field, it should receive the "masterca ...

javascriptjqueryradio-buttonstripe-payments

Node.js is facing a problem with its asynchronous functionality

As a newcomer to node, I decided to create a simple app with authentication. The data is being stored on a remote MongoDB server. My HTML form sends POST data to my server URL. Below is the route I set up: app.post('/auth', function(req, res){ ...

javascriptnode.jsasynchronousexpresscallback

Error: It is not possible to access the 'map' property of an undefined value 0.1

I'm currently experimenting with React.js and I encountered an error that's giving me trouble. I can't seem to pinpoint the root cause of this issue. Shout out to everyone helping out with errors: TypeError: Cannot read property 'map ...

javascriptreactjs

Troubleshooting lpush errors in Node.js with Redis

I'm currently developing a web application using node.js and redis. The goal is to store each incoming request in a redis queue before saving it into a database. However, I keep encountering an error whenever the program executes the lpush command. Be ...

javascriptnode.jsexpressredisnode-redis

The v-for loop seems to only update the last element instead of all of them, which is incorrect

How can I ensure that all 3 page links in the nav are displayed in 3 languages of user choice? Initially, the language change works fine on page load. However, after clicking on a language change link once, only the last link's language changes instea ...

javascriptvue.jsvuejs3nuxt.jsvue-component

Highlighting text in React using hover effects on list elements

Imagine having HTML / JSX structured like this: <ul> <li>First point in list</li> <li>Second point in list</li> </ul> and the goal is to highlight a contiguous range that spans multiple list items: <ul> < ...

javascripthtmlcssreactjstailwind-css

Obtain the numerical value of the vertical position of the mouse (

Currently, I am coding a JavaScript game and my objective is to designate a variable specifically for the Y axis of the mouse. I kindly request that the code be kept as simple and straightforward as possible, avoiding unnecessary complexity. That conclud ...

javascripthtmlvariablesyaxis

The hovering event trail feature is not functioning in tsParticles, unlike in particlejs

I have two questions regarding the implementation of tsParticles in my React application. First question: <Particles id="tsparticles" options={{ background: { color: { value: "black&quo ...

javascriptcssreactjsparticles.js

Should I include one of the dependencies' dependencies in my project, or should I directly install it into the root level of the project?

TL;DR Summary (Using Lodash as an example, my application needs to import JavaScript from an NPM package that relies on Lodash. To prevent bundling duplicate versions of the same function, I'm considering not installing Lodash in my application' ...

javascriptnode.jsnpm

There was an error in Index.js: The UserForm component did not return anything from the render function. This typically occurs when a return statement is missing. To render nothing, you can return

Hello, I'm a beginner with React and I'm attempting to add a row in my React app when a button is clicked. I referenced this guide on how to dynamically add and remove table rows in React.js However, I'm having trouble adapting it to my cod ...

javascriptreactjsreact-reduxmaterial-ui

Developing a function that takes a parameter which can be used with or without an additional argument when invoked

In my React application, I have a method that accepts a parameter for displaying a modal. const displayModal = (p:Result) => { setConfirm(true); if(p) { //check variable for truthy setSelectedRow(p); } ...

javascriptreactjstypescriptecmascript-6

Tracking dynamic collections in AngularJS ng-repeat using track by

I am attempting to utilize ng-repeat with the result of a function call, like this: <body ng-init='a = [1, 2, 3]'> <div ng-repeat='item in f(a) track by item[0]'>{{item}}</div> </body> where the function f is ...

javascriptangularjsangularjs-ng-repeat