Instructions on how to send the selected value of a Radio Button by clicking on the Answer/DIV

On my website, I have a series of questions with multiple choice answers. I am looking to enhance the user experience by hiding the radio buttons and allowing users to submit their answer simply by clicking on the text within a specific DIV. Can anyone provide guidance on how to achieve this using JavaScript, jQuery, or another method? Below is a snippet of the HTML code for a sample question/answers section:

<form action="" method="post" name="" >
<div> 8*2= ?</div>
<br clear="left">

<div><input type="radio" name="ans" value="a">Sixteen </div>
<div><input type="radio" name="ans" value="a">Twelven </div>
<div><input type="radio" name="ans" value="a">Thirteen </div>
<div><input type="radio" name="ans" value="a">Four </div>
<div><input name="submit" type="submit" value="SUBMIT" style="background-color:#006600; color:#FFFFFF;" /> </div>
</form>

If you have any insights or advice, please share. Thank you in advance!

javascriptjqueryhtmlcss

Answer №1

If I understand what you're asking, maybe you could consider the following approach:
However, I'm not clear on why you're looking to conceal radio buttons and which ones?

My suggestion would be to add a class to your answer div
You might also want to assign an id to the Submit button if needed 

$( function(){
    $('div[class=class-answer]').click( function( event ){
        $(this).find('input:radio[name=ans]').prop('checked',true);
      alert(  $(this).find('input:radio[name=ans]').val() );
    })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" method="post" name="" >
<div> 8*2= ?</div>
<br clear="left">

<div class='class-answer'><input type="radio" name="ans" value="Sixteen">Sixteen </div>
<div class='class-answer'><input type="radio" name="ans" value="Twelven">Twelven </div>
<div class='class-answer'><input type="radio" name="ans" value="Thirteen">Thirteen </div>
<div class='class-answer'><input type="radio" name="ans" value="Four">Four </div>
<div><input name="submit" type="submit" value="SUBMIT" style="background-color:#006600; color:#FFFFFF;" /> </div>
</form>

Answer №2

There is no requirement for javascript here. All that's needed is a corresponding label for each radio input.

<form action="" method="post" name="" >
<div> What is 8 multiplied by 2? </div>
<br clear="left">

<label for="ans-1"><input type="radio" name="ans" id="ans-1" value="16">Sixteen </label><br>
<label for="ans-12"><input type="radio" name="ans" id="ans-12" value="12">Twelven </label><br>
<label for="ans-13"><input type="radio" name="ans" id="ans-13" value="13">Thirteen </label><br>
<label for="ans-4"><input type="radio" name="ans" id="ans-4" value="4">Four </label><br>
<div><input name="submit" type="submit" value="SUBMIT" style="background-color:#006600; color:#FFFFFF;" /> </div>
</form>

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 issue of receiving a 404 error when attempting to send a string via Ajax

When a key is pressed and released, a JavaScript function is triggered. The function is supposed to call a controller action and return a result, but instead, I am receiving a 404 error. I have set breakpoints at the beginning of the controller action, but ...

javascriptc#.netajaxmodel-view-controller

Utilize a PHP-AJAX request to retrieve JSON data and then transfer the data to JGauge.js in order to display the value

scenario where I need to transfer an ajax-called value to another script (specifically a widget script) within the same file, I have managed to successfully execute the ajax call and implement a justgage widget on a single page. While I can effectively dis ...

javascriptphpjqueryjsonajax

Tips for efficiently finding and comparing text within the results generated by a for loop in Angular/Javascript

In my XML data, I have extracted all the tag names using a for loop and some other logic. Now, I am looking to find the word 'author' from the output values that are displayed in the console during the loop. If any of the output values match &apo ...

javascriptangulartypescript

Utilizing exponential formatting for Plotly axis scales

Following up on a previous question here: SO Q The solution provided in the previous question uses JavaScript code to convert axis ticks into exponential format, but it only works for a single axis on a single plot. When applied in a subplot() structure, ...

javascriptrplotlysubplot

Pinch Zoom Functionality in Three.js

I’m looking to incorporate Pinch Zoom functionality into my three.js panorama viewer. After some research, it appears that TrackBallControls.js might have this feature built in? I attempted to implement it, but encountered an error: 'Uncaught T ...

javascriptmobilethree.js

Could someone explain why Bootstrap columns are positioned in the same row but stacked on top of each other?

In the HTML structure I have provided below, you can see that there is a nested row inside another row, and within that inner row, there are two more columns (trying to split col-9 into more columns). However, the issue is that instead of appearing next t ...

htmlcsstwitter-bootstrapbootstrap-4

"The interplay of Vue components: exploring the relationships, lifecycle hooks

Brand new to utilizing Vue.js. I am exploring the concept of having a single parent component and two child components that need to communicate asynchronously through Vue's event bus system. This involves using a dummy Vue object as a shared container ...

javascriptvue.jsvuejs2hooklifecycle

Is there a way to substitute one substring with another substring within the values of an array's objects using Javascript?

var temp = [ { text:'some text and then % sign and then, again % sign', link: 'another text with %', }, ]; I need to modify the temp array of objects to replace all occurrences of % with \%. How can this be achieved? ...

javascriptarraysreplacejavascript-objectsreplaceall

Creating a Tree Checkbox using jQuery without relying on pre-made plugins

The data structure provided appears to be hierarchical, but I am unsure if it follows the Adjacency list or Nested List model. Regardless, it is relatively simple to gather this hierarchical data. For instance, to retrieve the entire tree, you can use: SE ...

phpjquerymysqlhtml

Implementing a separate detail view in Vuejs

I am currently working on a page with multiple cases. When I click on a case, the details for that case appear on the same page. Here is a screenshot of how it looks: https://i.sstatic.net/Y9S4J.png As you can see in the screenshot, there are two cases li ...

javascriptlaravelvue.jscomponents

Alert will only occur once the done function in jquery's .ajax method is executed

Something seems off and I'm struggling to understand the situation. I've used jQuery's .ajax() function to run a script that retrieves data from the database. The script is functioning properly and the data is being returned as expected: $. ...

javascriptphpjqueryhtmlajax

The bidirectional functionality of ng-model is not working as expected in my specific application

UPDATE: It seems that setting the controller in the view like ng-controller="SomethingController as Ctrl" and then using it in the model ng-model="Ctrl.myModel" actually works. How surprising! I have been wanting to integrate this particular directive int ...

javascriptangularjsangularjs-directive

Issue with parsing an empty array in a Discord bot built with Node.js

Within this API, there exists an empty array marked with a red underline. Sometimes it's void of content, but other times it contains data. My goal is to display Item Spells: there are no effects on this item. when the array is empty. However, instead ...

javascriptnode.js

Determining the precise location of an element using Selenium web driver

Utilizing a Selenium web-server in Java for automating various web pages is my current task. As an example: WebDriver driver = new FirefoxDriver(); driver.get(url); WebElement element = driver.findElement(By.id("some_id")); I am wondering how to retriev ...

javajavascriptdomselenium-webdriver

"Double the fun with fullcalendar.io - where every event is doubled

I am currently using a combination of rails and react.js for my latest project. Let's say I create event A, but then have a change of heart and decide to cancel it via a bootstrap modal. Afterward, I start another event B and proceed to confirm it, ho ...

jqueryruby-on-railstwitter-bootstrapfullcalendarreactjs

Is there a way for me to customize the clickable region of my checkbox?

I'm facing a formatting issue in my Angular application that I need help with. The problem lies in the clickable area around my checkboxes, as shown in the images linked below. https://i.sstatic.net/MoLYZ.png https://i.sstatic.net/2VT5x.png What I a ...

htmlcssangular

Handling Pop-up Windows in Python with Selenium

# Automation Setup from selenium import webdriver from selenium.webdriver.common.keys import Keys from selenium.common.exceptions import NoSuchAttributeException, NoAlertPresentException from selenium.webdriver.support.ui import WebDriverWait from seleniu ...

htmlcssseleniumselenium-webdriver

Is there a way to incorporate the sum of selected checkbox numbers into this jQuery or JavaScript code?

I am trying to figure out how to add and display the count of checked checkboxes with this set of codes. Here's how the checkboxes function: There is a parent checkbox (Checkall) and multiple child checkboxes; when the parent checkbox is checked, it ...

javascriptjqueryhtmlcsscheckbox

Error encountered with $.ParseJSON that causes the conversion of JSON string to null

When working with Spring MVC, I am faced with the task of converting an ArrayList into a JSON string. One key object is the "results" object. The output generated by Spring appears like this: { "data":"[{\"userName\":\"test1\",\" ...

jqueryjsonspringparsing

Troubleshooting problem with GZIP in Angular 2 application deployment

I have developed an Angular 2 TypeScript application. I am using Firebase for hosting and Cloudflare for optimizing speed, caching, and security. When checking the browser header, it indicates: accept-encoding:gzip, deflate, sdch, br The app.js file has ...

javascriptangulargzipsystemjscloudflare