Twitter Bootstrap Question posted in

Submit a form using Pagination-Twitter bootstrap

I have 4 pages where the user inputs multiple data. My only problem atm is that instead of having a button saying submit, I wanted the Pagination Next to be the one that submits the data.

How can I achive that? I tried some stuff but it just changes my pagination next button to a normal button.

I tried to use type="submit" on the next button but it doesnt submit the data to EnvironmentData

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">

    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">


<div class="container">
    <form action="EnvironmentData" method="get" id="page1">
    <div class="row">
    <div class="col-md-5">
        <div class="row">
            <div class="form-group">
                    <label>Name:</label><input type="text" class="form-control" name="name">
            </div>
        </div>
    <div class="row">
    <!--Pagination-->
    <div class="text-center">
        <nav>
            <ul class="pagination text-center">
                <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                <li class="page-item active"><a class="page-link" href="GeneralSetup.jsp">1</a></li>
                <li class="page-item"><a class="page-link" href="Clients.jsp">2</a></li>
                <li class="page-item"><a class="page-link" href="Accounts.jsp">3</a></li>
                <li class="page-item"><a class="page-link" href="Transactions.jsp">4</a></li>
                <li class="page-item"><a type="submit" class="page-link" href="Clients.jsp">Next</a></li>
            </ul>
        </nav>
    </div>
    </div>
    </form>
Tags:

2

Answers


  1. 0

    I think you can use jQuery for this.

    $('#next').click(function(){
    $('#myForm').submit();
});
    Login or Signup to reply.
  2. 0

    I hope this is what you’re looking for.

    You can use JavaScript for this:

    Firstly, before the JavaScript, on your “Next” anchor tag, add an onclick event:

     <li class="page-item"><a type="submit" class="page-link" href="Clients.jsp" onclick="submitForm()">Next</a></li>

    And then add the JavaScript:

    <script>
function submitForm(){
document.getElementById("page1").submit();
}
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search