Text masket input

More
3 years 2 months ago - 3 years 2 months ago #163874 by csknfrt
Text masket input was created by csknfrt
Hello,

I use text input mask on the LS 2.73 but I couldn't use since LS 3.0.


is there any way to make it like picture?
Attachments:
Last edit: 3 years 2 months ago by csknfrt.
The topic has been locked.
More
3 years 2 months ago #163889 by tpartner
Replied by tpartner on topic Text masket input
Can you explain more about what you have done and whether you get any JavaScript errors in the console?

Can you attach a small test survey containing only that question?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
The topic has been locked.
More
3 years 1 month ago #164405 by csknfrt
Replied by csknfrt on topic Text masket input
I applied steps below on the LS 2.73 and succeeded. But there isn't startpage.pstpl on the LS 3.x.x so i couldn't do it. How can I do masked input on the LS 3.x.x below?
<script type="text/javascript" charset="utf-8">
	$(document).ready(function($) {	 
		$("#answer55431X1X5").mask("999-99-9999",{ placeholder:"#" });
	});
</script>

I want to make the parcicipants to write their phone numbers as 555-555-5555

Survey Example
Attachments:
The topic has been locked.
More
3 years 1 month ago - 3 years 1 month ago #164412 by tpartner
Replied by tpartner on topic Text masket input
I think you needed to do more than that to make it work in 2.7x. You must have also included the masking function in the template somewhere.

In 3.x, I would think you need to:

1) Extend an existing theme

2) Upload the masking function file to /upload/themes/survey/yourNewThemeName/scripts/

3) Include it in /upload/themes/survey/yourNewThemeName/config.xml like this:
    <files>
        <css>
            <add>css/ajaxify.css</add>
            <add>css/theme.css</add>
            <add>css/custom.css</add>
        </css>
        <js>
            <add>scripts/theme.js</add>
            <add>scripts/ajaxify.js</add>
            <add>scripts/myMaskingScript.js</add>
        </js>
        <print_css>
            <add>css/print_theme.css</add>
        </print_css>
    </files>

4) Insert something like this in the source of the question text:
<script type="text/javascript" charset="utf-8">
	$(document).ready(function($) {	 
		$('#question{QID} input[type="text"]').mask("999-99-9999",{ placeholder:"#" });
	});
</script>

More about the new template system in LS3.x here - manual.limesurvey.org/New_Template_System_in_LS3.x

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Last edit: 3 years 1 month ago by tpartner.
The topic has been locked.
More
3 years 1 month ago - 3 years 1 month ago #164428 by csknfrt
Replied by csknfrt on topic Text masket input
I tried what you wrote, but unfortunately it didn't work.

Step 1 - Done
Upload the masking function file to /upload/themes/survey/Ana_Tema_fruity/scripts/jquery.maskedinput.js

Step 2 - Done
Include it in /upload/themes/survey/Ana_Tema_fruity/config.xml
<files>
        <css>
            <add>css/ajaxify.css</add>
            <add>css/theme.css</add>
            <add>css/custom.css</add>
        </css>
        <js>
            <add>scripts/theme.js</add>
            <add>scripts/ajaxify.js</add>
            <add>scripts/jquery.maskedinput.js</add>
        </js>
        <print_css>
            <add>css/print_theme.css</add>
        </print_css>
    </files>

Step 3 - Done
Insert something like this in the source of the question text:
Lütfen cep telefon numaranızı yazınız <script type="text/javascript" charset="utf-8">
	$(document).ready(function($) {	 
		$("#answer784213X3X41").mask("(0999) 999 99 99",{ placeholder:"" });
	});
</script>
Attachments:
Last edit: 3 years 1 month ago by csknfrt.
The topic has been locked.
More
3 years 1 month ago #164431 by tpartner
Replied by tpartner on topic Text masket input
jquery.maskedinput.js is not being included. Try uninstalling and re-installing the theme so the changes in config.xml are loaded.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
The topic has been locked.

Start now!

Just create your account and start using Limesurvey today.

Register now