Jquery trigger enter and clicked button functionality on form

Question

I am working on a form and in that form button is disabled by starting and after filling the form button will get able to submit it. Now, I want that after filling the form the user should be able to submit the form by clicking enter button as well and it should validate if the all the fields are filled or not as well. I want this functionality with Jquery only.

Thanks in advance.

Here is the code on which I want this to be:-

<html>
    <head>
        <title></title>
    </head>
    <body>

    <div class="form-group"> 
    <label for="URL">Website - (Optional Field)</label> 
    <input class="form-control" id="URL" placeholder="www.example.com" type="url"> 
    </div> 
    <div class="form-group"> 
    <label for="Legal_Name">Name</label> 
    <input class="form-control" id="Legal_Name" placeholder="Enter Your Legal Name" type="text"> 
    </div> 
    <div class="form-group"> <label for="Doing_Business">Doing As - (Common Name) </label> 
    <input class="form-control" id="Doing" type="email"> 
    </div> 
    <button type="submit" class="btn btn-default section_btn section-5-next hover_ease btn_disable">Next</button>

    </body>
    </html>

<script>$('.section-5-next').click(function(){
    $('.section-5').hide();
        $('.section-6').fadeIn();
        $('.Progress_Status').html('35%').css({'width':'35%'});
    });
</script>

I have answered your question, but don't know why it got down vote. So have you checked it? Hope it will give you what you want. — Himanshu Upadhyay, Oct 06 '17 at 12:45
I have checked it. It is working on button click but not on enter press. — , Oct 06 '17 at 13:04
ok @nishant, I have updated my answer. You can check it now. I changed jquery selector to `form-control` class instead of `input`. — Himanshu Upadhyay, Oct 06 '17 at 13:24
Have you placed all these code inside document.ready function? — Himanshu Upadhyay, Oct 06 '17 at 13:29
Thanks the code is working nice now but it is submitting the form even without any field filled. How can I validate if all the fields are filled or not now? — , Oct 06 '17 at 13:37
You can add `required` attribute for the inputs. By the way, as my answer has solved your main question, can you accept it please? — Himanshu Upadhyay, Oct 06 '17 at 13:40
I want it from jQuery if it is possible. Sorry for the troube but I have just started learning jQuery — , Oct 06 '17 at 13:42

Himanshu Upadhyay · Answer 1 · 2017-10-06T13:31:28.587

0

You can do like this using jquery:

<script>
$(document).ready(function(){
    $('.section-5-next').click(function(){
        $('.section-5').hide();
        $('.section-6').fadeIn();
        $('.Progress_Status').html('35%').css({'width':'35%'});
    });
    $('.form-control').keypress(function (e) {
        if (e.which == 13) {
          $('form').submit();
        }
    });
});
</script>

edited Oct 06 '17 at 13:31

answered Oct 06 '17 at 12:42

Himanshu Upadhyay

6,220
1
13
32

Can you explain, why down vote? Downvote without explanation is not useful. – Himanshu Upadhyay Oct 06 '17 at 12:42
I perceived he just joined – Samuel James Oct 06 '17 at 12:54
@SamuelJames, I did not get you. – Himanshu Upadhyay Oct 06 '17 at 12:55
He's still new may be the reason for down vote. Your solution is elegant – Samuel James Oct 06 '17 at 12:57
@nishant, as my answer has solved your main question, can you accept it please? And as you want to validate your form using jquery, you need to use jquery's validator plugin/library. [Here is the example](https://codepen.io/SitePoint/pen/akPoad). – Himanshu Upadhyay Oct 06 '17 at 13:47
@nishant, this answer was accepted before. You removed it ? – Himanshu Upadhyay Oct 07 '17 at 06:43
yea because I have accepted by mistake at that time @HimanshuUpadhyay – Oct 09 '17 at 10:00
@nishant, ok, but my answer had solved the issue you mentioned in your question. – Himanshu Upadhyay Oct 09 '17 at 10:03
read it properly man I have said it is working but without validation and in code description I have clearly stated that I want something with validation and this is not what I want. @HimanshuUpadhyay – Oct 09 '17 at 11:06

score 0 · Answer 2 · answered Oct 06 '17 at 12:44

0

Check this Submit form with Enter key without submit button?

$("input").keypress(function(e) {
    if (e.which == 13) {
        event.preventDefault();
        $("#formtosubmit").submit();
    }
});

answered Oct 06 '17 at 12:44

Samuel James

1,350
12
15

Jquery trigger enter and clicked button functionality on form

2 Answers2