Click here to Skip to main content
15,890,690 members
Home / Discussions / JavaScript
   

JavaScript

 
RantSometimes I make something simple into something difficult Pin
Member 1183686426-Jul-15 7:38
Member 1183686426-Jul-15 7:38 
GeneralRe: Sometimes I make something simple into something difficult Pin
mohammad hasnain raza28-Jul-15 1:26
professionalmohammad hasnain raza28-Jul-15 1:26 
QuestionCreating an array of graphic files... Pin
Rayj201025-Jul-15 7:31
Rayj201025-Jul-15 7:31 
QuestionChanging the last text of a loop Pin
Member 1184968824-Jul-15 4:53
Member 1184968824-Jul-15 4:53 
AnswerRe: Changing the last text of a loop Pin
Richard MacCutchan24-Jul-15 5:40
mveRichard MacCutchan24-Jul-15 5:40 
AnswerRe: Changing the last text of a loop Pin
ZurdoDev24-Jul-15 5:58
professionalZurdoDev24-Jul-15 5:58 
AnswerRe: Changing the last text of a loop Pin
Anil Vaghasiya24-Jul-15 19:52
professionalAnil Vaghasiya24-Jul-15 19:52 
QuestionHow do I make the Comment box conditional mandatory box? (SOLVED) Pin
samflex23-Jul-15 8:20
samflex23-Jul-15 8:20 
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.

PHP
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function () {

    $('#form1').validate({ // initialize the plugin
        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'>//<![CDATA[
$(window).load(function(){
$(document).ready(function () {

    $('#form1').validate({ // initialize the plugin
        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.

AnswerRe: How do I make the Comment box conditional mandatory box? Pin
Richard Deeming23-Jul-15 9:04
mveRichard Deeming23-Jul-15 9:04 
GeneralRe: How do I make the Comment box conditional mandatory box? Pin
samflex23-Jul-15 9:14
samflex23-Jul-15 9:14 
GeneralRe: How do I make the Comment box conditional mandatory box? Pin
Richard Deeming23-Jul-15 9:34
mveRichard Deeming23-Jul-15 9:34 
GeneralRe: How do I make the Comment box conditional mandatory box? Pin
samflex23-Jul-15 10:15
samflex23-Jul-15 10:15 
Questionhow to add image in columns in datatables using jquery and json Pin
Member 1185791223-Jul-15 3:56
Member 1185791223-Jul-15 3:56 
QuestionRe: how to add image in columns in datatables using jquery and json Pin
ZurdoDev24-Jul-15 5:59
professionalZurdoDev24-Jul-15 5:59 
QuestionSeeking Former Ford Employees Pin
Member 1185572122-Jul-15 7:09
Member 1185572122-Jul-15 7:09 
QuestionIf ... Else If ... Else statements Pin
Member 1184785021-Jul-15 18:41
Member 1184785021-Jul-15 18:41 
AnswerRe: If ... Else If ... Else statements Pin
Brisingr Aerowing21-Jul-15 19:24
professionalBrisingr Aerowing21-Jul-15 19:24 
AnswerRe: If ... Else If ... Else statements Pin
Richard MacCutchan21-Jul-15 20:32
mveRichard MacCutchan21-Jul-15 20:32 
QuestionSimple Ajax program will not work Pin
Truck5321-Jul-15 15:36
Truck5321-Jul-15 15:36 
AnswerRe: Simple Ajax program will not work Pin
Peter Leow21-Jul-15 16:21
professionalPeter Leow21-Jul-15 16:21 
GeneralRe: Simple Ajax program will not work Pin
Truck5322-Jul-15 0:13
Truck5322-Jul-15 0:13 
GeneralRe: Simple Ajax program will not work Pin
F-ES Sitecore22-Jul-15 0:44
professionalF-ES Sitecore22-Jul-15 0:44 
QuestionTo convert audio file into byte array in javascript Pin
Rohan Jadhav20-Jul-15 6:02
Rohan Jadhav20-Jul-15 6:02 
QuestionHow to shorten/combine "if()" statements? Pin
Member 1184968820-Jul-15 4:58
Member 1184968820-Jul-15 4:58 
AnswerRe: How to shorten/combine "if()" statements? Pin
Member 1185045020-Jul-15 13:18
Member 1185045020-Jul-15 13:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.