Auto Submit When Character reaches a Particular Number in a form isn't Working

Question

This Code Works but when i copy and paste into it, it doesn't submit.

<script src="jquery-3.2.1.min.js"></script>

<form id="Form" action="pro_add_invoice.cfm" method="post">
    <input id="here"name="htno" type="text" value="" />&nbsp;
    <input id="subHere" type="submit" value="Submit"  />
</form>

<script>
    $('#here').keyup(function(){
        if(this.value.length ==10){
          $('#Form').submit();
        }
    });
</script>

do you want to click after that the user typed 10 digits/chars? — quirimmo, May 22 '17 at 22:17
@quirimmo I only want the form to submit, i.e going to the processing page. — Wicfasho, May 22 '17 at 22:46
but when? when inside the input #here you have a string with 10 characters? and please change `$('#subHere').click();` to `$('#Form').submit();`. The submit will occur when you type inside the text field a word with 10 character? Type this "abcabcabca"and it should submit — quirimmo, May 22 '17 at 22:48
@quirimmo, i already changed that but that. I tested but not working — Wicfasho, May 22 '17 at 23:10

wlh · Accepted Answer · 2017-05-22T23:17:15.087

0

I'm assuming you just want to submit the form after ten characters are entered. You can use $().submit() instead and pass in the id of the form.

<form id="Form" action="sell.cfm" method="post">
    <input id="here"name="htno" type="text" value="" />&nbsp;
    <input id="subHere" type="submit" value="Submit"  />
</form>

<script>
    //$('#here').keyup(function(){
    //    if(this.value.length ==10){
    //      $('#Form').submit();
    //    }
    //});

    var input = document.querySelector('#here');
    input.addEventListener('keyup', checkLength);
    function checkLength(e){
        if(e.target.value.length===10){
            document.forms["Form"].submit();
        }
    }

</script>

edited May 22 '17 at 23:17

answered May 22 '17 at 22:18

wlh

3,426
1
16
32

It worked fine in my browser. Keep in mind you have to have jQuery pre-loaded. – wlh May 22 '17 at 23:07
Thanks. The last Statement Helped. i wasn't Loading the jquery file. – Wicfasho May 22 '17 at 23:15
Cool. I just edited my response to show how to do it in vanilla javascript as well – wlh May 22 '17 at 23:17
I tried copying and pasting characters in the field but it wont load unless i type them. – Wicfasho May 22 '17 at 23:18
Correct, this is because you are using the `keyup` function. It is only listening for when you release a keyboard key. – wlh May 22 '17 at 23:18
So, how can i go about it @wlh – Wicfasho May 22 '17 at 23:22
Here's some more ways to research this: https://stackoverflow.com/questions/686995/catch-paste-input/1503425#1503425 – wlh May 22 '17 at 23:42

score 0 · Answer 2 · answered May 22 '17 at 22:23

If you want to submit the form you cannot use click event handler. That's only for click events. you need to call the submit method of the form element to submit the form.

Change your If statement to execute the following:

Vanilla JS:

document.forms.Form.submit();

or JQuery:

$('#Form').submit();

SO...

<script>
    $('#here').keyup(function(){
    if(this.value.length ==10){
      $('#Form').submit();
    }
});
</script>

score -1 · Answer 3 · answered May 22 '17 at 22:34

-1

I think the problem here is this context is not belong to #here, the scope in the anonymous function (probably) belong to window.

I didn't try it yet but maybe this solve the problem, try change this to ('#here')

answered May 22 '17 at 22:34

billyzaelani

567
1
5
18

Did you try it and verify that `this` was out of scope? – wlh May 22 '17 at 23:08
If you consist, here the [jsfidle](https://jsfiddle.net/8up4v32k/). Note: the reason I didn't verify it because i did't use JQuery, the test in jsfidle didn't use jquery but it just prove the `this` context is not belong to `#here`. – billyzaelani May 23 '17 at 03:17

Auto Submit When Character reaches a Particular Number in a form isn't Working

3 Answers3