3 Inputs Inline for Telephone Number?

More
4 years 3 weeks ago #99518 by lmw1
lmw1 created the topic: 3 Inputs Inline for Telephone Number?
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

Please Log in to join the conversation.

More
4 years 3 weeks ago - 4 years 3 weeks ago #99534 by tpartner
tpartner replied the topic: 3 Inputs Inline for Telephone Number?
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: 4 years 3 weeks ago by tpartner.
The following user(s) said Thank You: lmw1

Please Log in to join the conversation.

More
4 years 2 weeks ago #99637 by lmw1
lmw1 replied the topic: 3 Inputs Inline for Telephone Number?
Perfect! Thank you sir!

Please Log in to join the conversation.

More
3 years 7 months ago #104532 by lmw1
lmw1 replied the topic: 3 Inputs Inline for Telephone Number?
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

Please Log in to join the conversation.

More
3 years 7 months ago #104552 by tpartner
tpartner replied the topic: 3 Inputs Inline for Telephone Number?
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 following user(s) said Thank You: lmw1

Please Log in to join the conversation.

More
3 years 7 months ago #104643 by lmw1
lmw1 replied the topic: 3 Inputs Inline for Telephone Number?
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

Please Log in to join the conversation.

More
3 years 7 months ago - 3 years 7 months ago #104666 by tpartner
tpartner replied the topic: 3 Inputs Inline for Telephone Number?
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: 3 years 7 months ago by tpartner.

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now