What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can I create a text field to enter obligatorily only three numbers in a table?

    Asked by wwwclub on November 14, 2012 at 06:52 AM

    How can I create a text field to enter obligatorily only three numbers in a table, this co:

     

    759

    157

    976

    267

    654

    .......

    .....

  • Profile Image
    JotForm Support

    Answered by Welvin on November 14, 2012 at 07:14 AM

    Hi,

    You can set the text field validation into Numeric and set the Max Size to 3;

    If this isn't the one you need, please let us know.

    Thanks

  • Profile Image
    JotForm Support

    Answered by Welvin on November 14, 2012 at 07:16 AM
  • Profile Image

    Answered by wwwclub on November 14, 2012 at 07:42 AM

    It does not work because when you move to the second line and write another number, will identify how the text line break.

  • Profile Image
    JotForm Support

    Answered by Welvin on November 14, 2012 at 08:46 AM

    Hi,

    We currently do not have that feature with our form builder, you can only set a validation but you cannot control the text or limit the text per line.

    I suggest use textbox and just align them accordingly?

    Something like this: http://form.jotformpro.com/form/23182903824958, this is a bit tricky but a nice solution to do. Cheers!

    Thanks

  • Profile Image

    Answered by wwwclub on November 14, 2012 at 08:53 AM

    The problem is that there must be a text area and not a text box, to make it easier to enter numbers in the table.

    Is there any solution?

    thank you

  • Profile Image
    JotForm Support

    Answered by Welvin on November 14, 2012 at 08:58 AM

    Hi,

    The best solution for now is to let your customer know that they have to separate each number combination in new line by pressing "Enter" key of their keyboard. I am sorry.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by liyam on November 14, 2012 at 09:18 AM

    Hello wwwclub.  There is an option however to get your form's HTML source, and then place this javascript code on top of your form:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
    var s = jQuery.noConflict();   
    s(function(){
    var count1= 1;
    var chars1= 3;
    var count2= 1;
    var chars2= 3;
    var count3= 1;
    var chars3= 3;
    var count4= 1;
    var chars4= 3;
    var count5= 1;
    var chars5= 3;
     
    s('textarea').keydown(function(event) {
       
    if ( event.keyCode == 46 || event.keyCode == 8 ) {
                // let it happen, don't do anything
            }
            else {
                // Ensure that it is a number and stop the keypress
                if (event.keyCode < 48 || event.keyCode > 57 ) {
                    event.preventDefault();   
                }   
            }   
    });


    s('#input_11').keydown(function() {
        var v = s(this).val();
        var vl = v.replace(/(\r\n|\n|\r)/gm,"").length; 
        if (parseInt(vl/count1) == chars1) {
            s(this).val(v + '\n');
        count1++;
      }
    });
    s('#input_16').keydown(function() {
        var v = s(this).val();
        var vl = v.replace(/(\r\n|\n|\r)/gm,"").length;  
        if (parseInt(vl/count2) == chars2) {
            s(this).val(v + '\n');
        count2++;
      }
    }); 
    s('#input_19').keydown(function() {
        var v = s(this).val();
        var vl = v.replace(/(\r\n|\n|\r)/gm,"").length;  
        if (parseInt(vl/count3) == chars3) {
            s(this).val(v + '\n');
        count3++;
      }
    });
    s('#input_18').keydown(function() {
        var v = s(this).val();
        var vl = v.replace(/(\r\n|\n|\r)/gm,"").length;  
        if (parseInt(vl/count4) == chars4) {
            s(this).val(v + '\n');
        count4++;
      }
    });
    s('#input_17').keydown(function() {
        var v = s(this).val();
        var vl = v.replace(/(\r\n|\n|\r)/gm,"").length;  
        if (parseInt(vl/count5) == chars5) {
            s(this).val(v + '\n');
        count5++;
      }
    });
     
    });  //]]>
      
    </script>

    Once you're successful, your form should function like this: http://liyam.awardspace.com/jotform/textarea_3_chars.html

    Please let us know if you have further questions or concerns.

  • Profile Image

    Answered by wwwclub on November 14, 2012 at 02:40 PM

    Your help is very important to us, but we still can not get it working ... This is your page and works http://liyam.awardspace.com/jotform/textarea_3_chars.html

    But we put the page as well, and does not work: http://www.terminus.idn.pt//formulario-jotform-apostasefectivas.htm

    And then we put an iframe, but no results ...

     

    Does it lack something because your page works and ours not?

  • Profile Image
    JotForm Support

    Answered by NeilVicente on November 14, 2012 at 03:27 PM

    @wwwclub

    The customized form on your page works great on my end. May I ask if you're still having issues with the solution provided by my colleague?

  • Profile Image
    JotForm Support

    Answered by liyam on November 14, 2012 at 07:38 PM

    In addition to NeilVicente's response, I noticed that your CSS isn't read by your web page properly. I recommend that you rename the file to a proper .css filename so for it to be read by your server.   And to be sure, do the change also for the one that tries to load the prototype js file.

    <link type="text/css" rel="stylesheet" href="./formulario-jotform-apostasefectivas_files/g=formCss">

    <script type="text/javascript" src="./formulario-jotform-apostasefectivas_files/g=jotform"></script>

    Another thing, I recommend that you remove the validation on your text area:

    <textarea id="input_11" class="form-textarea validate[required, Numeric] form-validation-error" rows="15" cols="10" name="q11_numerosc1"></textarea>

    Please let us know if you need further assistance.

  • Profile Image
    JotForm Support

    Answered by abajan on November 15, 2012 at 04:47 AM

    @wwwclub

    In addition to the above suggestions, it would be preferable to place the script at the bottom of the page within which the form is embedded, right before the closing body tag. Also, besides removing the numeric validation from the first text area, do the following:

    1. Reduce the Required Field error message to just "obrigatório": Setup & Embed tab > Preferences > Advanced Settings > Edit From Warnings > see this guide (Edit the first message instead of the fifth)

    2. Inject the following CSS:

    .form-line-error {
    background: none repeat scroll 0 0;
    }

    #id_7 .form-error-message,
    #id_8 .form-error-message {
    width: 210px;
    }

    .form-error-message {
    width: 105px;
    }

    3. You may also wish to disable the highlight effect on focused fields

    Those changes can be seen in this demo.

  • Profile Image

    Answered by guest_23197181687060 on November 16, 2012 at 05:29 AM

    Hello !...

     

    After studying your instructions well already solved the problem and simply.

    See this page we are building: http://www.terminus.idn.pt/

     

    Thank you for your help.

  • Profile Image
    JotForm Support

    Answered by abajan on November 16, 2012 at 06:50 AM

    @wwwclub

    Glad to see that you were able to get this to work. However, upon testing your form, I discovered that the numeric keypad (numpad) can't be used to enter digits in the textareas. To correct that, please update the script Liyam provided to this.

    Thanks.