Restrict the quantity of user responses with JavaScript

For this questionnaire, users are limited to selecting and ranking only 3 out of the 5 listed Social Apps.

I am currently using questback to build the survey, but I require assistance in implementing a JavaScript condition.

<table>   
<tr> 
<td>Instagram</td> 
<td><input type="radio" class="socialapps" name="socialapps_1" 
value="Radio A"></td> 
<td><input type="radio" class="socialapps" name="socialapps_1" 
value="Radio B"></td> 
<td><input type="radio" class="socialapps" name="socialapps_1" 
value="Ipod A"></td> 
</tr>
<tr> 
<td>Twitter</td> 
<td><input type="radio" class="socialapps" name="socialapps_2" 
value="Radio A"></td> 
<td><input type="radio" class="socialapps" name="socialapps_2" 
value="Radio B"></td> 
<td><input type="radio" class="socialapps" name="socialapps_2" 
value="Ipod A"></td> 
</tr>
<tr> 
<td>Facebook</td> 
<td><input type="radio" class="socialapps" name="socialapps_3" 
value="Radio A"></td> 
<td><input type="radio" class="socialapps" name="socialapps_3" 
value="Radio B"></td> 
<td><input type="radio" class="socialapps" name="socialapps_3" 
value="Ipod A"></td> 
</tr>
<tr> 
<td>Linkedin</td> 
<td><input type="radio" class="socialapps" name="socialapps_4" 
value="Radio A"></td> 
<td><input type="radio" class="socialapps" name="socialapps_4" 
value="Radio B"></td> 
<td><input type="radio" class="socialapps" name="socialapps_4" 
value="Ipod A"></td> 
</tr>
<tr> 
<td>Whatsapp</td> 
<td><input type="radio" class="socialapps" name="socialapps_5" 
value="Radio A"></td> 
<td><input type="radio" class="socialapps" name...

Any assistance with this implementation would be greatly appreciated. Thank you!

javascript

Answer №1

Discover other validated inputs with identical values using:

$inputs = $("input[class='socialapps']");

if ( $inputs.filter('[value="' + val + '"]:checked').length > 1 ) { ... }


(function($) {
  $inputs = $("input[class='socialapps']");

  $inputs.change(function() {
    var $this = $(this),
        val = $this.val(),
        maxAllowed = 3,
        cnt = $("input[class='socialapps']:checked").length;

    if (cnt > maxAllowed) {
      $this.prop("checked", "");
      alert('Select maximum ' + maxAllowed + ' social apps!');
    }

    if ($inputs.filter('[value="' + val + '"]:checked').length > 1) {
      $this.prop("checked", "");
      alert('Only one ' + val);
    }
  });
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Instagram</td>
    <td><input type="radio" class="socialapps" name="socialapps_1" value="Radio A"></td>
    <td><input type="radio" class="socialapps" name="socialapps_1" value="Radio B"></td>
    <td><input type="radio" class="socialapps" name="socialapps_1" value="Ipod A"></td>
  </tr>
  <tr>
    <td>Twitter</td>
    <td><input type="radio" class="socialapps" name="socialapps_2" value="Radio A"></td>
    <td><input type="radio" class="socialapps" name="socialapps_2" value="Radio B"></td>
    <td><input type="radio" class="socialapps" name="socialapps_2" value="Ipod A"></td>
  </tr>
  <tr>
    <td>Facebook</td>
    <td><input type="radio" class="socialapps" name="socialapps_3" value="Radio A"></td>
    <td><input type="radio" class="socialapps" name="socialapps_3" value="Radio B"></td>
    <td><input type="radio" class="socialapps" name="socialapps_3" value="Ipod A"></td>
  </tr>
  <tr>
    <td>Linkedin</td>
    <td><input type="radio" class="socialapps" name="socialapps_4" value="Radio A"></td>
    <td><input type="radio" class="socialapps" name="socialapps_4" value="Radio B"></td>
    <td><input type="radio" class="socialapps" name="socialapps_4" value="Ipod A"></td>
  </tr>
  <tr>
    <td>Whatsapp</td>
    <td><input type="radio" class="socialapps" name="socialapps_5" value="Radio A"></td>
    <td><input type="radio" class="socialapps" name="socialapps_5" value="Radio B"></td>
    <td><input type="radio" class="socialapps" name="socialapps_5" value="Ipod A"></td>
  </tr>
</table>

Answer №2

I found your question to be quite intriguing, so I dedicated some time to explore a solution with minimal code (given the limited time I had).

$(document).ready(function () {
  var maxAllowed = 3;
  function check(){
    if ($("input.socialapps:checked").length > maxAllowed){
           alert('Select maximum ' + maxAllowed + ' social apps!');
           return false;
       }
       return true;
  }
  $("input.socialapps").change(function (e) {
    if (!check()) e.target.checked = false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>   
<tr> 
<td>Instagram</td> 
<td><input type="radio" class="socialapps" value="1" name="socialapps_1" 
value="Radio A"></td> 
<td><input type="radio" class="socialapps" value="2" name="socialapps_1" 
value="Radio B"></td> 
<td><input type="radio" class="socialapps" value="3" name="socialapps_1" 
value="Ipod A"></td> 
</tr>
<tr> 
<td>Twitter</td> 
<td><input type="radio" class="socialapps" value="1" name="socialapps_2" 
value="Radio A"></td> 
<td><input type="radio" class="socialapps" value="2" name="socialapps_2" 
value="Radio B"></td> 
<td><input type="radio" class="socialapps" value="3" name="socialapps_2" 
value="Ipod A"></td> 
</tr>
<tr> 
<td>Facebook</td> 
<td><input type="radio" class="socialapps" value="1" name="socialapps_3" 
value="Radio A"></td> 
<td><input type="radio" class="socialapps" value="2" name="socialapps_3" 
value="Radio B"></td> 
<td><input type="radio" class="socialapps" value="3" name="socialapps_3" 
value="Ipod A"></td> 
</tr>
<tr> 
<td>Linkedin</td> 
<td><input type="radio" class="socialapps" value="1" name="socialapps_4" 
value="Radio A"></td> 
<td><input type="radio" class="socialapps" value="2" name="socialapps_4" 
value="Radio B"></td> 
<td><input type="radio" class="socialapps" value="3" name="socialapps_4" 
value="Ipod A"></td> 
</tr>
<tr> 
<td>Whatsapp</td> 
<td><input type="radio" class="socialapps" value="1" name="socialapps_5" 
value="Radio A"></td> 
<td><input type="radio" class="socialapps" value="2" name="socialapps_5" 
value="Radio B"></td> 
<td><input type="radio" class="socialapps" value="3" name="socialapps_5" 
value="Ipod A"></td> 
</tr>
</table>

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

Updating the Scale of the Cursor Circle on my Portfolio Site

I attempted to find tutorials on creating a unique circle cursor that can hide the regular mouse cursor as well. After implementing it with a difference blend mode, I encountered an issue where I wanted the scale to change when hovering over a link. The ...

javascripthtmlcsshovercss-transitions

Convert a web page with embedded images using Base64 strings into a PDF file using JavaScript

My website has numerous images with base 64 string sources. Typically, I am able to download the HTML page as a PDF using a service method that involves sending the HTML page with a JSON object and receiving the PDF in return. However, when there are many ...

javascripthtmljsonpdfbase64

Having difficulty importing a .glb file in Three.js with the import.meta.url method when using the parcel bundler

Greetings! I recently embarked on creating a fun little game using Three.js for me and my friends. After watching numerous tutorials on how to import .gltf and .glb files, I decided to use the parcel bundler with the command: npx parcel ./src/index.html to ...

javascriptnode.jsnpmthree.js3d-model

You are unable to define a module within an NgModule since it is not included in the current Angular compilation

Something strange is happening here as I am encountering an error message stating 'Cannot declare 'FormsModule' in an NgModule as it's not a part of the current compilation' when trying to import 'FormsModule' and 'R ...

javascripthtmlangularangular9

The use of jQuery for fetching posts via ajax can lead to a crash in the browser

I have a social media platform where I implemented jQuery on the main feed page. The jQuery is set up so that as users scroll down, the next batch of posts is fetched using ajax and added to the DOM. However, after a few ajax requests, the browser slows do ...

javascriptajaxjquery

Attempting to deactivate the bootstrap-fullscreen-select feature using JavaScript

Currently, I am in the process of developing a Python Flask server to manage a project that I have undertaken. While exploring different options, I came across bootstrap-fullscreen-select which turned out to be exactly what I needed for my control page. H ...

javascripthtml

When using CasperJS to capture multiple screenshots, the most recent screenshot will replace all previous ones

Exploring CasperJS has been a great experience for me. Despite my enjoyment, I've encountered an issue with casper.capture() that has me stumped. I've set it up to capture screenshots whenever a test fails and placed it in a separate setup module ...

javascriptcasperjs

Don't forget to expand or collapse

I'm struggling to make this work. My goal is to initially display 50 characters and show the rest when the "read more" button is clicked, and vice versa with "read less." Another problem I've noticed is that when I click the back browser button, ...

javascriptjqueryhtml

Utilize the Material UI SelectField component as a reference for handling onChange events

I'm facing a challenge with my form that contains over 15 SelectField components. I want to avoid creating multiple change handler functions, but I can't figure out how to identify the specific select field that triggered the change event in orde ...

javascriptreactjsmaterial-ui

What is the best approach to repurpose a component when small adjustments are needed?

Can a customized slider component be created in React that can be reused with slight variations? For example, having the second one include a 13% field. View image description here ...

javascriptcssreactjssasscomponents

Vue.js - Maintaining input value when model declines updates

I am working on a text input that allows users to enter numbers with a maximum of three digits after the decimal point: <v-text-field type="text" :value="num" @change="changeNum($event)" /> <p>{{ num }}</p> ... export default { data: ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Issue with logging objects in an array within a for loop

I am having an issue with a JavaScript for-in loop. Why does console.log(user) display the number "0" when iterating through users? Is it indicating the index of the user object in the array? I would like to log each object individually... Thank you r ...

javascriptexpress

Is it possible to incorporate a React app as a component within a static HTML page?

Looking to integrate the react-csv-viewer component into a static HTML page without deploying it on a local server. I've tried following the instructions from the React tutorial, but am struggling with the build process. My goal is simple - to use th ...

javascripthtmlreactjsnpmbuild

I am currently working on creating a navigation bar for a webpage using the express framework and pug library. However, when I navigate to the demo page endpoint, the screen appears blank and nothing is displayed

//In the following JavaScript code, I am trying to implement basic routing navigation using express. However, when I try to insert HTML into the demo page, nothing appears on the browser screen. const path = require("path"); const app = ...

javascriptnode.jsreactjsexpressmern

Determine the name of the time zone using JavaScript

Currently, I am developing a React application and facing an issue where the timezone is detected as 'Etc/GMT-1' instead of the desired format 'Africa/Bangui'. This problem seems to be specific to my machine as it persists even when usi ...

javascriptmoment-timezonedayjs

Creating a triangle shape using Bootstrap to style a div element, similar to the image provided

Trying to achieve the look of the attached image with a few divs. I know I can use a background image like this: background:url(image.png) no-repeat left top; But I'm curious if there's another way to achieve this without using a background ima ...

javascripthtmlcsstwitter-bootstrap

Adding or Deleting Rows from Input Table

I'm in the process of creating a website that features an input table allowing users to easily add or remove rows at their discretion. The desired UI is shown below: https://i.sstatic.net/EFAlM.jpg Here is the HTML code I have developed so far: & ...

javascripthtmlcssbootstrap-4

What is the best way to add external javascript files to bookmarklets?

I have been developing a CDN for a collection of scripts that I created for my job. Previously, I had to distribute these scripts individually and each user would have to download and install them on their own computer. Now, I am transitioning them to an A ...

javascriptjquerycdnbookmarklet

Checkbox Event Restricts Access to a Single Class Variable

As a beginner in AngularJS (just diving in this week), I've encountered an issue with a checkbox input connected to an ng-change event. <input type="checkbox" ng-model="vm.hasCondoKey" ng-change="vm.onKeyCheckboxChange()" /> The ng-change even ...

javascriptangularjstypescriptevents

Displaying and hiding the Angular <object> element

I am faced with a challenge involving managing files of various formats and creating a gallery with preview functionality. Everything works smoothly when clicking through items of the same format, like JPEGs. However, an issue arises when switching from vi ...

javascriptjqueryangularjsswfobject