3 Inputs Inline for Telephone Number?

More
3 years 11 months 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
3 years 11 months ago - 3 years 11 months 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: 3 years 11 months ago by tpartner.
The following user(s) said Thank You: lmw1

Please Log in to join the conversation.

More
3 years 11 months 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 6 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 6 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 6 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 6 months ago - 3 years 6 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 6 months ago by tpartner.

Please Log in to join the conversation.

Did you already participate in our customer survey?

Don't miss your chance for great prices.

Please click here to participate:

Start now

Start now!

Just create your account and start using Limesurvey today.

Register now