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

TOPIC: 3 Inputs Inline for Telephone Number?

3 Inputs Inline for Telephone Number? 2 years 10 months ago #99518

  • lmw1
  • lmw1's Avatar
  • Offline
  • Junior Lime
  • Posts: 33
  • Thank you received: 1
  • Karma: 1
Is there a way to setup 3 separate inputs (for users to type in their telephone number) and have all 3 on the same line next to each other instead of stacked?

I need 3 inputs for the telephone numbers (xxx-xxx-xxxx).

I would appreciate any guidance.

Respectfully,
Leonard Michael
The administrator has disabled public write access.

3 Inputs Inline for Telephone Number? 2 years 10 months ago #99534

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6134
  • Thank you received: 1363
  • Karma: 535
Create a multiple-short-text question with 3 subquestions.

Set up your survey to use JavaScript and add this to the source of the question. This will move the second and third text inputs int to same <span> element as the first.

<script type="text/javascript" charset="utf-8">	
		$(document).ready(function(){
		var thisQuestion = $('#question{QID}');
 
		$('.question-item:eq(0) > span', thisQuestion).append($('input.text:eq(1)', thisQuestion)).append($('input.text:eq(2)', thisQuestion));
	});
</script>
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 2 years 10 months ago by tpartner.
The administrator has disabled public write access.
The following user(s) said Thank You: lmw1

3 Inputs Inline for Telephone Number? 2 years 10 months ago #99637

  • lmw1
  • lmw1's Avatar
  • Offline
  • Junior Lime
  • Posts: 33
  • Thank you received: 1
  • Karma: 1
Perfect! Thank you sir!
The administrator has disabled public write access.

3 Inputs Inline for Telephone Number? 2 years 5 months ago #104532

  • lmw1
  • lmw1's Avatar
  • Offline
  • Junior Lime
  • Posts: 33
  • Thank you received: 1
  • Karma: 1
How can I make it to where they can only type in 3 digits (for the area code & prefix) and then 4 digits for the last part of the phone number?

Also, how can I adjust the "sizing" of the boxes to more accommodate what I've described above?

Respectfully,
Leonard Michael
The administrator has disabled public write access.

3 Inputs Inline for Telephone Number? 2 years 5 months ago #104552

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6134
  • Thank you received: 1363
  • Karma: 535
There may be some clever way to validate the inputs with Expression Manager but I would simply change the "maxlength" attributes of the inputs.

Set up your survey to use JavaScript and add this script to the question source:

<script type="text/javascript" charset="utf-8">	
 
	$(document).ready(function(){
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		// Remove width styles
		$('input[type="text"]', thisQuestion).css('width', 'auto');
 
		// Set the size and maxlength
		$('input[type="text"]:eq(0), input[type="text"]:eq(1)', thisQuestion).attr('size', 3).attr('maxlength', 3);
		$('input[type="text"]:eq(2)', thisQuestion).attr('size', 4).attr('maxlength', 4);
	});
 
</script>


.
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.
The following user(s) said Thank You: lmw1

3 Inputs Inline for Telephone Number? 2 years 5 months ago #104643

  • lmw1
  • lmw1's Avatar
  • Offline
  • Junior Lime
  • Posts: 33
  • Thank you received: 1
  • Karma: 1
That seemed to work, but now the inputs are stacked vertically. How can I get them back to display horizontally?

Thank you for helping me!

Respectfully,
Leonard Michael
The administrator has disabled public write access.

3 Inputs Inline for Telephone Number? 2 years 5 months ago #104666

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6134
  • Thank you received: 1363
  • Karma: 535
You'll need to aggregate the scripts.

<script type="text/javascript" charset="utf-8">	
 
	$(document).ready(function(){
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		$('.question-item:eq(0) > span', thisQuestion).append($('input.text:eq(1)', thisQuestion)).append($('input.text:eq(2)', thisQuestion));
 
		// Remove width styles
		$('input[type="text"]', thisQuestion).css('width', 'auto');
 
		// Set the size and maxlength
		$('input[type="text"]:eq(0), input[type="text"]:eq(1)', thisQuestion).attr('size', 3).attr('maxlength', 3);
		$('input[type="text"]:eq(2)', thisQuestion).attr('size', 4).attr('maxlength', 4);
	});
 
</script>
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 2 years 5 months ago by tpartner.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.277 seconds
Imprint                   Data Protection Statement                  Revocation information and revocation form