We Keep Coding

how to get javascript selected radio value and replace with wp do_shortcode id's value?

I want to put selected radio value in shordcode id.
do_shortcode is form code generated form Cff wp plugin
<section>
<div class="container">
<div class="navication">
<form id="mainForm" name="mainForm">
<label for="bii"><input type="radio" id="bii" class="subvisa" name="visaclass" value="9"> Business Innovation & Investment (Provisional Visa)</label>
<label for="sdv"><input type="radio" id="sdv" class="subvisa" name="visaclass" value="10"> Skilled Dependent Visa</label>
<label for="snv"><input type="radio" id="snv" class="subvisa" name="visaclass" value="11"> Skilled Nominated Visa</label>
<label for="srv"><input type="radio" id="srv" class="subvisa" name="visaclass" value="12"> Skilled Regional (Provisional) Visa</label>
<label for="swrv"><input type="radio" id="swrv" class="subvisa" name="visaclass" value="13"> Skilled Worked (Provisional) Visa</label>
<div id="result">navee</div>
</form>
</div>
<div class="form11"> <?php echo do_shortcode('[CP_CALCULATED_FIELDS id="11"]'); ?> </div>
</div>
</section>

display input at another page

<h1>User Review</h1>
<p><em style="font-weight:bold">Still not convinced? </em><br><br> Well let's take a look and see what our </p>
<p>users have to say about RedPanda.</p>
<nav><h1 id="r1" id="comment"> Amazing <br id='rating_1'><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></h1></nav>
<nav><h1 id="r1">Brilliant <br><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></h1></nav>
<nav><h1 id="r1">Good <br><span>★</span><span>★</span><span>★</span><span>☆</span><span>☆</span></h1></nav>
<nav><h1 id="r1">Ugly Logo <br><span>★</span><span>★</span><span>☆</span><span>☆</span><span>☆</span></h1></nav>
<nav><h1 id="r1">Free Software <br><span>★</span><span>★</span><span>★</span><span>☆</span><span>☆</span></h1></nav><br>
You can write your review here :)
Above is the user review html page
<form action="userreview.html" onsubmit="tosubmit()">
<div style="padding-bottom: 18px;">First Name:<span style="color: red;"> </span><br/>
<input type="text" name="firstname">
<br>
<div style="padding-bottom: 18px;">Last Name:<span style="color: red;"> </span><br/>
<input type="text" name="lastname">
<br>
<div style="padding-bottom: 18px;">Review:<span style="color: red;"> </span><br/>
<textarea id="data_8" ${readonly} name="data_8" style="width : 450px;" rows="10" class="form-control"></textarea>
<nav>
<fieldset class="rating">
<legend>Please rate:</legend>
<input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">★★★★★</label>
<input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">★★★★</label>
<input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">★★★</label>
<input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">★★</label>
<input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">★</label>
</fieldset>
</nav>
<div style="padding-bottom: 18px;">Would you recommend this product?<span style="color: red;"> *</span><br/>
<span><input type="radio" id="data_9_0" name="data_9" value="Yes"/> Yes</span><br/>
<span><input type="radio" id="data_9_1" name="data_9" value="No"/> No</span><br/>
<span><input type="radio" id="data_9_2" name="data_9" value="I am not sure"/> I am not sure</span><br/>
</br>
<input type="submit" value="Submit">
</div>
</form>
This is the form page where users put in their review and their rating. I want the input to replace one of the reviews that i had put on my html at the user review page. Can someone help me ??? thanks
(for example when i put my opinion on this form page, then when i submit the opinion i put will be appear as one of the review on the user review page)
I totally have no idea how to start this so it will be good if some suggestion is given to me thanks

I think what you are looking for is making a database to hold all the reviews. Then you can use php to make the entries in the database and to show all the reviews in the database.

I am sort of confused by what you want but I am guessing that you have that user review form that you want to put on a page. You have multiple ways to do that. My personal favorite is doing it in PHP but there are other ways as well.
HTML:
<div w3-include-html="userreview.html"></div>
PHP:
include_once 'userreview.html';
jQuery:
<script>
$(function(){
$("#user-review").load("userreview.html");
});
</script>
<div id="user-review"></div>
iFrame:
<iframe src="userreview.html"></iframe>
Any one of these should work. If this helped please click the check mark.

Show/Hide IDs with multiple radio buttons and IDs

So I have run into a little problem. I am making a Contact Form that changes according to the Users needs.
This is my html code. My goal is to First, Hide most of the Content with the first set of raio buttons. I actually managed to get that with this Javascript:
$(function() {
$('#report').on('click', function() {
if ($(this).is(':checked')) {
$('#phonenumber').hide();
$('#dateofplay').hide();
$('#customertype').hide();
$('#studentprices').hide();
$('#privateprices').hide();
$('#companyprices').hide();
$('#customsetup').hide();
} else {
$('#phonenumber').show();
$('#dateofplay').show();
$('#customertype').show();
$('#studentprices').show();
$('#privateprices').show();
$('#companyprices').show();
$('#customsetup').show();
}
})
$('#booking').on('click', function() {
if ($(this).is(':checked')) {
$('#phonenumber').show();
$('#dateofplay').show();
$('#customertype').show();
$('#studentprices').show();
$('#privateprices').show();
$('#companyprices').show();
$('#customsetup').show();
} else {
$('#phonenumber').hide();
$('#dateofplay').hide();
$('#customertype').hide();
$('#studentprices').hide();
$('#privateprices').hide();
$('#companyprices').hide();
$('#customsetup').hide();
}
})
$('#student').on('click', function() {
if ($(this).is(':checked')) {
$('#privateprices').hide();
$('#companyprices').hide();
} else {
$('#privateprices').show();
$('#companyprices').show();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div role="main" class="ui-content" align="center">
<div class="ui-content-spacer">
<h3 class="ui-bar ui-bar-a ui-corner-all ui-content-spacer">
Booking Form
</h3>
<div class="ui-body ui-body-a ui-corner-all ui-content-spacer">
<form method="post" action="">
<div class="form-field-contain">
<fieldset data-role="controlgroup">
<legend>While the page is still under developement please define your inquiry: </legend>
<input type="radio" name="settings" id="report" value="report">
<label for="report">Bug Report</label>
<input type="radio" name="settings" id="booking" value="booking" checked="checked">
<label for="booking">Booking</label>
</fieldset>
</div>
<div class="form-field-contain ui-field-contain">
<label for="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" value="" placeholder="First Name...">
</div>
<div class="form-field-contain ui-field-contain">
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" id="lastname" value="" placeholder="Last Name...">
</div>
<div class="form-field-contain ui-field-contain">
<label for="email">E-Mail</label>
<input type="email" name="email" id="email" value="" placeholder="E-Mail...">
</div>
<div class="form-field-contain ui-field-contain" id="phonenumber">
<label for="tel">Phone:</label>
<input type="tel" name="tel" id="tel" value="" placeholder="Phone #...">
</div>
<div class="form-field-contain ui-field-contain" id="dateofplay">
<label for="date">Date of event:</label>
<input type="date" name="date" id="date" value="" placeholder="Please choose a Date">
</div>
<div class="form-field-contain ui-field-contain">
<label for="message">Write a quick Message:</label>
<textarea cols="40" rows="8" name="message" id="message" placeholder="Your Message here..."></textarea>
</div>
<div class="form-field-contain" id="customertype">
<fieldset data-role="controlgroup">
<label><input type="radio" name="customertype" id="student" value="Student/Apprentice">Stundent/Apprentice</label>
<label><input type="radio" name="customertype" id="private" value="private" checked="checked">Private</label>
<label><input type="radio" name="customertype" id="company" value="company">Company</label>
</fieldset>
</div>
<div class="form-field-contain" id="studentprices">
<fieldset data-role="controlgroup">
<label><input type="radio" name="studentprice" id="studentminimal" value="studentminimal" checked="checked">Minimal</label>
<label><input type="radio" name="studentprice" id="studentsoundonly" value="studentsoundonly">Sound Only</label>
<label><input type="radio" name="studentprice" id="studentsoundandlight" value="studentsoundandlight">Sound and Light</label>
<label><input type="radio" name="studentprice" id="studentpartypackage" value="studentpartypackage">Total Party Package</label>
<label><input type="radio" name="studentprice" id="studentcustom" value="0">Custom</label>
</fieldset>
</div>
<div class="form-field-contain" id="privateprices">
<fieldset data-role="controlgroup">
<label><input type="radio" name="privateprice" id="minimal" value="150" checked="checked">Minimal</label>
<label><input type="radio" name="privateprice" id="soundonly" value="200">Sound Only</label>
<label><input type="radio" name="privateprice" id="soundandlight" value="300">Sound and Light</label>
<label><input type="radio" name="privateprice" id="partypackage" value="400">Total Party Package</label>
<label><input type="radio" name="privateprice" id="custom" value="0">Custom</label>
</fieldset>
</div>
<div class="form-field-contain" id="companyprices">
<fieldset data-role="controlgroup">
<label><input type="radio" name="companyprice" id="companyminimal" value="200" checked="checked">Minimal</label>
<label><input type="radio" name="companyprice" id="companysoundonly" value="300">Sound Only</label>
<label><input type="radio" name="companyprice" id="companysoundandlight" value="400">Sound and Light</label>
<label><input type="radio" name="companyprice" id="companypartypackage" value="500">Total Party Package</label>
<label><input type="radio" name="companyprice" id="companycustom" value="0">Custom</label>
</fieldset>
</div>
<div class="form-field-contain" id="customsetup">
<fieldset data-role="controlgroup" id="customsetup">
<legend>Custom choices:</legend>
<label><input type="checkbox" name="speakers" id="speakers" value="">Speakers</label>
<label><input type="checkbox" name="subwoofer" id="subwoofer" value="">Subwoofer</label>
<label><input type="checkbox" name="lighting" id="lighting" value="">Lighting</label>
<label><input type="checkbox" name="strobe" id="strobe" value="">Strobelight</label>
<label><input type="checkbox" name="fog" id="fog" value="">Fogmachine</label>
<label><input type="checkbox" name="table" id="table" value="">Table</label>
</fieldset>
</div>
<div class="form-field-contain">
<input type="submit" name="submit" value="Submit" data-inline="true">
<input type="reset" name="reset" value="Reset" data-inline="true">
</div>
</form>
</div>
</div>
</div>
I think the problem is that, because the first show/hide function is hiding/showing the ID's it overrides any following function. I can't wrap my head around how I can continue the code so the radio buttons that are not required are hidden.
So if,
#student is selected, #privateprices and #companyprices choices are hidden
#private is selected, #studentprices and #companyprices choices are hidden
#company is selected, #studentprices and #privateprices choices are hidden
Is it even possible or is there a easier more effective method of achieving this? Especially when I start creating the php for the form? Thanks in advance
EDIT: The last piece of code in the Javascript is my attempt hide the first set of radiobuttons.

You can check which radio button is selected in page loading and show / hide the panels. Please see working fiddle here:
https://jsfiddle.net/ranjitsachin/Leav016c/2/
$('#student').on('click', function() {
if ($(this).is(':checked')) {
$("#studentprices").show();
$('#privateprices, #companyprices').hide();
}
});
$('#private').on('click', function() {
if ($(this).is(':checked')) {
$("#privateprices").show();
$('#studentprices, #companyprices').hide();
}
});
$('#company').on('click', function() {
if ($(this).is(':checked')) {
$("#companyprices").show();
$('#studentprices, #privateprices').hide();
}
});

Here is a working pen on how I would do it. http://codepen.io/anon/pen/jBryOa
In this pen, i added the classes of report-group and booking-group to the respective divs, added a class of hide-group to the css with a setting of display: none; and then add and remove the class hide-group based on which radio button is checked. I also added the class hide-group in the html to the div's that need to be initially hidden.
I did not add the groups to every div. just enough to show you what you need to do.

nest radio button selection - javascript

I am working on my personal site and I am trying to nest my radio buttons.
I know I am supposed to have javascript running to do what I need it to do but I cant get a clear answer. What I am trying to do is as follows.
Options number 2 and 6 both have sub options to go with them. But I want that if i select 1 or 3-5 or 7 then the user cannot select any of the subs. and if the user selects a sub by mistake and tries to select one of the aforementioned numbers then it will clear the sub selection. please help. Or at lease can some one point me in the right direction? thanks so much.
<div class="one">
<div class="two">
<div class="three">
<div class="four">
<label class="five six">Section</label>
<div class="seven">
<label class="ten">
<input value="option_1" name="radios" type="radio" />
option 1</label>
</div>
<div class="seven">
<label class="ten">
<input value="option_2" name="radios" type="radio" />
option 2</label>
<br>
<div class="one">
<div class="one">
<div class="two">
<div class="three">
<div class="four">
<div class="eight">
<label class="nine">
<input type="radio" name="inline radio" value="sub_1">
Sub 1</label>
<label class="nine">
<input type="radio" name="inline radio" value="sub_2">
Sub 2</label>
<label class="nine">
<input type="radio" name="inline radio" value="sub_3">
Sub 3</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="seven">
<label class="ten">
<input value="option_3" name="radios" type="radio" />
option 3</label>
</div>
<div class="seven">
<label class="ten">
<input value="option_4" name="radios" type="radio" />
option 4</label>
</div>
<div class="seven">
<label class="ten">
<input value="option_5" name="radios" type="radio" />
option 5</label>
</div>
<div class="seven">
<label class="ten">
<input value="option_6" name="radios" type="radio" />
option 6</label>
<div class="one">
<div class="two">
<div class="three">
<div class="four">
<div class="eight">
<label class="nine">
<input type="radio" name="inline radio" value="sub_1">
Sub 1</label>
<label class="nine">
<input type="radio" name="inline radio" value="sub_2">
Sub 2</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="seven">
<label class="ten">
<input value="option_7" name="radios" type="radio" />
option 7</label>
</div>
</div>
</div>
</div>
</div>

Here's a little something using Jquery that might work if I understood your requirements correctly. The HTML is a dumbed down version of yours just to demonstrate the script.
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$("input[type=radio]").on("change",function(){
if($(this).hasClass("two") || $(this).hasClass("six") || $(this).hasClass("sub"))
$(".sub").removeAttr("disabled");
else
$(".sub").attr("checked",false).attr("disabled","disabled");
});
});
</script>
</head>
<body>
<form>
<input type=radio name="lvl1" class="one" value=""> Option 1<br>
<input type=radio name="lvl1" class="two" value=""> Option 2<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 1<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 2<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 3<br>
<input type=radio name="lvl1" class="three" value=""> Option 3<br>
<input type=radio name="lvl1" class="four" value=""> Option 4<br>
<input type=radio name="lvl1" class="five" value=""> Option 5<br>
<input type=radio name="lvl1" class="six" value=""> Option 6<br>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 1<br>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 2<br>
<input type=radio name="lvl1" class="seven" value=""> Option 7<br>
</form>
</body>
</html>
Here's the fiddle to check online: https://jsfiddle.net/bds87fjt/
The same solution as above using pure Javascript:-
<!doctype html>
<html>
<head>
<script>
function disableSub(){
sub = document.querySelectorAll(".sub");
for(i=0; i<sub.length; i++){
sub[i].checked=false;
sub[i].disabled=true;
}
}
function enableSub(){
sub = document.querySelectorAll(".sub");
for(i=0; i<sub.length; i++){
sub[i].disabled=false;
}
}
</script>
</head>
<body>
<form>
<input type=radio name="lvl1" onclick=disableSub(); class="one" value=""> Option 1<br>
<input type=radio name="lvl1" onclick=enableSub(); class="two" value=""> Option 2<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 1<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 2<br>
<input type=radio name="lvl2" class="sub two-sub" value=""> Sub 3<br>
<input type=radio name="lvl1" onclick=disableSub(); class="three" value=""> Option 3<br>
<input type=radio name="lvl1" onclick=disableSub(); class="four" value=""> Option 4<br>
<input type=radio name="lvl1" onclick=disableSub(); class="five" value=""> Option 5<br>
<input type=radio name="lvl1" onclick=enableSub(); class="six" value=""> Option 6<br>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 1<br>
<input type=radio name="lvl3" class="sub six-sub" value=""> Sub 2<br>
<input type=radio name="lvl1" onclick=disableSub(); class="seven" value=""> Option 7<br>
</form>
</body>
</html>
Here's the fiddle for above: https://jsfiddle.net/0omtop0t/
And here's another neat little solution using just HTML and CSS: http://jsfiddle.net/NhXUV/
Not sure, it'll work in your case though. Worth checking out.

I'd definitely go with JavaScript for this one.
Basically, you could write a function that would be called whenever a radio button from a div of the class, lets call it gotNestedStuff, has his selection changed. The toggle will show/hide the div with the class nestedStuff that contains the sub-options that can only be selected if the main option is.
Here's the basic function (with jQuery):
<script type="text/javascript">
//let's hide the nested stuff on page load
$(document).ready(function() {
$('.nestedStuff').hide();
});
//on click on an element that has class "gotNestedStuff", show it's hidden content
$('.gotNestedStuff .option').on('change', function(e) {
console.log($(e.relatedTarget));
$(e.target).parent('.gotNestedStuff').children('.nestedStuff').toggle();
});
</script>
Working with this HTML for example :
<div>
<div class="optionContainer">
<input class="option" type="radio" name="option" value="1">Option 1
</div>
<div class="optionContainer gotNestedStuff">
<input class="option" type="radio" name="option" value="2">Option 2<br>
<div class="optionContainer nestedStuff">
<input class="option" type="radio" name="option" value="2.1">Option 2.1<br>
<input class="option" type="radio" name="option" value="2.2">Option 2.2<br>
</div>
</div>
<div class="optionContainer">
<input class="option" type="radio" name="option" value="3">Option 3<br>
<div>
</div>
You could also call a function "onclick" from your element that would validate if an item with nested stuff hidden is selected, that it should show it to the user.
Ex. <input type="radio" onclick="myfunction()" />

Previous correct radio buttons disappearing when I miss a radio button in the middle

I'm facing one issue here,
I am trying to validate at least one radio button to be answered to each question,
but the error here is when I miss some question to answer, I am getting alert, it is fine, but my previous correct answers also disappearing, I mean the page is loading from the start it seems.
Workingfiddle here.
You can see my sample question form here:
<form name="myform" >
<div id="Q1" class="question">
<h3>1. How convenient is our company to use?</h3>
</div>
<div id="A1"class="answers">
<input type="radio" name="Q1ans" value="1">Extremely convenient<br>
<input type="radio" name="Q1ans" value="2">Very convenient<br>
<input type="radio" name="Q1ans" value="3">Moderately convenient<br>
<input type="radio" name="Q1ans" value="4">Not at all convenient<br>
</div>
<div id="Q2" class="question">
<h3>2. How professional is our company?</h3>
</div>
<div id="A2"class="answers">
<input type="radio" name="Q2ans" value="1">Extremely professional<br>
<input type="radio" name="Q2ans" value="2">Very professional<br>
<input type="radio" name="Q2ans" value="3">Moderately professional<br>
<input type="radio" name="Q2ans" value="4">Not at all professional<br>
</div>
<div id="Q3" class="question">
<h3>3. Compared to our competitors, is our product quality better, worse, or about the same?</h3>
</div>
<div id="A3"class="answers">
<input type="radio" name="Q3ans" value="1">Much better<br>
<input type="radio" name="Q3ans" value="2">some what better<br>
<input type="radio" name="Q3ans" value="3">slightly better<br>
<input type="radio" name="Q3ans" value="4">worse<br>
</div>
<div id="Q4" class="question">
<h3>4. How responsive is our company?</h3>
</div>
<div id="A4"class="answers">
<input type="radio" name="Q4ans" value="1">Much better<br>
<input type="radio" name="Q4ans" value="2">some what better<br>
<input type="radio" name="Q4ans" value="3">slightly better<br>
<input type="radio" name="Q4ans" value="4">worse<br>
</div>
<div id="Q5" class="question">
<h3>5. Do you like our company, neither like nor dislike it, or dislike it?</h3>
</div>
<div id="A5"class="answers">
<input type="radio" name="Q5ans" value="1">Like a great deal<br>
<input type="radio" name="Q5ans" value="2">Like a little<br>
<input type="radio" name="Q5ans" value="3">Dislike a little<br>
<input type="radio" name="Q5ans" value="4">Dislike a great deal<br>
</div><br><br>
<button type="submit" onclick="validate()">submit</button>
</form>

You could simply change:
onclick="validate()"
to:
onclick="return validate()"
and it will have the desired behavior. I think this is what you were trying to do, but the onclick() call never returned the value from validate().