Welcome, Guest
Username: Password: Remember me

TOPIC: 3 Inputs Inline for Telephone Number?

3 Inputs Inline for Telephone Number? 7 months 2 weeks ago #99518

  • lmw1
  • lmw1's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 31
  • 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? 7 months 2 weeks ago #99534

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 3813
  • Thank you received: 683
  • Karma: 328
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 7 months 2 weeks ago by tpartner.
The administrator has disabled public write access.
The following user(s) said Thank You: lmw1

3 Inputs Inline for Telephone Number? 7 months 1 week ago #99637

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

3 Inputs Inline for Telephone Number? 2 months 1 week ago #104532

  • lmw1
  • lmw1's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 31
  • 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 months 1 week ago #104552

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 3813
  • Thank you received: 683
  • Karma: 328
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.
The following user(s) said Thank You: lmw1

3 Inputs Inline for Telephone Number? 2 months 1 week ago #104643

  • lmw1
  • lmw1's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 31
  • 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 months 1 week ago #104666

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 3813
  • Thank you received: 683
  • Karma: 328
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 2 months 1 week ago by tpartner.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.130 seconds
Donation Image