How can I move to the next page after clicking onto the submit button, I can't move even after clicking on the submit button

Question

How can i move to the next page after clicking onthe submit button, in my case my submit button is not working. I used some JQuery code inside this html page, is that a reason?

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="form_table_output.html" name="myform" method="post" style="width: 1200px; margin:0px auto">
  <h1 title="Cycle calculation"> Cycle Time Calculation INSIGNUM </h1>
  <hr><br>

  <table border="0" cellpadding="18" cellspacing="10" style="margin:0px 40px;">
    <tr>  
                <td style="width: 50%">
                    <label for="to_check_recognition"><b>Do you have to check Orientation? <span style="color:red">*</span></b></label><br><br>
                    <select id="to_check_recognition" name="to_check_recognition" style="width: 350px; height: 35px; border-radius: 8px" required>
                        <option value="" disabled selected > Please Select... </option>
                        <option value="yes"> Yes</option>
                        <option value="no"> No </option> 
                    </select><br><br>
                </td> 
                <td style="width: 50%">
                    <div  id = "Average_orientation" style="display: none;">
                    <label for="Average_orientation"><b>Average amount of orientation check per panel <span style="color:red">*</span></b></label><br><br>
                    <input type = "number" step="any" name = "Average_orientation" style="width: 350px; height: 25px; border-radius: 8px" required /><br><br>
                </td>
            </tr>
            <script>
                $(document).ready(function() {
                    Orientation();
                    $("#to_check_recognition").change(function() {
                        Orientation();
                    });
                });
                function Orientation() {
                    if ($("#to_check_recognition").val() == 'yes')
                        $("#Average_orientation").show();
                    else
                        $("#Average_orientation").hide();
                }
            </script>
            <tr> 
            	<td colspan="2" style="text-align: right; height: 225px">
                    <input name="submit" type="submit" value="Click To Submit" style="width: 200px; height: 50px; border-radius: 12px; color: blue; background: gold; cursor: pointer;" />
                </td> 
            </tr>
        </table>
    </form>
</body>
  </html>
  

Answer 1

You have given required attribute to input:

<input type = "number" step="any" name = "Average_orientation" style="width: 350px; height: 25px; border-radius: 8px" required />

When you select no & input is hidden, due to required attribute, form is not submitted.

Change value of input to 0 then submit form:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="form_table_output.html" name="myform" method="post" style="width: 1200px; margin:0px auto">
  <h1 title="Cycle calculation"> Cycle Time Calculation INSIGNUM </h1>
  <hr><br>

  <table border="0" cellpadding="18" cellspacing="10" style="margin:0px 40px;">
    <tr>  
                <td style="width: 50%">
                    <label for="to_check_recognition"><b>Do you have to check Orientation? <span style="color:red">*</span></b></label><br><br>
                    <select id="to_check_recognition" name="to_check_recognition" style="width: 350px; height: 35px; border-radius: 8px" required>
                        <option value="" disabled selected > Please Select... </option>
                        <option value="yes"> Yes</option>
                        <option value="no"> No </option> 
                    </select><br><br>
                </td> 
                <td style="width: 50%">
                    <div  id = "Average_orientation" style="display: none;">
                    <label for="Average_orientation"><b>Average amount of orientation check per panel <span style="color:red">*</span></b></label><br><br>
                    <input type = "number" step="any" name = "Average_orientation" style="width: 350px; height: 25px; border-radius: 8px" required /><br><br>
                </td>
            </tr>
            <script>
                $(document).ready(function() {
                    Orientation();
                    $("#to_check_recognition").change(function() {
                        Orientation();
                    });
                });
                function Orientation() {
                    if($("#to_check_recognition").val() == 'yes'){
                        $("#Average_orientation").show();$("input[name=Average_orientation]").val("");}else if($("#to_check_recognition").val() == 'no'){
                  $("#Average_orientation"). hide();$("input[name=Average_orientation]").val("0");  }
                }
            </script>
            <tr> 
            	<td colspan="2" style="text-align: right; height: 225px">
                    <input name="submit" type="submit" value="Click To Submit" style="width: 200px; height: 50px; border-radius: 12px; color: blue; background: gold; cursor: pointer;" />
                </td> 
            </tr>
        </table>
    </form>
</body>
  </html>
  

Answer 2

submit button is working fine and correctly redirect to "form_table_output.html". But the error is a bad path i.e. this is path "form_table_output.html" not exist. So please define it in your codebase.

Answer 3

in my case my submit button is not working

When I am testing your code I am correctly redirecting to "form_table_output.html"

What do you mean, when you click nothing happen or when you click something happen but it is not what you want?