We Keep Coding

How to associate two input fields?

I want to store the correct answer(option) and the other 3 options as well. But for the other 3 options I will store those in database saying is_correct(column) 0/no/False. But for that, I'll have to have such logic that will figure out which radio button is for which input field. How do I bind/map a radio input field to a text input field?
I can, extract values out of these elements but can't figure out the logic.
<div id="option" class="form-group">
<input type="radio" name="option" required/><input type="text" name="option_1" required/><br/><br/>
<input type="radio" name="option" required/><input type="text" name="option_2" required/><br/><br/>
<input type="radio" name="option" required/><input type="text" name="option_3" required/><br/><br/>
<input type="radio" name="option" required/><input type="text" name="option_4" required/>
</div>
I just can't figure out the next step! Seen similar types of posts but not so similar tbh despite the concept being same.

First off, I really don't understand why you use radio buttons and a input text. In my opinion, just switch the input text to labels, or if you want the user to type the answer just give him 1 input text.
That being said, keeping the design you've made:
HTML:
<div id="options" class="form-group">
<input type="radio" id="option_text" required/><input type="text" id="option_1" required/><br/><br/>
<input type="radio" id="option_text2" required/><input type="text" id="option_2" required/><br/><br/>
<input type="radio" id="option_text3" required/><input type="text" id="option_3" required/><br/><br/>
<input type="radio" id="option_text4" required/><input type="text" id="option_4" required/>
<button type="submit" id="sub">
Press me
</button>
</div>
<div id="output1">
</div>
<div id="output2">
</div>
<div id="output3">
</div>
<div id="output4">
</div>
Javascript:
$("#sub").on('click',function(){
let eachone=[];
eachone[0]=$("#option_1").val();
eachone[1]=$("#option_2").val();
eachone[2]=$("#option_3").val();
eachone[3]=$("#option_4").val();
$("#output1").html(eachone[0]+" - "+$("#option_text").prop("checked"))
$("#output2").html(eachone[1]+" - "+$("#option_text2").prop("checked"))
$("#output3").html(eachone[2]+" - "+$("#option_text3").prop("checked"))
$("#output4").html(eachone[3]+" - "+$("#option_text4").prop("checked"))
})
If you want to alter something, or test for your exact test case, here is the fiddle
Jfiddle.
Note I'm using jQuery, just for ease of code, you can change most of the jquery references to document.getElementById
Edit:
Updated fiddle with checkboxes: JFiddle
Edit2:
Updated fiddle with single option checkboxes:
Jfiddle2
Warning: the event created might break some other input type checkboxes you have in your code!

First I think you should use the value attribute of the radioButtons instead of the second input, just put the text in a span or a label :
<input type="radio" id="option1" name="option" value="option1">
<label for="option1">8</label>
then you can get the selected value by doing:
var selectedOption = null;
if (document.getElementById('option1').checked) {
selectedOption = document.getElementById('option1').value;
}
After that, you can query the db to see if the selected option is correct or not.

How about instead of submitting the form with form data, you submit a JSON string/object?
So, your object for question can be something like
{
"question" : "How many planets orbit around the sun?",
"options" : [{
"name" : "1",
"value" : "7",
"isAnswer" : false
}, {
"name" : "2",
"value" : "8",
"isAnswer" : true
}]
}
Now, what's left is to create this object when the submit button is clicked.
To do that, you can have ids such as
<input type="radio" id="radio-1" name="option" required/>
<input type="text" id="text-1" required/>
These elements can be created dynamically, or manually if you are making the page just for a single question.
Now, when the button to submit the form, is clicked, you can run the below code which constructs a JSON object.
let question = {};
question.question = $("#question").val(); //Assuming you are using jQuery and id for question input box is question.
question.options = [];
for(i=0; i<4; i++) {
let option = {};
option.name = (i+1); //convert to ascii if you want alphabets
option.value = $("#text-"+(i+1)).val();
option.isAnswer = $("#radio-"+(i+1)).checked;
question.options.push(option);
}
You can now send this question object to your server.

How to assign the input from two radio buttons to a single field?

I am new in coding. I have two radio buttons. If a “yes” is selected in either from them a certain field (here kouAP) must be AUTOMATICALLY set to a value (in this case 0.56). The problems are:
how to make both radio buttons to set the value to a single field?
How to keep the wished value if one of the is “yes” and the other is “no”? No matter of the order of clicking.
My JQuery makes no sense :(
Thanks you
HTML
<label for="Pre002">ccs</lable>
<br />
<input type="radio" id="Pre002o" name="css" value="0">
<label for="Pre002o">none</label>
<input type="radio" id="Pre002d" name="css" value="4">
<label for="Pre002d">yes</label>
<br />
<label for="Pre066">mi</lable>
<br />
<input type="radio" id="Pre066a" name="mi" value="0">
<label for="Pre066a">yes</label>
<input type="radio" id="Pre066b" name="mi" value="1">
<label for="Pre066b">no</label>
<br />
<input id="kouAP" type=“text” name="kouAP" readonly="true" placeholder="kouAP">
<label for="kouAP">at least one yes</label>
JQuery
$('input[type=radio].css; input[type=radio].mi').click(function(e){
if ($(this).attr("id") == "Pre002d" || $(this).attr("id") == "Pre066a" ){
$("#kouAP").val(0.5677075);
}
else {
$("#kouAP").val(0);
}
});

There is nothing wrong with code.
Just provide the name of the element you listen the click from.
Replace:
$('input[type=radio].css; input[type=radio].mi').click(...);
With:
$('input').click(...);
or:
$('input[type=radio]').click(...);
to avoid future errors.
I just advice you to go through the basics again :)
EDIT
For the second question, I guess it's just a work around with if..else. Hope it helps.
$('input').click(function(e){
if ($('#Pre002d').is(':checked') || $('#Pre066a').is(':checked')){
$("#kouAP").val(0.5677075);
}
else{
$("#kouAP").val(0);
}
});

If radio box is checked go to link

I am doing a quote website and i want if a user want to see most recent quotes to press the radio button and the page will display most recent quotes . I can not figure it out how to make the radio box to send to a certain page.
<input type="radio" name="order" id="noi" value="noi">
<label for="noi">Most Recent</label>
<input type="radio" name="order" id="vechi" value="vechi" >
<label for="vechi">Most Old</label>
<input type="radio" name="order" id="aprec" value="aprec" >
<label for="aprec">Most Liked</label>
Fiddle
I want to make something like this but without be need to press the submit button, but when radio box is checked be sent automaticaly to a link.
Don`t know if this is right or not but i have seen to other websites this kind of sort.
Is this possible without javascript or jquery?

http://jsfiddle.net/ryBs6/47/ - Update jsfiddle
$("input[type='radio']").on("click",function(){window.open($(this).attr("href"))})
anyway this would work , because if i right click and open link in new tab it works , but single click doesnt work, i dont know if this is disabled for security reasons or what !
http://jsfiddle.net/prollygeek/6vCdX/
<input type="radio" name="order" id="noi" value="noi">
<label for="noi">Most Recent</label>

If you REALLY don't want to use Javascript, try wrapping the input and the label in an anchor
<input type="radio" />
If you want to use some javascript, do
<input onclick="window.open('http://google.com');" />
Or if you don't want to use the onclick attribute, use ProllyGeek's answer (I like his answer the best):
$("input[type='radio']").on("click",function(){window.open($(this).attr("href"))})

<script>
$(function(){
$("input").change(function() {
if(this.checked) {
window.location = this.value;
}
});
});
</script>
<input type="radio" name="order" id="noi" value="http://stackoverflow.com">
<label for="noi">Most Recent</label>
<input type="radio" name="order" id="vechi" value="http://stackoverflow.com" >
<label for="vechi">Most Old</label>
<input type="radio" name="order" id="aprec" value="http://stackoverflow.com" >
<label for="aprec">Most Liked</label>
FIDDLE DEMO

Without jquery:
var inputs = document.getElementsByTagName('input');
Array.prototype.forEach.call(inputs, function(item){
item.addEventListener('change', function(e){;
location.href = e.srcElement.value; // Redirect to value
});
});

<input type="radio" data-href='https://www.google.co.in/?gfe_rd=cr&ei=9l5FU5L8C6KL8QfOz4GABA' name="order" id="noi" value="noi">
<label for="noi">Most Recent</label>
<input type="radio" data-href='https://www.google.co.in/?gfe_rd=cr&ei=9l5FU5L8C6KL8QfOz4GABA' name="order" id="vechi" value="vechi" >
<label for="vechi">Most Old</label>
<input type="radio" data-href='https://www.google.co.in/?gfe_rd=cr&ei=9l5FU5L8C6KL8QfOz4GABA' name="order" id="aprec" value="aprec" >
<label for="aprec">Most Liked</label>
This should be your html
$('input[type='radio']').click(function()
{
window.location=$(this).attr('data-href')
});
You js here
Demo
Now without javascript or jquery
<input type="radio" name="order" id="vechi" value="vechi" >

on button click show Radio button value is not working when radio value is changed

I am using following on button click inline javascript to show Radio button value. But it is always showing English even if i change the value
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="English" checked="checked">English
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="Tamil">Tamil
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="Hindi">Hindi</div><br>
<input type="button" class="button5" value="Continue" onclick="alert(document.getElementById('LanguageSelect').value);" />
my requirement is, need to show which radio is selected !

Please change the IDs of the element, and then depending on the value, show an element.
Otherwise, DOM cannot do that on itself.
Solution
Remove the id="LanguageSelect" from the HTML, because even if some other is checked, the current element will still have the id property. Here is the example of your code:
Here is the fiddle where I tested your code: http://jsfiddle.net/afzaal_ahmad_zeeshan/q25ba/
So, once you remove that, you'll get the problem fixed.
When you're selecting the value, it will look up for the first element, it will have the value of English, and will alert!
You can either use jQuery or check for the checkness of the elements:
jQuery
$('input[type=radio]:checked').val(); // check for the checked radio
This is easy and simple! I would recommend you this.
However, if you want to get the value of the radio buttons using JavaScript, try this:
JavaScript
/* this event to get triggered on click */
function checkCheckness () {
var radioButton = document.getElementsByName("LanguageSelect");
/* always remember, name should be similar, ID MUST NEVER be similar
* using similar ID among different elements is illegal in HTML */
if(radioButton[0].checked) {
alert(radioButton[0].value);
}
/* add some else statements */
}

If you have only three options, the following solution would be reasonable:
<input type="radio" name="LanguageSelect" id="LanguageSelect1" value="English" checked="checked">English
<input type="radio" name="LanguageSelect" id="LanguageSelect2" value="Tamil">Tamil
<input type="radio" name="LanguageSelect" id="LanguageSelect3" value="Hindi">Hindi</div><br>
<input type="button" class="button5" value="Continue" onclick="alertValue()" />
and then in a script define the alertValue function.
alertValue = function(){
var language1 = document.getElementById('LanguageSelect1');
var language2 = document.getElementById('LanguageSelect2');
var language3 = document.getElementById('LanguageSelect3');
if(language1.checked)
alert(language1.value);
if(language2.checked)
alert(language2.value);
if(language3.checked)
alert(language3.value);
}
Check this one please Fiddle. I have tested there this solution.
If you don't have problem on selecting the elements with another way, then another approach would be the following:
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="English" checked="checked">English
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="Tamil">Tamil
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="Hindi">Hindi</div><br>
<input type="button" class="button5" value="Continue" onclick="alertValue()" />
and the corresponding js function:
alertValue = function(){
var radios = document.getElementsByTagName("input");
for (var i=0;i<radios.length;i++)
if (radios[i].checked)
alert(radios[i].value);
}
Check this one please FiddleV2. I have tested there this solution.

<input type="radio" name="LanguageSelect" id="LanguageSelect" value="English" checked="checked">English
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="Tamil">Tamil
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="Hindi">Hindi</div><br>
<input type="button" class="button5" value="Continue" onclick="clickable()" />
function clickable(){
var val=document.querySelector('input[name="LanguageSelect"]:checked').value;
alert(val);
}

i did it myself...
onclick='if(document.getElementById(\'LanguageSelect1\').checked==true)
{alert(document.getElementById(\'LanguageSelect1\').value);}
if(document.getElementById(\'LanguageSelect2\').checked==true)
{alert(document.getElementById(\'LanguageSelect2\').value);}
if((document.getElementById(\'LanguageSelect3\').checked==true)
{alert(document.getElementById(\'LanguageSelect3\').value);}'

jQuery Radio Button function not working properly

I have a form with two radio buttons and a submit button which leads to a specific form based upon the user's selection.
I wanted to use jQuery to change between the two buttons but have gotten myself a bit lost.
Here is my javascript from another file in the proj:
function goTo()
{
var yesButton = $('#yesRad');
var noButton = $('#noRad');
if (yesButton[0].checked)
{
submitForm('yesForm') && noButton.Checked==false;
}
else (noButton[1].checked)
{
submitForm('noForm') && yesButton.Checked==false;
}
Inside the jsp I have the following code:
<form:form action="interested" commandName="user" name="yesForm" id="yesForm">
<input type="hidden" name="state" value="<c:out value="${requestScope.state}"/>" />
<input type="hidden" id="address" name="address" value="${user.address}" />
<input type="hidden" name="mode" value="1" />
<input type="radio" name ="radio"id="yesRad" value="yesForm" checked="checked" />Yes<br>
</form:form>
<form:form action="notinterested" commandName="user" name="noForm" id="noForm">
<input type="hidden" name="state" value="<c:out value="${requestScope.state}"/>" />
<input type="hidden" id="address" name="address" value="${user.address}" />
<input type="hidden" name="mode" value="1" />
<input type="radio" name="radio" id="noRad" value="noForm" />No<br>
</form:form>
Submit
<script>
$("#yesRad").change(function(){
var $input = $("#yesRad");
var $inputb = $("#noRad");
if($inputb.is(':checked'))
$("#yesRad").prop("checked", false);
else if($input.is(':checked'))
$("#yesRad").prop("checked",true) && $("#noRad").prop("checked",false);
});
</script>
I have gotten some functionality out of my jQuery but it's definitely far from correct..
I hope I was clear and thorough in my question. Thanks in advance!!

To begin with, don't use prop, use attr. prop is slower.
You've defined variables so let's not look them up again. In your if/else statement just use the variables.
I'm not entirely sure what you're trying to do with the &&. I suspect you're trying to set the value of the two inputs. If so, they should be separate statements. If inputb is checked there is no reason to set it to checked, so we can remove that piece.
You probably want this change to fire on both inputs.
$("#yesRad, #noRad").change(function(){
var $input = $("#yesRad");
var $inputb = $("#noRad");
if($inputb.is(':checked')){
$input.attr("checked", false);
} else if($input.is(':checked')){
$inputb.attr("checked",false);
}
});

Solved: Using javascript and taking the radio buttons out of the separate form elements.
First let's take a look at the JSP form elements involved:
<form:form action="interested" commandName="user" name="yesForm" id="yesForm">
<input type="hidden" name="state" value="<c:out value="${requestScope.state}"/>" />
<input type="hidden" id="address" name="address" value="${user.address}" />
</form:form>
<form:form action="notinterested" commandName="user" name="noForm" id="noForm">
<input type="hidden" name="state" value="<c:out value="${requestScope.state}"/>" />
<input type="hidden" id="address" name="address" value="${user.address}" />
</form:form>
<input name="radio" type="radio" id="Yes" value="yes" />Yes<br>
<input name="radio" type="radio" id="No" value="no"/>No<br>
What I did here was simply take the radio buttons out of the separate forms and grouped them together...pretty obvious; now let's look at the javascript file.
function goHere()
{
var yesButton = $('#Yes');
var noButton = $('#No');
var str ="Please select an option first then press the 'Submit' button";
if (yesButton[0].checked)
{
submitForm('yesForm');
}
else if (noButton[0].checked)
{
submitForm('noForm');
}
else
{
document.write(str.fontcolor.font("red"));
}
}
As you can see the function 'goHere();' is going to tell the submit button in the following code where we want to go based on the user's selection on our radio buttons.
Here's the call from our javascript function in a submit button on the form...
<div class="button-panel" id="Submit"><span class="buttons buttons-left"></span>
<button type="button" class="buttons buttons-middle" name="submitBtn" onClick="goHere();">Submit</button>
<span class="buttons buttons-right"></span>
That's it!! Simply put; sometimes, while it's invaluable to learn something new, if it's not broke--etc. Hope this helps someone later on down the line!