|
Greetings again gurus,
We are building a survey app for users.
The intent is to allow users to provide a feedback on the experience using the app.
The survey has six (6) questions and a comment box
Each question has four (4) choices.
The choices are 4 (for Excellent), 3 (for Good), 2 (for Fair), and 1 (for Poor).
Our requirement is to make the comment box either optional or mandatory depending on user choices.
For instance, if a user marks a radio button as Excellent or Good, then the comment box is optional; user does not have to enter any comments.
If however, a user checks a radio button for Fair or Poor, then we would like to make the comment box mandatory.
This forces the user to explain why his/her choice is either Fair or Poor.
Any ideas how to modify the code to make comment box mandatory or optional based on user's responses to the survey questions?
Below is the markup I am working with.
Thanks a lot in advance.
<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function () {
$('#form1').validate({
rules: {
dept: {
required: true
},
location: {
required: true
},
surveydate: {
required: true
},
promptness: {
required: true
},
timleycompletion: {
required: true
},
courteousfriendly: {
required: true
},
cleanworkarea: {
required: true
},
issueresolved: {
required: true
},
performance: {
required: true
}
}
});
});
});
</script>
</head>
<body>
<form action="phpservices/process.php" id="form1" name="form1" method="POST">
<fieldset>
<legend style="font-weight:bold;color:firebrick;">Brief Survey Questions</legend>
<p style="font-weight:bold;color:#000000;">Promptness of response to service request:</p>
<div style="background:#ACD1E9;"><input type="radio" name="promptness" value="4"><label for="excellent">Excellent</label>
<input type="radio" name="promptness" value="3"><label for="good">Good</label>
<input type="radio" name="promptness" value="2"><label for="fair">Fair</label>
<input type="radio" name="promptness" value="1"><label for="poor">Poor</label></div>
<br><br>
<p style="font-weight:bold;color:#000000;">Completed the work in a timely manner:</p>
<div style="background:#ACD1E9;"><input type="radio" name="timleycompletion" value="4"><label for="excellent">Excellent</label>
<input type="radio" name="timleycompletion" value="3"><label for="good">Good</label>
<input type="radio" name="timleycompletion" value="2"><label for="fair">Fair</label>
<input type="radio" name="timleycompletion" value="1"><label for="poor">Poor</label></div>
<br><br>
<p style="font-weight:bold;color:#000000;">Courteous and friendly:</p>
<div style="background:#ACD1E9;"><input type="radio" name="courteousfriendly" value="4"><label for="excellent">Excellent</label>
<input type="radio" name="courteousfriendly" value="3"><label for="good">Good</label>
<input type="radio" name="courteousfriendly" value="2"><label for="fair">Fair</label>
<input type="radio" name="courteousfriendly" value="1"><label for="poor">Poor</label></div>
<br><br>
<p style="font-weight:bold;color:#000000;">Kept the work area neat and clean:</p>
<div style="background:#ACD1E9;"><input type="radio" name="cleanworkarea" value="4"><label for="excellent">Excellent</label>
<input type="radio" name="cleanworkarea" value="3"><label for="good">Good</label>
<input type="radio" name="cleanworkarea" value="2"><label for="fair">Fair</label>
<input type="radio" name="cleanworkarea" value="1"><label for="poor">Poor</label></div>
<br><br>
<p style="font-weight:bold;color:#000000;">Resolved the issue to my satisfaction:</p>
<div style="background:#ACD1E9;"><input type="radio" name="issueresolved" value="4"><label for="excellent">Excellent</label>
<input type="radio" name="issueresolved" value="3"><label for="good">Good</label>
<input type="radio" name="issueresolved" value="2"><label for="fair">Fair</label>
<input type="radio" name="issueresolved" value="1"><label for="poor">Poor</label></div>
<br><br>
<p style="font-weight:bold;color:#000000;">Rate the overall performance of services provided:</p>
<div style="background:#ACD1E9;"><input type="radio" name="performance" value="4"><label for="excellent">Excellent</label>
<input type="radio" name="performance" value="3"><label for="good">Good</label>
<input type="radio" name="performance" value="2"><label for="fair">Fair</label>
<input type="radio" name="performance" value="1"><label for="poor">Poor</label></div>
<br><br>
<p style="font-weight:bold;color:steelBLUE;"><label>Comment/Suggestion:</label></p>
<p><textarea name="comments" rows="2" cols="50"></textarea></p>
<input type="submit" value="Submit response >>" onClick="return validate(this.form);">
</fieldset>
</form>
</body>
</html><script type='text/javascript'>
$(window).load(function(){
$(document).ready(function () {
$('#form1').validate({
rules: {
dept: {
required: true
},
location: {
required: true
},
surveydate: {
required: true
},
promptness: {
required: true
},
timleycompletion: {
required: true
},
courteousfriendly: {
required: true
},
cleanworkarea: {
required: true
},
issueresolved: {
required: true
},
performance: {
required: true
}
}
});
});
});
</script>
</head>
<body>
<form action="phpservices/process.php" id="form1" name="form1" method="POST">
<fieldset>
<legend style="font-weight:bold;color:firebrick;">Brief Survey Questions</legend>
<p style="font-weight:bold;color:#000000;">Promptness of response to service request:</p>
<div style="background:#ACD1E9;"><input type="radio" name="promptness" value="4"><label for="excellent">Excellent</label>
<input type="radio" name="promptness" value="3"><label for="good">Good</label>
<input type="radio" name="promptness" value="2"><label for="fair">Fair</label>
<input type="radio" name="promptness" value="1"><label for="poor">Poor</label></div>
<br><br>
<p style="font-weight:bold;color:#000000;">Completed the work in a timely manner:</p>
<div style="background:#ACD1E9;"><input type="radio" name="timleycompletion" value="4"><label for="excellent">Excellent</label>
<input type="radio" name="timleycompletion" value="3"><label for="good">Good</label>
<input type="radio" name="timleycompletion" value="2"><label for="fair">Fair</label>
<input type="radio" name="timleycompletion" value="1"><label for="poor">Poor</label></div>
<br><br>
<p style="font-weight:bold;color:#000000;">Courteous and friendly:</p>
<div style="background:#ACD1E9;"><input type="radio" name="courteousfriendly" value="4"><label for="excellent">Excellent</label>
<input type="radio" name="courteousfriendly" value="3"><label for="good">Good</label>
<input type="radio" name="courteousfriendly" value="2"><label for="fair">Fair</label>
<input type="radio" name="courteousfriendly" value="1"><label for="poor">Poor</label></div>
<br><br>
<p style="font-weight:bold;color:#000000;">Kept the work area neat and clean:</p>
<div style="background:#ACD1E9;"><input type="radio" name="cleanworkarea" value="4"><label for="excellent">Excellent</label>
<input type="radio" name="cleanworkarea" value="3"><label for="good">Good</label>
<input type="radio" name="cleanworkarea" value="2"><label for="fair">Fair</label>
<input type="radio" name="cleanworkarea" value="1"><label for="poor">Poor</label></div>
<br><br>
<p style="font-weight:bold;color:#000000;">Resolved the issue to my satisfaction:</p>
<div style="background:#ACD1E9;"><input type="radio" name="issueresolved" value="4"><label for="excellent">Excellent</label>
<input type="radio" name="issueresolved" value="3"><label for="good">Good</label>
<input type="radio" name="issueresolved" value="2"><label for="fair">Fair</label>
<input type="radio" name="issueresolved" value="1"><label for="poor">Poor</label></div>
<br><br>
<p style="font-weight:bold;color:#000000;">Rate the overall performance of services provided:</p>
<div style="background:#ACD1E9;"><input type="radio" name="performance" value="4"><label for="excellent">Excellent</label>
<input type="radio" name="performance" value="3"><label for="good">Good</label>
<input type="radio" name="performance" value="2"><label for="fair">Fair</label>
<input type="radio" name="performance" value="1"><label for="poor">Poor</label></div>
<br><br>
<p style="font-weight:bold;color:steelBLUE;"><label>Comment/Suggestion:</label></p>
<p><textarea name="comments" rows="2" cols="50"></textarea></p>
<input type="submit" value="Submit response >>" onClick="return validate(this.form);">
</fieldset>
</form>
</body>
</html>
modified 23-Jul-15 16:15pm.
|
|
|
|
|
According to this answer on SO[^], you just need to use a dependency expression[^]:
comments: {
required: "input:radio:checked[value='2'], input:radio:checked[value='1']"
}
The string value for the required rule is a jQuery selector which will be evaluated in the context of the form. The rule will only apply if the selector returns at least one element.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hi Richard again!
Nice, very nice clean solution but I would like to make a slight change to the question if you don't mind sir.
Since there are six total questions, is it possible to have comment box for each question?
By default, hide the comments box.
If the choices are either 1 or 2, then show the comment box and make it mandatory.
If the choice is 3 or 4 keep the box hidden.
Can call this comments box rcomments.
Then we just have one global comments box for additional comments the user may have.
Is this possible?
Thanks so much (again) for your help.
|
|
|
|
|
Yes. You just need to set up a comment box for each question, with its own rule. The dependency expression would use the name of the radio buttons for the question - for example:
promptness-comments: {
required: "input:radio:checked[name='promptness'][value='2'], input:radio:checked[name='promptness'][value='1']"
}
You'd then just need a script to monitor the click event of each radio-button, and show or hide the relevant comment box. How you find the relevant comment box for the clicked radio button is up to you - I'd be inclined to use a predictable ID:
<textarea id="promptness-comments" name="promptness-comments" rows="2" cols="50"></textarea>
...
<script>
$(document).ready(function () {
...
$("#form1").on("click", "input:radio", function(){
var group = this.name;
var commentsId = "#" + group + "-comments";
$(commentdId).toggle(this.value === "1" || this.value === "2");
});
});
</script>
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
awesome, Richard.
Thanks very much.
|
|
|
|
|
how to add image in columns in datatables using jquery and json
|
|
|
|
|
It requires a lot of code and will be different for everyone's situation. Where are you stuck?
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
|
Ford Motor Company is accused of stealing Versata's Automotive Configuration Management (ACM) software. Versata is currently investigating this matter and is seeking information from individuals that formerly worked at Ford Motor Company on either the ACM program or on the replacement program called Product Definition Offering (PDO). If you previously worked on either one of these programs we would like to hear from you on a confidential basis at confidentialfordinfo@gmail.com.
We very much appreciate your response and are eager to hear from you.
|
|
|
|
|
I am sorry for the very basic question, but I don't have a reference book. Can you have more than one "Else if " statement in case you needed to make more than 2 comparisons to the same item?
|
|
|
|
|
Yes, you can.
You may also want to look at the switch statement[^] as well.
What do you get when you cross a joke with a rhetorical question?
The metaphorical solid rear-end expulsions have impacted the metaphorical motorized bladed rotating air movement mechanism.
Do questions with multiple question marks annoy you???
|
|
|
|
|
Member 11847850 wrote: I don't have a reference book
You don't need one, nearly all documentation[^] is online.
|
|
|
|
|
Could anyone let me know why my ajax program will not work? The code is below:
<!DOCTYPE html>
<html>
<head>
<script language = "javascript">
var XMLHttpRequestObject = false;
if(window.XMLHttpRequest)
{
XMLHttpRequestObject - new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
}
function getData(dataSource, divID)
{
if(XMLHttpRequestObject)
{
var obj = document.getElementById(divID)
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function()
{
if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
{
obj.innerHTML = XMLHttpRequestObject.responseText;
}
else
{
obj.innerHTML = Waitning for response...
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<div id="text">
<p>Response will appear here.</p>
</div>
<form>
<input type = "button" value = "Submit" onclick="getData('HelloWorld.php','divID')">
</form>
</body>
</html>
Thanks,
Truck35
|
|
|
|
|
Add a 'divID' in the body, e.g.
<div id="divID"></div>
|
|
|
|
|
I added the "divID" to the id attribute of the div tag and my program still will not work. If anyone has any ideas why, please let me know.
The modified code is below:
<!DOCTYPE html>
<html>
<head>
<script language = "javascript">
var XMLHttpRequestObject = false;
if(window.XMLHttpRequest)
{
XMLHttpRequestObject - new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
}
function getData(dataSource, divID)
{
if(XMLHttpRequestObject)
{
var obj = document.getElementById(divID)
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function()
{
if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
{
obj.innerHTML = XMLHttpRequestObject.responseText;
}
else
{
obj.innerHTML = Waitning for response...
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<div id="divID">
<p>Response will appear here.</p>
</div>
<form>
<input type = "button" value = "Submit" onclick="getData('HelloWorld.php','divID')">
</form>
</body>
</html>
Thanks,
Truck53
|
|
|
|
|
change
obj.innerHTML = Waitning for response...
to
obj.innerHTML = "Waitning for response...";
use the dev tools of your browser, or a tool like Fiddler, to examine the network traffic. So if the request is being made and if so what its return status is. Maybe it's 404? or 500? We can't access your system so don't know.
|
|
|
|
|
Hello i am having an mp3 file i want to convert that audio file in byte array and send it to the server please let me know how i can do it
|
|
|
|
|
Is there a way to shorten or combine if() statements?
Currently I have if age<21 there is an alert, then else if age>21 there is an alert, another else if age==21 alert, and an else alert.
Is there a way to combine age<21, age>21, age==21 into one statement with their individual alerts?
Thanks, I am taking my first Javascript class right now.
|
|
|
|
|
use case/switch statement
switch (true) {
case (age == 21):
alert(" equal");
break;
case (age> 21):
alert(" older");
break;
case (age < 21):
alert("younger");
break;}
|
|
|
|
|
<script>
function myfun() {
var age = 21;
(age < 21) ? alert('less than 21') : (age > 21) ? alert('greater than 21') : (age == 21) ? alert('equl 21') : alert('else part');
}
</script>
It's give you result 100% with single line.
|
|
|
|
|
The third expression "age == 21" is redundant. If it is not less than and not greater than then there is only one other value it can have.
|
|
|
|
|
Godhaniketan wrote: Hello Richard MacCutchan,
I think you have not tested well in my case it's worked fine. i think you should have to check again.
if any doubt then reply me.
just change value of age like 19,21,22 and 'blah..' it gives you all kind of alert..please try it out.
Well I guess you do not understand that simple statement only requires two if parts.
If age is less than 21 : Alert1
If age is greater than 21 : Alert2
Else: age must be equal to 21, so the test for equality is not needed.
modified 21-Jul-15 9:22am.
|
|
|
|
|
Godhaniketan wrote: Hello Richard MacCutchan,
have you read question of "Member 11849688" he written clearly that "else if age==21 alert" that means he/she wants alert on equality condition also.
please read out the question properly.
he/she want 4 alert <, >, ==, else part.
Yes, and that is what my logic provided. If you really cannot understand simple boolean expressions then ...
modified 21-Jul-15 9:23am.
|
|
|
|
|
Yes i understand your logic..
i will remove redundancy.
thanks
|
|
|
|
|
And in future, please do not remove messages as you have done here. We all get things wrong from time to time (me more often), so just be adult enough to accept correction.
|
|
|
|
|
How do I send a user to another webpage by opening it up in a new tab?
Here's what I know so far:
location.href="addurlhere"
I am at the very beginnings of learning, but I do not want people leaving my page completely to check out another, does that make sense?
Thank you!
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
