-

 index.php

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Dynamic Page Loading with Login, Active Page, and Completed Pages</title>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  <style>

    #content-container {

      margin: 10px;

      padding: 10px;

      border: 1px solid #ddd;

    }


    #page-list {

      list-style: none;

      padding: 0;

    }


    #page-list li {

      margin-bottom: 5px;

      cursor: pointer;

    }


    #page-list li.active {

      background-color: #007bff;

      color: #fff;

    }


    #page-list li.completed {

      background-color: #28a745;

      color: #fff;

    }


    #page-list li .checkmark {

      margin-right: 5px;

    }

  </style>

</head>

<body>


<!-- Button to Open Modal -->

<button type="button" class="btn btn-primary mt-4" data-toggle="modal" data-target="#pageModal">

  Open Page Modal

</button>


<!-- Page Navigation Modal -->

<div class="modal fade" id="pageModal" tabindex="-1" role="dialog" aria-labelledby="pageModalLabel" aria-hidden="true">

  <div class="modal-dialog modal-lg" role="document">

    <div class="modal-content">

      

      <div class="modal-body">


        <!-- Dynamic Page Content -->

        <div id="content-container"></div>


        <!-- Page List -->

        <ul id="page-list" class="list-group mt-3">

          <li class="list-group-item" data-page="1">Page 1</li>

          <li class="list-group-item active" data-page="2">Page 2</li>

          <li class="list-group-item" data-page="3">Page 3</li>

          <li class="list-group-item" data-page="4">Page 4</li>

        </ul>


      </div>

      <div class="modal-footer">

        <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->

        <button id="prev-btn" type="button" class="btn btn-primary float-start">Previous</button>

        <button id="next-btn" type="button" class="btn btn-primary">Next</button>

      </div>

    </div>

  </div>

</div>


<script>

  $(document).ready(function () {

    var currentPage = 1;

    var completedPages = [];


    function loadPage(page) {

      $.ajax({

        url: 'step' + page + '.php',

        type: 'GET',

        dataType: 'html',

        success: function (response) {

          $('#content-container').html(response);

          updateActivePage(page);

          updateCompletedPages();

        },

        error: function () {

          console.log('Error loading page.');

        }

      });

    }


    function updateActivePage(page) {

      $('#page-list li').removeClass('active');

      $('#page-list li[data-page="' + page + '"]').addClass('active');

    }


    function updateCompletedPages() {

      $('#page-list li').removeClass('completed');

      completedPages.forEach(function (page) {

        $('#page-list li[data-page="' + page + '"]').addClass('completed');

      });

    }


    // Function for Page 1

    function nextPage1() {

      // Add your logic for Page 1

      console.log('Next button clicked on Page 1');

    }


    // Function for Page 2

    function nextPage2() {

      // Add your logic for Page 2

      console.log('Next button clicked on Page 2');

    }



    // Initial load

    loadPage(currentPage);


    // Next button

    $('#next-btn').on('click', function () {

      completedPages.push(currentPage);


      // Call the corresponding function for the current page

      switch (currentPage) {

        case 1:

          nextPage1();

          break;

        case 2:

          nextPage2();

          break;

        case 3:

          nextPage3();

          break;

        // Add more cases for additional pages if needed


        default:

          break;

      }


      currentPage++;

      loadPage(currentPage);

    });


    // Previous button

    $('#prev-btn').on('click', function () {

      if (currentPage > 1) {

        completedPages.pop(); // Remove the last completed page

        currentPage--;

        loadPage(currentPage);

      }

    });


    // Left side navigation click

    $('#page-list li').on('click', function () {

      var selectedPage = $(this).data('page');

      currentPage = selectedPage;

      loadPage(selectedPage);

    });


    // Login form submission

    $('#loginForm').submit(function (e) {

      e.preventDefault();

      // Add your login form submission logic here

      // You can use AJAX to submit the form data and handle the login process

      $('#loginModal').modal('hide'); // Close the modal after a successful login

    });


    // Open the modal on button click

    $('#pageModal').modal('show');

  });

</script>


</body>

</html>

step1.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>Step1</h3>
</body>
</html>

step1.js

// function nextPage3() {

//     var email = document.getElementById('email');
//     if(email==''){
//         alert('email requied');
//         return false;
//     }
//     // Get the form element with ID 'step_3'
//     var formId = $('#step_3');

//     // Perform an AJAX request using serialize method to handle form data
//     $.ajax({
//         url: 'ajax.step3.php',
//         type: 'POST',
//         data: formId.serialize(), // Serialize the form data
//         success: function (response) {
//             console.log(response); // Log the response to the console on success
//         },
//         error: function () {
//             console.log('Error loading page.'); // Log an error message on failure
//         }
//     });
// }

  // Validation function for Page 2
  function validatePage3() {
    // Example validation logic for Page 2
    var requiredField = $('#email').val(); // Assuming there's an input field with ID 'page2RequiredField'

    // Check if the required field is not empty
    if (requiredField === '') {
      alert('Please fill in the required field on Page 2.');
      return false; // Validation failed
    }

    // Add more validation checks if needed

    // Validation passed
    return true;
  }

  // Function for Page 2
  function nextPage3() {
    // Validation before proceeding to the next step
    if (!validatePage3()) {
      console.log('Validation failed for Page 2. Aborting next step.');
      return;
    }

    // Additional logic for Page 2 after validation
    console.log('Next button clicked on Page 2');
  }

  // ... Other page-specific script code ...


Comments

Post a Comment

Popular posts from this blog

How to seperate character from string in php

-
?   1 2 3 4 5 6 7 8 9 $string = "abcdef" ; $result =[]; $strlen = strlen ( $string ); for ( $i =0; $i < $strlen ; $i ++) {      $result [ $i ]= $string [ $i ];   } print_r( $result );     $string = "abcdef"; $result=[]; $strlen = strlen($string); for($i=0;$i<$strlen;$i++) { $result[$i]=$string[$i]; } print_r($result);
Read more

How to Delete record using PHP Ajax

-
index.php ?   01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 <!DOCTYPE html> <html> <head>      <title></title> </head> <body>   <?php        $connection = mysqli_connect( "localhost" , "root" , "" , "db_2018" ) or die (mysqli_error());        $ReadSql = "SELECT * FROM `crud`" ;      $res = mysqli_query( $connection , $ReadSql );   ?>     <table>      <tr>          <th>name</th>          <th>Last Name</th>          <th>email id</th>          <th>gender</th>          <th>age</th>          <th>Action</th>      </tr>        <?php while ( $fetch = mysqli_fetch_array( $res )) {            extract( $fetch );         ?>
Read more

Uploads Only 10 files in month step by step

-
?   01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 <?php        $con = mysqli_connect( "localhost" , "root" , "" , "demo" );   date_default_timezone_set( 'Asia/Kolkata' );        $date = Date ( "Y-m-d" );                  if (isset( $_POST [ 'submit' ]))      {          extract( $_POST );            $name1 = $_FILES [ 'photo' ][ 'name' ];    $type = $_FILES [ 'photo' ][ 'type' ];    $size = $_FILES [ 'photo' ][ 'size' ];    $temp = $_FILES [ 'photo' ][ 'tmp_name' ];    if ( $name1 ){   $upload = "posts/" ;              $imgExt = strtolower ( pathinfo ( $name1 , PATHINFO_EXTENSION));              $valid_ext = array ( 'jpg' , 'png' , 'jpeg' );
Read more