Force numeric key pad to appear in mobile view

Question

I have a similar query to this past forum post: https://www.sawtoothsoftware.com/forum/13930/force-numeric-keyboard-for-mobile-device?show=13930#q13930

This works fine in a standard O/E question.

I have a grid question with 2 rows and 1 column as follows:

Pa1_r1_c1 (name)
Pa1_r2_c1 (phone number)

Both row variables are O/E.

I'd like to force the numeric keypad to appear only for row 2 in mobile view (the phone number).

I thought this would work but the alphabetical keypad appears:

<script>
$(document).ready(function(){
    $('#[% P1a_r2_c1%]').attr('type', 'tel');
})
</script>

Any suggestions? Thank you.

Answer 1

As-is, your code is going to try to change the type attribute on an element whose ID is the *response* of P1a_r2_c1.  You need to change the type attribute on the element whose ID is P1a_r2_c1.

<script>
$(document).ready(function(){
    $('#P1a_r2_c1').attr('type', 'tel');
})
</script>

Comments

Thanks once again Zachary. Much appreciated for the solution.