Welcome, Guest
Username: Password: Remember me

TOPIC: smiley face without radiobutton and submitting

smiley face without radiobutton and submitting 3 years 2 weeks ago #82537

Thanks so so much for your support, I don´t really know why it doesn´t work, with that code the radio buttons and submit buttons are visible to the left side of the screen breaking a little bit the format.
I was thinking why i want to do something that diferent if LimeSurvey offer a star rating JQuery Plugin that works very good. So to stop the hassle im going with it, (I will keep trying to fix my mistake with your code, is a good practice for a rookie) but now I just want to auto submit the question when you click on the rating. I tried tu cut your code to just include that part of the code but is not working. Can you help with it?
			// Click events
			$('#question'+qID+' .clickableImage').click(function(){
				$('#question'+qID+' .clickableImageSelected').removeClass('clickableImageSelected');
				$(this).addClass('clickableImageSelected');
				var imgIndex = $(this).attr('id').split(qID+'-')[1];
				$('#question'+qID+' input.radio:eq('+imgIndex+')').click();
				// Submit the page
				if($('#movesubmitbtn').length > 0) {
					document.limesurvey.move.value = 'movesubmit';
				}
				else {
					document.limesurvey.move.value = 'movenext';
				}
				document.limesurvey.submit();
			});
		}
	});
 
</script>
Last Edit: 3 years 2 weeks ago by manueltrevilla.
The administrator has disabled public write access.

smiley face without radiobutton and submitting 3 years 2 weeks ago #82565

  • tpartner
  • tpartner's Avatar
  • Online
  • LimeSurvey Team
  • Posts: 4965
  • Thank you received: 1022
  • Karma: 424
This will submit the page when you click a star:
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function(){
 
		$('.star-rating').click(function(){
			if($('#movesubmitbtn').length > 0) {
				document.limesurvey.move.value = 'movesubmit';
			}
			else {
				document.limesurvey.move.value = 'movenext';
			}
			document.limesurvey.submit();
		});
	});
 
</script>
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.

smiley face without radiobutton and submitting 3 months 1 week ago #118670

  • matct
  • matct's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 1
  • Karma: 0
tpartner wrote:
Okay, this code will auto-submit the page but you can just comment out that line if you don't want it to.

Add the following to the source of the question and Replace "QQ" with the question ID:
<div style="width:100%;">
	<div style="float:left; margin-left: 2%; margin-right:1%">
		<img src="http://localhost/limesurvey/imagenes/imagen1.jpeg" />
	</div>
	<div style="float:left; margin-left: 2%; margin-right:1%">
		<img src="http://localhost/limesurvey/imagenes/imagen2.jpeg" />
	</div>
	<div style="float:left; margin-left: 2%; margin-right:1%">
		<img src="http://localhost/limesurvey/imagenes/imagen3.jpeg" />
	</div>
</div>
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function(){
 
		// Call the radioImages function with the question ID
		radioImages(QQ);
 
		function radioImages(qID) {
			// Hide radio list
			$('#question'+qID+' li[id^="javatbd"]:first').parent().hide();
 
			// Add some IDs and classes
			$('#question'+qID+' img').each(function(i){
				$(this).attr('id','img-'+qID+'-'+i).addClass('clickableImage');
			});
 
			// Set initial "selected" classe (in case a respondent returns to the page)
			if($('#question'+qID+' input.radio:checked').length > 0) {
				var radioIndex = $('#question'+qID+' input.radio:checked').index('input.radio');
				$('#question'+qID+' .clickableImage:eq('+radioIndex+')').addClass('clickableImageSelected');
			}
 
			// Hover effects
			$('#question'+qID+' img').hover(
				function () {
					$(this).addClass('clickableImageHover');
				}, 
				function () {
					$(this).removeClass('clickableImageHover');
				}
			);
 
			// Click events
			$('#question'+qID+' .clickableImage').click(function(){
				$('#question'+qID+' .clickableImageSelected').removeClass('clickableImageSelected');
				$(this).addClass('clickableImageSelected');
				var imgIndex = $(this).attr('id').split(qID+'-')[1];
				$('#question'+qID+' input.radio:eq('+imgIndex+')').click();
				// Submit the page
				if($('#movesubmitbtn').length > 0) {
					document.limesurvey.move.value = 'movesubmit';
				}
				else {
					document.limesurvey.move.value = 'movenext';
				}
				document.limesurvey.submit();
			});
		}
	});
 
</script>

Then add this to the end of template.css (your code had styles embedded in the <body> of the page which is a no-no):
.clickableImage {
	border: 2px solid transparent;
}
 
.clickableImageHover {
	border-color: #66FF66;
}
 
.clickableImageSelected {
	border-color: #009900;
}

When I use this including the auto submit, I get no completed results, the answer is not saved to the database.
Did something change between this years ago and current stable?
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.228 seconds