Make Fieldset form text smaller after selecting an option
I am new to Javascript and JQuery and I am trying to create a kind of questionnaire style page.
Basically what I want to ask is a question, after I have selected an answer, make it smaller and then display the next question in its normal size.
I have most of the page working in terms of show and hide, but I can't seem to get the code to work when I try to make the original question text smaller.
I have read many tutorials and examples but none of them work, I would really appreciate any guidance.
Thanks in advance!
Here is my HTML
<form>
<fieldset class="form1">
<p>what problem is the customer having ?</p>
<input type="radio" name="issue" value="o - issue1" onClick="getIssueVar()">issue1<br/>
<input type="radio" name="issue" value="o - issue2" onClick="getIssueVar()">issue2<br/>
<input type="radio" name="issue" value="o - issue3" onClick="getIssueVar()">issue3<br/>
<input type="radio" name="issue" value="o - issue4" onClick="getIssueVar()">issue4<br/>
</fieldset>
</form>
<br/>
Here's my Javascript:
function getIssueVar() {
var xissue = document.getElementById("testform");
var issuetext = "";
var iissue;
for (iissue = 0; iissue < xissue.length ;iissue++) {
if (xissue[iissue].checked) {
issuetext=xissue[iissue].value;
break;
}
}
document.getElementById("faultissue").innerHTML = issuetext;
$(".form2").show();
$(".form1").css('font-size', '10px');
}
I have set my css:
.form1
{
font-size:14px;
}
so I thought I would use javascript / jquery to change the font size as soon as I clicked on the radio buttons.
What am I doing wrong?
source to share
Html
<form>
<fieldset class="form1">
<p>what problem is the customer having ?</p>
<input type="radio" name="issue" value="o - issue1" onClick="getIssueVar()" class="testform">issue1<br/>
<input type="radio" name="issue" value="o - issue2" onClick="getIssueVar()" class="testform">issue2<br/>
<input type="radio" name="issue" value="o - issue3" onClick="getIssueVar()" class="testform">issue3<br/>
<input type="radio" name="issue" value="o - issue4" onClick="getIssueVar()" class="testform">issue4<br/>
</fieldset>
</form>
<div id="faultissue"></div>
SCRIPT
function getIssueVar() {
debugger
var xissue = document.getElementsByClassName("testform");
var issuetext = "";
var iissue;
for (iissue = 0; iissue < xissue.length ;iissue++) {
if (xissue[iissue].checked) {
issuetext=xissue[iissue].value;
break;
}
}
document.getElementById("faultissue").innerHTML = issuetext;
$(".form2").show();
$(".form1").css('font-size', '10px');
}
DEMO
From your code, it seems that the class istestform
missing from the tagradio
. And the element having idfaultissue
is also missing.
source to share
Here is a jQuery solution using a delegated on () click-through approach.
<form>
<fieldset class="form1">
<p>what problem is the customer having ?</p>
<input type="radio" name="issue" value="o - issue1" >issue1
<br>
<input type="radio" name="issue" value="o - issue2" >issue2
<br>
<input type="radio" name="issue" value="o - issue3" >issue3
<br>
<input type="radio" name="issue" value="o - issue4" >issue4
</fieldset>
</form>
.minimize {
font-size: 0.5em;
}
$('fieldset').on('click', 'input[type="radio"]', function() {
$radio = $(this);
$fieldset = $radio.parent();
$fieldset.addClass('minimize');
});
jsFiddle: http://jsfiddle.net/w4L1g2dc/
I added a class, but you can set the CSS directly if you like.
source to share