i'm new to Javascript and Jquery and i am trying to create a kind of questionnaire style page.
Essentially i want to ask a question, then once i have chosen an answer make everything in smaller and then display the next question in normal size.
I have most of the page working in terms of showing and hiding but i cant seem to get the code to work when i try to make the initial question text smaller.
Ive read lots of tutorials and examples but none seem to work, i'd 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 is 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 was thinking i would use javascript/jquery to change the font size once ive clicked on the radio buttons.
What am i doing wrong ?
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 testform class is missing from radio button tag. And an element having id faultissue is missing too.
Here is a jQuery solution using a delegated on() click 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 could set the CSS directly if you wanted.
Related
i make a html site. there is questions on the site. i made it with form .After clicking on the button, I want to see all of the answers on the same page.i dont want as alert. how can i do it?
I apologize for the misspellings.
<script>
function findSelection()
{
var serieList=document.getElementsByName('serie')
for (var i=0; i<serieList.length;i++)
{
if(serieList[i].checked)
{
}
}
var markaList=document.getElementsByName('marka')
for (var i=0; i<markaList.length;i++)
{
if(markaList[i].checked)
{
alert(markaList[i].value)
}
}
var yerList=document.getElementsByName('yer')
for (var i=0; i<yerList.length;i++)
{
if(yerList[i].checked)
{
alert(yerList[i].value)
}
}
var nasilList=document.getElementsByName('nasil')
for (var i=0; i<nasilList.length;i++)
{
if(nasilList[i].checked)
{
alert(nasilList[i].value)
}
}
}
</script>
<html>
<head>
<title>Web Tasarım Anketi </title>
</head>
<body style="background-color:#d3ea93">
<center> <h1 style="color:red"> ANKET </h1> </center>
<form >
<fieldset><legend>Soru 1 </legend>
En sevdiğiniz yabancı dizi? </br>
<label> <input type="radio" name="serie" value="Game of Thrones">Game of Thrones </label>
<label> <input type="radio" name="serie" value="Person of İnterest">Person of Interest </label>
<label> <input type="radio" name="serie" value="South Park">South Park </label>
<label> <input type="radio" name="serie" value="Black Mirror">Black Mirror </label>
</fieldset>
</form>
<form >
<fieldset><legend>Soru 2 </legend>
En sevdiğiniz bilgisayar markası? </br>
<label> <input type="radio" name="marka" value="Asus">Asus </label>
<label> <input type="radio" name="marka" value="HP">HP </label>
<label> <input type="radio" name="marka" value="Toshiba">Toshiba </label>
<label> <input type="radio" name="marka" value="Dell">Dell </label>
</fieldset>
</form>
<form>
<fieldset><legend>Soru 3 </legend>
Nerede yaşamak istersiniz?</br>
<label> <input type="radio" name="yer" value="Türkiye">Türkiye </label>
<label> <input type="radio" name="yer" value="Mars">Mars </label>
<label> <input type="radio" name="yer" value="Avustralya">Avustralya </label>
<label> <input type="radio" name="yer" value="Yeni Zelanda">Yeni Zelanda </label>
</fieldset>
</form>
<form>
<fieldset><legend>Soru 4 </legend>
Nasıl ölmek istersiniz?</br>
<label> <input type="radio" name="nasil" value="Araba Kazasında ">Araba Kazası </label>
<label> <input type="radio" name="nasil" value="Uzay Boşluğunda">Uzay Boşluğunda </label>
<label> <input type="radio" name="nasil" value="Ecelimle">Ecelimle </label>
<label> <input type="radio" name="nasil" value="Maganda Kurşunu">Maganda Kurşunu </label>
</fieldset>
</form>
<input type="button" id="btnKaydet" value="Kaydet" onclick="findSelection()"></input>
</body>
</html>
You can use javascript to achieve this but ultimately you want to learn a server-side programming language, like php. To me php is the best option.
If you Google form and click the mozilla device docs for it you'll see an attribute called action, this attribute tells the form where to go or what to do (with inline javascript, but I highly recommend against this). You'll also find an attribute called method. Method is responsible for how the form handles the input values. The two most common values are post and get.
I usually only ever use post, because I'm posting the data to a script.
The most common use is something like
<form method="post" action="/area/scripts/post/form.php">
However, getting really fun with an mvc, would more look like:
<form method="post" action="<?php echo $this->getFormAction(); ?>">
Then in your form.php page you handle the data. To see what I mean, place this in your form.php for now:
<?php
var_dump($_POST) ;
This will display your form data.
To link it back to your idea of displaying on same page, you can also use ajax, however this means including jquery into your site. It 100% makes life easier but it does increase your sites size. Of course you can opt for the .min script but still, you include in every page, so..
Anyway. Using pure html I'm not sure is possible, javascript is a browser side programming language and I'm not sure entirely if you can assign values dynamically, you probably can but I'm no javascript expert.
I recommend using php for this as it also makes it secure (if you follow convention and do it correctly using safe code)
Also, I prefer this as a comment as an actual answer because it doesn't directly deal with your problem or its associated tags, but the character limit is not enough for a comment like this. Feel free to downvote if preferred and I'll simply remove if it gets to -3
Update after seeing comment
To combine variables in javascript you use + to concat strings.
E.g.
var message = document.getElementById('myId') + ' ' + document.getElementById('myIdTwo');
alert(message);
This only an example of how to use, but this should be what you're looking for.
Good luck!
you can do it via jquery give all your fields id
and write like this
<script>
$(document).ready(function()
{
$("#Button1).click(function()
{
$("#abc1").val($("#abc").val());
})
</script>
<body>
<input type="text" id="abc" />
<input id="Button1" type="button" value="button" />
<input type="text" id="abc1" />
</body>
in an attempt to make practical use of the skills I am learning on my web development course I am trying to create a website about the Vikings for my partner's Primary school class.
I have managed to get the HTML and CSS as I want it, but I'm struggling a little with the Javascript. it all looks fine to my mind but doesn't run as intended.
I have a quiz and a submit button. When clicked this button will reference a "checkresults" function in my .js file.
This should then calculate a result between 0 - 3 and post this result into the HTML page. I have designed the box the results will show in to be invisible until the "Submit" button is clicked. However, when ran the results box appears for only a second before disappearing and I cannot figure out why.
any help or advice would be very much appreciated!
//JAVASCRIPT//
function checkresults() {
var question1 = document.quiz.question1.value;
var question2 = document.quiz.question2.value;
var question3 = document.quiz.question3.value;
var correct = 0;
if (question1 == "793") {
correct++;
}
if (question2 == "Shield") {
correct++;
}
if (question3 == "1066") {
correct++;
}
var message = ["You're a real Viking!", "Not bad but you can do better!",
"Odin would not be pleased with your effort!"];
var range;
if (correct < 1) {
range = 2;
}
if (correct > 0 && correct < 3) {
range = 1;
}
if (correct > 2) {
range = 0;
}
document.getElementById("afterSubmit").style.visibility = "visible"
document.getElementById("message").innerHTML = message[ramge];
document.getElementById("correct").innerHTML = "You got " + correct + "
correct!";
}
//HTML//
<form id="quiz" name="quiz">
<p>When did the Vikings first invade Britain?</p>
<input type="radio" id="mc" name="question1" value="1066" />1066<br />
<input type="radio" id="mc" name="question1" value="793" />793<br />
<input type="radio" id="mc" name="question1" value="411" />411<br />
<input type="radio" id="mc" name="question1" value="1999" />1999<br />
<p>what did every man need before he was allowed to go Viking?</p>
<input type="radio" id="mc" name="question2" value="Shield" />Shield<br />
<input type="radio" id="mc"name="question2" value="Sword" />Sword<br />
<input type="radio" id="mc"name="question2" value="Cloak" />Cloak<br />
<input type="radio" id="mc" name-"question2" value="Gold" />Gold<br />
<p>when did the Viking age end?</p>
<input type="radio" id="mc" name="question3" value="793" />793<br />
<input type="radio" id="mc" name="question3" value="1999" />1999<br />
<input type="radio" id="mc" name="question3" value="1066" />1066<br />
<input type="radio" id="mc" name="question3" value="1500" />1500<br />
<input type="submit" id="button" value="Lets see how you did!" onclick =
"checkresults();">
</form>
<div id="afterSubmit">
<p id="message"></p>
<p id="correct"></p>
//CSS//
#afterSubmit {
visibility: hidden;
border-color: red;
border-style: solid;
border-width: 5px;
}
Your page is refreshing.
The best way to change this would be to move the function to the form onsubmit event.
//Remove the onclick
<input type="submit" id="button" value="Lets see how you did!" onclick="checkresults();">
Add the function and return false to the event on the form, so it cancels submission
//Add the onsubmit, notice the return false, so it cancels submission
<form id="quiz" name="quiz" onsubmit="checkresults();return false;">
I have two radio buttons. When I click on one, the other should become unchecked, and vice versa.
The code I've produced so far is not working:
<input type="radio" id="rbdemail" onclick="chekrbdclick()" checked="checked" />
<input type="radio" id="rbdsitelnk" onclick="chekrbdclick()" />
function chekrbdclick()
{
// How to manage here?
}
Simple, just use a 'name' property with the same value for both elements:
<html>
<body>
<form>
<input type="radio" name="size" value="small" checked> Small
<br>
<input type="radio" name="size" value="large"> Large
</form>
</body>
</html>
hope it helps
<form>
<label>
<input type="radio" name="size" value="small" checked> Small
</label>
<br>
<label>
<input type="radio" name="size" value="large"> Large
</label>
</form>
Give them a name attribute with common value like size, and it will work. For best practice, you can place your input tag inside a label tag, so that, even if your user clicks on the text beside the button (ie on "Small" or "Large"), the respective radio button gets selected.
The perfect answer is above answered ,but I wanna share you how it can work by javascript ,this is javascript work (not standard answer) ....
<input type="radio" id="rbdemail" onclick="chekrbdclick(0)" checked="checked" value="Small" />Small<br>
<input type="radio" id="rbdsitelnk" onclick="chekrbdclick(1)" value="Large" />Large
<script>
function chekrbdclick(n)
{
var small = document.getElementById('rbdemail');
var large = document.getElementById('rbdsitelnk');
if(n === 0){
small.checked = true;
large.checked = false;
}
else {
small.checked = false;
large.checked = true;
}
}
</script>
I was trying to change the text of a submit button on change of radio button .My code for html part is :
<input type="radio" onclick="check()" name="radio-view" data-icon="segment-titlestyle-segonly" id="segment1" value="Yes"/>
<label for="segment1" id="controls">
<span class="ui-btn-text-controls">Yes</span>
</label>
<input type="radio" onclick="check()" name="radio-view" data-icon="segment-titlestyle-segonly" id="segment2" value="No" checked="checked"/>
<label for="segment2" id="controls">
<span class="ui-btn-text-controls">No</span>
</label>
<input type="submit" value="send" name="sendbutton" id="sendbutton"/>
My javascript code is as follow :
function check(){
var x;
x=document.f1.radio-view;
if(x[0].checked){
document.f1.sendbutton.value="PROCEED";
}
else if(x[1].checked){
document.f1.sendbutton.value="SEND";
}
}
But its not changing the test.What can be the reason for it?
If you decide to address elements directly, use their names properly:
var x = document.f1['radio-view'];
... as you cannot access with the dot syntax the properties which names are not valid identifiers. document.f1.radio-view is treated as document.f1.radio - view, which apparently makes no sense.
But actually, I'd rather skip this part completely: if radio-button is clicked, it's definitely set as checked. So this...
<input type="radio" onclick="check(this)" ... />
...
function check(button) {
document.f1.sendbutton.value = button.value === 'Yes' ? 'PROCEED' : 'SEND';
}
... should be quite enough, as this demo shows.
See Demo here: http://jsfiddle.net/Tngbs/
//HTML
<form>
<fieldset id="SPserviceStatus" data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Group<span class="required">*</span></legend>
<input type="radio" name="ss" id="s1" value="Yes">
<label for="serviceStatus1">Yes</label>
<input type="radio" name="ss" id="s2" value="No" checked="checked">
<label for="serviceStatus2">No</label>
</fieldset>
<input type='submit' id='submitBtn' value='SUBMIT' />
</form>
//JS
$("#s1").click(function () {
document.getElementById("submitBtn").value = "Yes Clicked";
return false;
});
$("#s2").click(function () {
document.getElementById("submitBtn").value = "No Clicked";
return false;
});
Note: I am just learning javascript. So please no jQuery answers yet. I'll get there.
I have 7 forms, all with groups of radio buttons, that appear one-by-one as one button of each form is clicked. Works fine. But by the time I'm done, I may have dozens of forms. There has to be a better way to get the value of a clicked button that creating a getValue for each form. Here's what I've done that works:
<script>
function initdisplay() {
document.getElementById("painLocation").style.display="block";
document.getElementById("painSystem").style.display="none";
document.getElementById("painTemporPatt").style.display="none";
document.getElementById("painIntensDur").style.display="none";
document.getElementById("painEtiology").style.display="none";
document.getElementById("painKav").style.display="none";
}
window.onload = initdisplay;
var painLocationValue = 0;
var painSystemValue = 0;
var painTemporPattValue = 0;
var painIntesDurValue = 0;
var painEtiologyValue = 0;
var painKavValue = 0;
function getPainLocationValue() {
var radioButtons = document.getElementsByName("location");
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
painLocationValue = radioButtons[i].value;
document.getElementById("painLocation").style.display="none";
document.getElementById("painSystem").style.display="block";
alert(painLocationValue);
}
}
}
// ... other similar methods here
function getPainKavValue() {
var radioButtons = document.getElementsByName("kav");
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
painKavValue = radioButtons[i].value;
document.getElementById("painKav").style.display="none";
alert(radioButtons[i].value);
}
}
}
</script>
</head>
Then the HTML looks like this:
<body>
<form id="painLocation" action="">
<p class="formPainCode">Q1: What is the location of your ailment?</p>
<input type="radio" name="location" value="000" onclick="getPainLocationValue()"> Head, Face, Mouth<br><br>
<input type="radio" name="location" value="100" onclick="getPainLocationValue()"> Cervical (neck) Region<br><br>
<input type="radio" name="location" value="200" onclick="getPainLocationValue()"> Upper Shoulder and Upper Limbs<br><br>
<input type="radio" name="location" value="300" onclick="getPainLocationValue()"> Thoracic (chest) Region<br><br>
<input type="radio" name="location" value="400" onclick="getPainLocationValue()"> Abdominal Region<br><br>
<input type="radio" name="location" value="500" onclick="getPainLocationValue()"> Lower Back, Lumbar Spine, Sacrum, Coccyx<br><br>
<input type="radio" name="location" value="600" onclick="getPainLocationValue()"> Lower Limbs<br><br>
<input type="radio" name="location" value="700" onclick="getPainLocationValue()"> Pelvic Region<br><br>
<input type="radio" name="location" value="800" onclick="getPainLocationValue()"> Anal, Perineal, Genital Region<br><br>
<input type="radio" name="location" value="900" onclick="getPainLocationValue()"> More than one location<br><br>
</form>
...
<form id="painKav" action="">
<p class="formPainCode">Q11: On which side of your body is your ailment?</p>
<input type="radio" name="kav" value="R" onclick="getPainKavValue()"> Right<br><br>
<input type="radio" name="kav" value="L" onclick="getPainKavValue()"> Left<br><br>
<input type="radio" name="kav" value="C" onclick="getPainKavValue()"> Center<br><br>
<input type="radio" name="kav" value="M" onclick="getPainKavValue()"> More than one side<br><br>
</form>
</body>
</html>
After another couple of frustrating hours, I dropped my "no jQuery" condition. The rest was simple. I used the following code to detect a click, and get the value of the button clicked. And since I expected some of my forms to include input types other than radio buttons, I changed that as well. At this point, the jQuery looks like this:
<script>
$(document).ready(function () {
$("input").click(function() {
var painCode = $(this).val();
alert("The painCode for this person is " + painCode);
});//end click function
}); //end document ready
</script>
I cleaned up the html. A typical form now looks like this:
<div id="painIntensDur">
<form class="painCodeForm" action="">
<p class="formPainCode">Q4: If you experience pain from your ailment, which of the following best describes its intensity and duration? </p>
<input type="radio" name="intensdur" value=".1" > Mild and less than 1 month<br><br>
<input type="radio" name="intensdur" value=".8" > Mild and 1 to 6 months<br><br>
<input type="radio" name="intensdur" value=".9" > Mild and more than 6 months<br><br>
<input type="radio" name="intensdur" value=".4" > Medium and less than 1 month<br><br>
<input type="radio" name="intensdur" value=".2" > Medium and 1 to 6 months<br><br>
<input type="radio" name="intensdur" value=".3" > Medium and more than 6 months<br><br>
<input type="radio" name="intensdur" value=".7" > Severe and less than 1 month<br><br>
<input type="radio" name="intensdur" value=".5" > Severe and 1 to 6 months<br><br>
<input type="radio" name="intensdur" value=".6" > Severe and more than 6 months<br><br>
<input type="radio" name="intensdur" value=".0" > Not sure<br><br>
</form>
</div>
Thanks again to the excellent advice. I'm sure it will come in handy later.