Welcome, Guest
Username: Password: Remember me

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

Script CSS that doesn't work like I want it to... 3 years 4 days 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: 3 years 4 days ago by waitz.
The administrator has disabled public write access.

Re: Script CSS that doesn't work like I want it to... 3 years 3 days ago #67990

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4293
  • Thank you received: 810
  • Karma: 373
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Re: Script CSS that doesn't work like I want it to... 3 years 3 days 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.

Re: Script CSS that doesn't work like I want it to... 3 years 3 days ago #68034

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5348
  • Thank you received: 298
  • Karma: 250
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.187 seconds
Donation Image