Check out the LimeSurvey source code on GitHub!
Welcome, Guest
Username: Password:

TOPIC: Script CSS that doesn't work like I want it to...

Script CSS that doesn't work like I want it to... 4 years 10 months ago #67959

  • waitz
  • waitz's Avatar
  • Offline
  • Gold Lime
  • Posts: 171
  • Thank you received: 1
  • Karma: 3
I have 2 scripts in a multiple short text question:
-The first script decides which of the sub questions are mandatory
-The second script checks the max amount of characters in the different subquestions.

Both of the scripts uses the same error css if something is not correct ('background color':'pink'). But it looks like the second script's css cancels the first script's css.

If I don't fill in one of the mandatory fields (first script) and add too many characters for a another field (second script), only the second script's error css stays. The first script's error css goes back to normal as soon as I press OK on the error pop up.
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function () {
 
		// Interrupt the submit function
		$('#movenextbtn').click(function () {
			// Override the built-in "disable navigation buttons" feature
			$('#moveprevbtn, #movenextbtn, #movesubmitbtn').attr('disabled', '');
 
			var empty = 0;
 
			var warningText = 'Please complete the highlighted fields.';
 
			// Call the mandatory row function with question ID
			mandatoryRow(905, 1);
			mandatoryRow(905, 3);
 
			// A function to render rows of an array mandatory
			function mandatoryRow(qID, rowNum) {
 
				if ($('div#question'+ qID+ ' input.text:eq('+Number(rowNum - 1)+')').val() == '') {
					$('div#question'+ qID+ ' input.text:eq('+Number(rowNum - 1)+')').css('background-color','pink');
					empty = 1;
				} else {
					$('div#question'+ qID+ ' input.text:eq('+Number(rowNum - 1)+')').css('background-color','');
				}
			}
 
			if (empty == 1) {
				alert(warningText);
				return false;
			} else {
				return true;
			}
		});
	});
 
</script><script type="text/javascript" charset="utf-8">
 
	$(document).ready(function() {
 
		maxChars($("#answer68164X59X905NAM01"), 25, 'Your first name can be maximum 25 characters.');
		maxChars($("#answer68164X59X905NAM02"), 25, 'Your middle name can be maximum 25 characters.');
		maxChars($("#answer68164X59X905NAM03"), 50, 'Your family name can be maximum 50 characters.');
 
		function maxChars(inputID, maxNum, msg) {
 
			if($(inputID).length > 0) {
 
				// Interrupt next/submit function 
				$('#movenextbtn, #movesubmitbtn').click(function(){
 
					if($(inputID).val().length > maxNum) {
						$(inputID).css({'background-color':'pink'});
						alert (msg);
						return false;
					}
					else {
						$(inputID).css({'background-color':''});
						return true;
					}
				});
			}
		}
	});
</script>
I have attached the question.

How can I prevent this? If I change one of the 2 error css to change color and not background-color, then both of the script's error css show correctly also after I press OK on the error pop up. But I would like to use the same css for both the script's errors.
Attachments:
Version 1.91+ Build 11232 | PHP 5.3.9 | MySQL 5.1.56 |
Last Edit: 4 years 10 months ago by waitz.
The administrator has disabled public write access.

Script CSS that doesn't work like I want it to... 4 years 10 months ago #67990

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6214
  • Thank you received: 1376
  • Karma: 539
Well we could probably aggregate the scripts more but...

You can add and remove different classes instead of setting the background color.

So the script becomes:
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function () {
 
		// Interrupt the submit function
		$('#movenextbtn').click(function () {
			// Override the built-in "disable navigation buttons" feature
			$('#moveprevbtn, #movenextbtn, #movesubmitbtn').attr('disabled', '');
 
			var empty = 0;
 
			var warningText = 'Please complete the highlighted fields.';
 
			// Call the mandatory row function with question ID
			mandatoryRow(905, 1);
			mandatoryRow(905, 3);
 
			// A function to render rows of an array mandatory
			function mandatoryRow(qID, rowNum) {
 
				if ($('div#question'+ qID+ ' input.text:eq('+Number(rowNum - 1)+')').val() == '') {
					$('div#question'+ qID+ ' input.text:eq('+Number(rowNum - 1)+')').addClass('mandatoryError');
					empty = 1;
				} else {
					$('div#question'+ qID+ ' input.text:eq('+Number(rowNum - 1)+')').removeClass('mandatoryError');
				}
			}
 
			if (empty == 1) {
				alert(warningText);
				return false;
			} else {
				return true;
			}
		});
 
		maxChars($("#answer68164X59X905NAM01"), 25, 'Your first name can be maximum 25 characters.');
		maxChars($("#answer68164X59X905NAM02"), 25, 'Your middle name can be maximum 25 characters.');
		maxChars($("#answer68164X59X905NAM03"), 50, 'Your family name can be maximum 50 characters.');
 
		function maxChars(inputID, maxNum, msg) {
 
			if($(inputID).length > 0) {
 
				// Interrupt next/submit function 
				$('#movenextbtn, #movesubmitbtn').click(function(){
 
					if($(inputID).val().length > maxNum) {
						$(inputID).addClass('maxCharsError');
						alert (msg);
						return false;
					}
					else {
						$(inputID).removeClass('maxCharsError');
						return true;
					}
				});
			}
		}
	});
</script>

And then you need to add this to the end of template.css:
.mandatoryError,
.maxCharsError {
	background-color:pink;
}
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

Script CSS that doesn't work like I want it to... 4 years 10 months ago #67992

  • waitz
  • waitz's Avatar
  • Offline
  • Gold Lime
  • Posts: 171
  • Thank you received: 1
  • Karma: 3
Damn... How do you know all this stuff..?
;)
Version 1.91+ Build 11232 | PHP 5.3.9 | MySQL 5.1.56 |
The administrator has disabled public write access.

Script CSS that doesn't work like I want it to... 4 years 10 months ago #68034

  • Mazi
  • Mazi's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5984
  • Thank you received: 368
  • Karma: 260
Tony is a Javascript magician!

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.262 seconds
Imprint                   Data Protection Statement                  Revocation information and revocation form