Dynamically Added Input fields passed Validation and submit cannot to another page

Question

I 'm beginner, In dynamically added Input fields Reference From: Validate Dynamically Added Input fields, when passed Validation and submit cannot to another page

Follow script sample.

<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
        var numberIncr = 1; // used to increment the name for the inputs

        function addInput() {
            $('#inputs').append($('<input class="comment" name="name'+numberIncr+'" />'));
            numberIncr++;
        }

        $('form.commentForm').on('submit', function(event) {

            // adding rules for inputs with class 'comment'
            $('input.comment').each(function() {
                $(this).rules("add", 
                    {
                        required: true
                    })
            });            

            // prevent default submit action         
            event.preventDefault();

            // test if form is valid 
            if($('form.commentForm').validate().form()) {
                console.log("validates");
            } else {
                console.log("does not validate");
            }
        })

        // set handler for addInput button click
        $("#addInput").on('click', addInput);

        // initialize the validator
        $('form.commentForm').validate();

   });


</script>

when passed validation click submit butt cannot to action="/action_page_post.php"

And HTML code

<form class="commentForm" method="get" action="/action_page_post.ph">
    <div>

        <p id="inputs">    
            <input class="comment" name="name0" />
        </p>

    <input class="submit" type="submit" value="Submit" />
    <input type="button" value="add" id="addInput" />

    </div>
</form>

i think there is a problem with action....check your file name properly it will be action_page_post.php and not.ph — Mudassar Saiyed, Mar 01 '17 at 06:43

Sagar V · Accepted Answer · 2017-03-01T16:59:04.933

Changes I made

changed on('submit') to submitbutton.onclick
added $('.commentForm').submit(); inside the if condition which execute if the validation is true

Reason : Since you are using event.preventDefault(), it will prevent the default behaviour of the form and so did not go to next page. So You have to submit the form manually using $(form).submit();
The below code will work on normal page but not on SO Snippet

$(document).ready(function() {
        var numberIncr = 1; // used to increment the name for the inputs

        function addInput() {
            $('#inputs').append($('<input class="comment" name="name'+numberIncr+'" />'));
            numberIncr++;
        }

        $('input.submit').click(function(event) {
            // adding rules for inputs with class 'comment'
            $('input.comment').each(function() {
                $(this).rules("add", 
                    {
                        required: true
                    });
            });            

            // prevent default submit action         
            event.preventDefault();
            // test if form is valid 
            if($('form.commentForm').validate().form()) {
                console.log("validates");
                $('.commentForm').submit();
            } else {
                console.log("does not validate");
            }
        })

        // set handler for addInput button click
        $("#addInput").on('click', addInput);

        // initialize the validator
        $('form.commentForm').validate();
        

   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<form class="commentForm" method="get" action="action_page_post.php">
    <div>

        <p id="inputs">    
            <input type="text" class="comment" name="name0" />
        </p>

    <input class="submit" type="submit" value="Submit" />
    <input type="button" value="add" id="addInput" />

    </div>
</form>

Ya. Thanks @Sparky, it was a typo. Corrected. – Sagar V Mar 01 '17 at 16:59 — Sagar V, Mar 01 '17 at 16:59

Dynamically Added Input fields passed Validation and submit cannot to another page

1 Answers1