How to submit the value of Radio Button by clicking on the Answer/DIV

Question

In my website I have some questions and multiple choice answers. I want to hide the radio buttons and submit the value by clicking on the answer text itself which is in a DIV. Is there a way to acheive this by using javascript/ Jquery or something else? Below is my simple html code for a sample question/answers:

<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>

Thanks in Advance!!

https://stackoverflow.com/questions/16242980/making-radio-buttons-look-like-buttons-instead — Mohammed Sohail Ebrahim, Jun 27 '17 at 10:35

Shantaram Tupe · Accepted Answer · 2017-06-28T05:42:37.953

If I understood your question you may want to try this:
But I don't understand why you want to hide radio buttons and which?

I will suggest please, add class to your answer div
You may add id to Submit button, if you want

$( 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>

But I am a beginner in Jquery. Can you give me the jquery coding for 'the value should be submitted after clicking on the answer and then click on Submit button'. Now the value is submitted by clicking on the answer only. — Reena, Jun 27 '17 at 16:50
I have updated answer you can check, Just removed `$('input[name=submit]').click();` which causes form being submitted — Shantaram Tupe, Jun 28 '17 at 05:44

score -1 · Answer 2 · answered Jun 27 '17 at 10:45

You do NOT need javascript at all for this. What you need is an associated label for each of the radio input.

<form action="" method="post" name="" >
<div> 8*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>

You'r answer might use label because it is semantic correct, but the op asked if it was posible with a click event and jquery, javascript. — , Jun 27 '17 at 10:47
@TonyNielson it is not necessary to just give an answer as requested, as a developer it is important that we not only give a solution but a correct solution. — Nitin Suri, Jun 28 '17 at 09:12

How to submit the value of Radio Button by clicking on the Answer/DIV

2 Answers2