Hi, I have been learning js since one week, so please don't laugh at me
I would like to have a form on my web page which includes 4 questions.The answer for each question is "yes" or "no". There is a button below the form.
If user answers all the questions and clicks the button, the information will be displayed in the paragraph below the form. But when user does not answer all the questions and clicks the button, the alert will show up: "Fill the form!"
I only know how to display the paragraph with my button:
function show_info()
{
var paragraph = document.getElementById('info');
paragraph.style.display = "block";
}
...but the rest (I suppose some FOR statement and IF/ELse???)
is still difficult for me
But I still have some little difficulties after testing Your script
When the user answers at least one question in my form and clicks a button,
the hidden paragraph is displayed. (and I want user to answer all the questions in order to see hidden paragraph). I am not fluent in English (and javascript ), so I do not know if I exactly should choose between "return fnd" or "return "str"?
Why the value of "fnd" is "-1"? (..maybe this is obvious and I am too stupid to understand it...) Could You deconstruct this little part of the code for me?
(I understand almost everything, except for the "fnd" variable):
function getRBtnName(GrpName) {
var sel = document.getElementsByName(GrpName);
var fnd = -1;
var str = '';
for (var i=0; i<sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
// return fnd; // return option index of selection
// comment out next line if option index used in line above
return str;
}
But I still have some little difficulties after testing Your script
When the user answers at least one question in my form and clicks a button,
the hidden paragraph is displayed. (and I want user to answer all the questions in order to see hidden paragraph). I am not fluent in English (and javascript ), so I do not know if I exactly should choose between "return fnd" or "return "str"?
Why the value of "fnd" is "-1"? (..maybe this is obvious and I am too stupid to understand it...) Could You deconstruct this little part of the code for me?
(I understand almost everything, except for the "fnd" variable):
function getRBtnName(GrpName) {
var sel = document.getElementsByName(GrpName);
var fnd = -1;
var str = '';
for (var i=0; i<sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
// return fnd; // return option index of selection
// comment out next line if option index used in line above
return str;
}
(.......)
THANKS A LOT FOR HELPING ME!!!!!!!
The part I highlighted in red makes no sense to me.
If the user answers all the questions, then the hidden paragraph will NEVER be displayed because ALL of the questions have been answered ?????
Is what you want to happen is that the hidden paragraph be displayed until the user has answered all the questions CORRECTLY?
Please explain further what you really are trying to do with your hidden paragraph message.
Concerning the radio button check function, the fnd variable is an OPTIONAL
way of testing which radio button has been chosen. You can return the
option number chosen if you return fnd from the function. -1 means that
no options were chosen, 0=first option chosen, 1=second, etc.
As it is, the str variable is returned.
If there are no radio buttons checked, then it returns a blank string,
otherwise it returns the value of the option chosen, in your case either 'Yes' or 'No'
If you want it to return the value of the radio button chosen or '' if none are selected, then use this version:
Code:
function getRBtnName(GrpName) {
var sel = document.getElementsByName(GrpName);
var fnd = -1;
var str = '';
for (var i=0; i<sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
return fnd; // return option index of selection
// comment out next line if option index used in line above
// return str;
}
// ..... one possible solution in the check section, depending upon your needs.
var correct = 0;
var ans = getRBtnName('one');
if (ans == -1) { alert('Missing answer for 1st question'); return false; }
else { if (ans == 'Yes') { correct++; } // or 'No' depending on correctness
else { return false; }
...
I want my hidden paragraph message to be displayed only when someone answers every question. Nevermind the choice. I don't want user to see the message before answering
ALL the questions. If user clicks the button before answering all of them, an alert should be displayed: "Answer all the questions!". I do not want user to see the message in the hidden paragraph after answering one or two questions (...or without answeriing at all). Before complete answering, the message is a secret.
I do not know if I explain it clearly enough but maybe it is possible to modify the code You provided in order to achieve this strange aim...
I was very close to this but it looks like I need to work again on the format of basic functions.
Actually in that particular case it doesn't matter what the answers are. The important issue is that user should fill the form. But, of course, I also thought about changing the hidden message depending upon the answers given... Let's say I have two different hidden messages... Certainly, I will need to have two paragraphs with id's, then I assume I should adapt to my needs the code which You provided in Your second reply and connect it with some if/else statements...
<code>
var correct = 0;
var ans = getRBtnName('one');
if (ans == -1) { alert('Missing answer for 1st question'); return false; }
else { if (ans == 'Yes') { correct++; } // or 'No' depending on correctness
else { return false; }
</code>
...and what if I have the same kind of form as the example above (the one that user should complete to see hidden message) - but instead of radio buttons, I have a list of five options for each of three question??????????????
Can You deconstruct the differences in creating the scripts for my simple forms: 1.with "radio buttons" and 2. with "options"? It is very difficult for me to learn on my own.
I hope I am not so strange and mysterious as You think. I am just going to become an addiction therapist, so as an excercise I try to create some interactive tests which tell the user if he/she is addicted to alcohol
There are many tests researching this problem. Some of them are basic (I only want the user to answer. - No matter what the answers are. - Info displayed after answering is the same), others - more complicated... For example the code for those more complicated should display (only after the user will answer all the questions!!!) different info (diagnosis) depending upon the option made for each question.
...so there is a long way ahead and I hope I will be able to accomplish that on my own soon.
For now, I am happy because I have managed to modify (actually I've only made some simplification) Your last code and it works! -
I just wanted the user to complete that form - no matter the option made. The most important thing was not to show hidden info without answering (no matter the choice!!!!!!!) Look at this, please:
Code:
function help_me() {
var flag = true;
// condition for not chosen any option
var tmp = document.getElementById('sel1').value;
if (tmp == '') { flag = false; }
tmp = document.getElementById('sel2').value;
if (tmp == '') { flag = false; }
tmp = document.getElementById('sel3').value;
if (tmp == '') { flag = false; }
var paragraph = document.getElementById('diagnoza');
if (flag == false) {
alert ("Answer all the questions! - No matter what the choice!");
paragraph.style.display = "none";
return true; }
else {
paragraph.style.display = "block";
return false;
}
}
It shows information from the hidden paragraph... What do You think about it? Would You write it in more simple way? Do You see some mistakes?
Of course Your code is very helpful.
Thanks to You, the things started getting more simple
Looks fine to me so long as it accomplishes your task and solves your problems.
It looks like the only thing you removed is the ability to check for a correct answer.
If it is not needed to be checked, then your solution should work fine.
Could it be simplified further, possibly. But if you understand it and can modify it
without creating additional errors or problem, then you should apply the KISS principle.
Or it's corrollary: if ain't broke, don't fix it!
The nice thing about designing your own programs is that you can change as needed.
Keep of the good work.
Good Luck!
I've been thinking about the function help_me() from my previous reply... - What if I have much bigger amount of 'select' elements??? - ...so I modified Your script further in order to not get each 'select' element by 'id'...
Code:
function help_me() {
var tmp = document.getElementsByTagName('select');
var paragraph = document.getElementById('diagnoza');
for (var i=0; i<tmp.length;i++) {
if (tmp[i].value == '') {
alert ("Answer all the questions! - No matter what the choice!");
paragraph.style.display = "none";
return false; }
else {
paragraph.style.display = "block";
return true; } } }
But with the code above the user doesn't have to answer all the questions to see the secret/reward message in the hidden paragraph. Here it is possible to see it, if You answer the first one(because 'i = 0') or the second one(if 'i=1') or the third (if 'i=2'), etc.
Where is my mistake?
What should I do to accomplish my little task (the user should answer all the questions to see the message, but there are many questions and I don't want to reference them by 'id') ???
Reply With Quote
One possibility
Originally Posted by Kovalicious
Bookmarks