We Keep Coding

Can't get radio values to send

I am working on making a form that should take the three questions in the form and add them up. If the end value is equal to three it should open call another function called toggletab() when the submit button is clicked. I tried this with it telling me pass or false depending on the value but it won't work. I am not good at JavaScript and it is really confusing to me. It looks like it is running each question separately instead of waiting until the end and calculating them all together. I cannot figure out why this is happening. I also am not sure how to call another function that is in a separate file if someone would know how to do that.
Thank you. This is the HTML
<fieldset class="article">
<legend>Have you had your record expunged before?</legend>
<input type="radio" name="field1" value="0" />
<label>
Yes
</label>
<input type="radio" name="field1" value="1" />
<label>
No
</label>
</fieldset>
<fieldset class="article">
<legend>Do you have any charges pending against you?</legend>
<input type="radio" name="field2" value="0" onclick="getscores2(this)" />
<label>
Yes
</label>
<input type="radio" name="field2" value="1" onclick="getscores2(this)" />
<label>
No
</label>
</fieldset>
<fieldset>
<legend>Is your drivers license suspended?</legend>
<input type="radio" name="field3" value="0" onclick="getscores3(this)"/>
<label>
Yes
</label>
<input type="radio" name="field3" value="1" onclick="getscores3(this)"/>
<label>
No
</label>
</fieldset>
<fieldset id="submitbutton" class="article">
<input type="button" id="submit" value="submit" onclick='answer()' />
</fieldset>
</form>
<p id="totalScore">this is answer </p>
<button onclick = "toggletab()" id="tabButton"><h3>first results</h3>
</button>
<form>
<div id="first" >
<fieldset>
<label>
<fieldset class="article">
<legend>Have you had your record expunged before?</legend>
<input type="radio" name="field1" value="0" />
<label>
Yes
</label>
<input type="radio" name="field1" value="1" />
<label>
No
</label>
</fieldset>
<fieldset class="article">
<legend>Do you have any charges pending against you?</legend>
<input type="radio" name="field2" value="0" onclick="getscores2(this)" />
<label>
Yes
</label>
<input type="radio" name="field2" value="1" onclick="getscores2(this)" />
<label>
No
</label>
</fieldset>
<fieldset>
<legend>Is your drivers license suspended?</legend>
<input type="radio" name="field3" value="0"
onclick="getscores3(this)"/>
<label>
Yes
</label>
<input type="radio" name="field3" value="1"
onclick="getscores3(this)"/>
<label>
No
</label>
</fieldset>
<fieldset id="submitbutton" class="article">
<input type="button" id="submit" value="submit" onclick='answer()' />
</fieldset>
</form>
<p id="totalScore">this is answer </p>
<button onclick = "toggletab()" id="tabButton"><h3>first results</h3>
</button>
<form>
<div id="first" >
<fieldset>
<label>
<legend>Is your arrest record a:</legend>
<input type="radio" name="field4" value="1"
onclick="getscores4(this)"/>
IC 35-38-9-1
</label>
<label>
<input type="radio" name="field4" value="2"
onclick="getscores4(this)"/>
IC 35-38-9-2
</label>
<label>
<input type="radio" name="field4" value="3"
onclick="getscores4(this)"/>
IC 35-38-9-3
</label>
<label>
<input type="radio" name="field4" value="4"
onclick="getscores4(this)"/>
IC 35-38-9-4
</label>
<label>
<input type="radio" name="field4" value="5"
onclick="getscores4(this)"/>
IC 35-38-9-5
</label>
</fieldset>
This is the JavaScript
function getscores1(score1) {
var getscores1 = (score1.value);
sendScores(getscores1);
}
function getscores2(score2) {
var getscores2 = (score2.value);
sendScores(getscores2);
}
function getscores3(score3) {
var getscores3 = (score3.value);
sendScores(getscores3);
}
function sendScores(getscores1, getscores2, getscores3){
var total = getscores1 + getscores2 + getscores3;
answer(total);
}
function answer(total) {
if (total == 3) {
document.getElementById('totalScore').innerHTML = "false";
} else{
document.getElementById('totalScore').innerHTML = "pass";
}
}

The variables your functions are defining are not global. Their values disappear after the function returns. So your sendScores function does not actually have access to those values unless you pass them as arguments. But while sendScores takes 3 arguments, you are only sending one (the one you have access too when you call the function).
One option would be to store these as global variables, but global variables are Generally Evil™. Alternatively, you can get all the values when you click submit. Here is a working example. Note this does not catch the case when the user does not respond to one or more of the questions. Click the "run snippet" button below to see it in action.
For your final question, you can put your js in a separate file and then put <script src="path/to/your/file/js"></script> in your html to load it.
function answer(total) {
var score = 0;
if (document.getElementById('exp_yes').checked) {
score++;
}
if (document.getElementById('chg_yes').checked) {
score++;
}
if (document.getElementById('sus_yes').checked) {
score++;
}
if (score > 0) {
document.getElementById('totalScore').innerHTML = "false";
} else {
document.getElementById('totalScore').innerHTML = "pass";
}
}
<fieldset class="article">
<legend>Have you had your record expunged before?</legend>
<input id=exp_yes type="radio" name="field1" value="0" />
<label>
Yes
</label>
<input id=exp_no type="radio" name="field1" value="1" />
<label>
No
</label>
</fieldset>
<fieldset class="article">
<legend>Do you have any charges pending against you?</legend>
<input id=chg_yes type="radio" name="field2" value="0" />
<label>
Yes
</label>
<input id=chg_no type="radio" name="field2" value="1" />
<label>
No
</label>
</fieldset>
<fieldset>
<legend>Is your drivers license suspended?</legend>
<input id=sus_yes type="radio" name="field3" value="0" />
<label>
Yes
</label>
<input id=sus_no type="radio" name="field3" value="1" />
<label>
No
</label>
</fieldset>
<fieldset id="submitbutton" class="article">
<input type="button" id="submit" value="submit" onclick='answer()' />
</fieldset>
</form>
<p id="totalScore">this is answer </p>

radio button show hide divs is not working properly

I have done some code for radio button group to show and hide the divs. but this code is not working properly. could you please look into this. Thank you.
<div class="col-md-7">
<div>
<h3 class="radio_heading">Radio Button Group</h3>
<form>
<label><input id="rdb1" type="radio" name="toggler" value="1" checked/>Book</label>
<label><input id="rdb2" type="radio" name="toggler" value="2" />Non-Book</label>
</form>
<div id="blk-1" class="toHide">
<form action="success1.html">
Name1:<input type="text" name="name">
<input type="submit" name="submit">
</form>
</div>
<div id="blk-2" class="toHide" style="display:none">
<form action="success1.html">
Name2:<input type="text" name="name">
<input type="submit" name="submit">
</form>
</div>
</div>
</div>
$(function() {
$("[name=toggler]").click(function(){
$('.toHide').hide();
$("#blk-"+$(this).val()).show('slow');
});
});

I copied and pasted your code, added the jQuery library, and it appears to work fine.
$(function() {
$("[name=toggler]").click(function(){
$('.toHide').hide();
$("#blk-"+$(this).val()).show('slow');
});
});
<div class="col-md-7">
<div>
<h3 class="radio_heading">Radio Button Group</h3>
<form>
<label><input id="rdb1" type="radio" name="toggler" value="1" checked/>Book</label>
<label><input id="rdb2" type="radio" name="toggler" value="2" />Non-Book</label>
</form>
<div id="blk-1" class="toHide">
<form action="success1.html">
Name1:<input type="text" name="name">
<input type="submit" name="submit">
</form>
</div>
<div id="blk-2" class="toHide" style="display:none">
<form action="success1.html">
Name2:<input type="text" name="name">
<input type="submit" name="submit">
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

Submit form on radio button check

How can I Submit the form sAddToBasket if a radio inside the form radioform gets checked ?
<form name="radioform" method="post" action="something1.php">
<input type="radio" onchange="this.form.submit();" class="option--input" id="radio1" name="radio" value="">
<input type="radio" onchange="this.form.submit();" class="option--input" id="radio2" name="radio" value="">
</form>
<form name="sAddToBasket" method="post" action="something2.php">
<input type="hidden" name="option1" value="value1"/>
<input type="hidden" name="option2" value="value2"/>
</form>

I would get rid of the JS in the DOM (your onchange=...) and do something like this:
$(document).ready( function() {
$("form[name=radioform] input").on("change", function() {
$("form[name=sAddtoBasket").submit();
}
});

You can try some thing like this
<form name="radioform" method="post" action="something1.php"> <input type="radio" onchange="document.getElementById('sAddToBasket').submit();" class="option--input" id="radio1" name="radio" value=""> <input type="radio" onchange="document.getElementById('sAddToBasket').submit();" class="option--input" id="radio2" name="radio" value=""> </form>
<form id='sAddToBasket' name="sAddToBasket" method="post" action="something2.php"> <input type="hidden" name="option1" value="value1"/> <input type="hidden" name="option2" value="value2"/>
</form>

onchange you can call a js function like below.
<input type="radio" onchange="formSubmit(this)" class="option--input" id="radio1" name="radio" value="">
<form id="sAddToBasket">
</form>
<script>
function formSubmit(radioObj){
if(radioObj.checked){
document.getElementById("sAddToBasket").submit();
}
}
</script>

just add a class to the radio buttons.
<form name="radioform" method="post" action="something1.php">
<input type="radio" class="option--input subForm" id="radio1" name="radio" value="">
<input type="radio" class="option--input subForm" id="radio2" name="radio" value="">
</form>
and on the script use this:
$(function(){
$('.subForm').click(function(){
if($(this).is(":checked")
$('form[name=sAddtoBasket]').submit();
})
})

jQuery Change Input text upon selection of radio button having multiple forms in same page

Im looking to do something like #JCOC611 did here: https://stackoverflow.com/a/5099898/3223200
In which you can change the TEXT value depending on the RADIO BUTTON selection
Who ever, I would like to have several forms in the same page, how can this be done?
The original code is
<input type="text" id="it" value="">
<input type="radio" name="hey" value="one">
<input type="radio" name="hey" value="two">
<input type="radio" name="hey" value="three">
<script>
$(document).ready(function(){
$("input[type=radio]").click(function(){
$("#it").val(this.value);
});
});
</script>
Demo here: http://jsfiddle.net/jcoc611/rhcd2/1/
And I would like something like this:
<form action="hello.php" name="form01" method="post">
<input type="hidden" name="productid" value="01" />
<input type="radio" name="price" value="1000">
<input type="radio" name="price" value="2000">
<input type="text" id="it" name="pricevalue" value="">
</form>
<form action="hello.php" name="form02" method="post">
<input type="hidden" name="productid" value="02" />
<input type="radio" name="price" value="6000">
<input type="radio" name="price" value="2400">
<input type="text" id="it" name="pricevalue" value="">
</form>
<form action="hello.php" name="form03" method="post">
<input type="hidden" name="productid" value="03" />
<input type="radio" name="price" value="500">
<input type="radio" name="price" value="700">
<input type="text" id="it" name="pricevalue" value="">
</form>
<script>
$(document).ready(function(){
$("input[type=radio]").click(function(){
$("#it").val(this.value);
});
});
</script>
Using multiple forms in the same page, but to use the same function
How can this be done?

Use:
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').find("input[type=text]").val(this.value);
});
});
jsFiddle example
By using .closest() and .find() you can pick the text input element closest to the relative radio button selected.
Note that IDs must be unique.

A bit less code if you use siblings().
$(document).ready(function(){
$("input[type=radio]").click(function(){
$(this).siblings("input[type=text]").val(this.value);
});
});
jsFiddle example

Forced selection in hidden / Backend using Javascript OR JQuery

I have regular form like this.
<form action="/domainchecker.php" method="post">
<input type="text" name="domain" size="20">
<fieldset>
<select name="ext">
<option>.com</option>
<option>.net</option>
<option>.org</option>
<option>.us</option>
<option>.info</option>
<option>.biz</option>
<option>.mobi</option>
<option>.name</option>
<option>.tv</option>
<option>.me</option>
</select>
</fieldset>
<input type="submit" value="Go">
</form>
This selectbox enables to select only one option.
What I want is Forced selection in hidden / backend for the first 5 options regardless user select it or not.
How can I achieve this using JavaScript OR JQuery ?
Thanks.

Since you are using PHP you can try this:
<form action="/domainchecker.php" method="post">
<input type="hidden" name="ext[]" value=".com">
<input type="hidden" name="ext[]" value=".net">
<input type="hidden" name="ext[]" value=".org">
<input type="hidden" name="ext[]" value=".us">
<input type="hidden" name="ext[]" value=".info">
<input type="text" name="domain" size="20">
<fieldset>
<select name="ext[]">
<option>.com</option>
<option>.net</option>
<option>.org</option>
<option>.us</option>
<option>.info</option>
<option>.biz</option>
<option>.mobi</option>
<option>.name</option>
<option>.tv</option>
<option>.me</option>
</select>
</fieldset>
<input type="submit" value="Go">
</form>
Note the brackets in the fields' names. In your PHP script you'll need something like:
$extensions = $_POST['ext'];
foreach ($extensions as $ext) {
#do something
}
Note that the $extensions array will contain duplicates if the user selected one of the first 5 entries in the dropdown.
You can also use checkboxes instead of a dropdown like this:
<form action="/domainchecker.php" method="post">
<input type="text" name="domain" size="20">
<fieldset>
<input type="checkbox" name="ext[]" value=".com" selected="true">
<input type="checkbox" name="ext[]" value=".net" selected="true">
<input type="checkbox" name="ext[]" value=".org" selected="true">
<input type="checkbox" name="ext[]" value=".us" selected="true">
<input type="checkbox" name="ext[]" value=".info" selected="true">
<input type="checkbox" name="ext[]" value=".biz">
<input type="checkbox" name="ext[]" value=".mobi">
<input type="checkbox" name="ext[]" value=".name">
<input type="checkbox" name="ext[]" value=".tv">
<input type="checkbox" name="ext[]" value=".me">
</select>
</fieldset>
<input type="submit" value="Go">
</form>
The PHP is the same, without the duplicate issue

Add them server-side.

you can't do multiple selection on your select if attribute multiple is not set
like this, then have default selection by setting the option's attribute selected="selected"
<fieldset>
<select name="ext" size="5" multiple="multiple" >
<option>.com</option>
<option>.net</option>
<option selected="selected">.org</option>
<option selected="selected">.us</option>
<option selected="selected">.info</option>
<option>.biz</option>
<option selected="selected">.mobi</option>
<option>.name</option>
<option>.tv</option>
<option>.me</option>
</select>
</fieldset>