Sign Up

Sign Up to our social questions and Answers Engine to ask questions, answer people's questions, and connect with other people.

Have an account? Sign In
Continue with Facebook
Continue with Google
or use

Have an account? Sign In Now

Sign In

Continue with Facebook
Continue with Google
or use

Forgot Password?

Don't have account, Sign Up Here

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Have an account? Sign In Now

Sorry, you do not have a permission to ask a question, You must login to ask question.

Continue with Facebook
Continue with Google
or use

Forgot Password?

Need An Account, Sign Up Here

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Please briefly explain why you feel this user should be reported.

Sign InSign Up

Ansfind

Ansfind Logo Ansfind Logo Ansfind Logo Ansfind Logo
Add question

Ansfind Navigation

  • About Us
  • Groups
    • Add group
Search
Add Question

Mobile menu

Close
Ask a Question
  • Home
  • Communities
  • Questions
    • New Questions
    • Trending Questions
    • Hot Questions
  • Polls
  • Tags
  • Points
  • Users
  • FAQs
  • Help
  • Contact Us
Home/ Questions/Q 57320
In Process
Ramesha
Ramesha
Asked: January 24, 20232023-01-24T20:21:18+05:30 2023-01-24T20:21:18+05:30In: Education and learning

Create a multi step html form using javascript/ PHP?

I have a html form which is quite lengthy. I want to split the form or make steps by adding a continue button at the bottom of the form. can you suggest how to do it? also if possible please create the PHP code?

html formjavascriptmultistep formphp
  • 0
  • 11
  • 6
  • 0
  • Share
    • Share on Facebook
    • Share on Twitter
    • Share on LinkedIn
    • Share on WhatsApp
Answer
  • Report

1 Answer

  • Voted
  • Oldest
  • Recent
  1. Manu Murthy Engineer
    2023-01-24T20:25:45+05:30Added an answer on January 24, 2023 at 8:25 pm

    There are a few ways to split a form into multiple steps, but one of the easiest is to use JavaScript or jQuery to hide and show different sections of the form based on the user’s progress. Here’s an example using jQuery:

    1. Create your form as one long HTML document, but divide it into sections using divs. For example:
    <form>
      <div id="step1">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        <button type="button" id="continue1">Continue</button>
      </div>
      <div id="step2" style="display:none;">
        <label for="address">Address:</label>
        <input type="text" id="address" name="address">
        <label for="city">City:</label>
        <input type="text" id="city" name="city">
        <button type="button" id="continue2">Continue</button>
      </div>
      <div id="step3" style="display:none;">
        <label for="phone">Phone:</label>
        <input type="text" id="phone" name="phone">
        <label for="submit"></label>
        <button type="submit">Submit</button>
      </div>
    </form>
    
    
    1. Add the jQuery library to your HTML file and add a script to hide and show the different sections of the form. For example:
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function(){
        $("#continue1").click(function(){
          $("#step1").hide();
          $("#step2").show();
        });
        $("#continue2").click(function(){
          $("#step2").hide();
          $("#step3").show();
        });
      });
    </script>
    
    1. To handle the form submission in PHP, you can use the $_POST variable to access the form data and process it as needed. For example:
    if(isset($_POST['name']) && isset($_POST['email']) && isset($_POST['address']) && isset($_POST['city']) && isset($_POST['phone'])) {
        // form was submitted, process the data
        $name = $_POST['name'];
        $email = $_POST['email'];
        $address = $_POST['address'];
        $city = $_POST['city'];
        $phone = $_POST['phone'];
        // do something with the data, such as insert it into a database
    }
    
    This is just one example of how you can split a form into multiple steps. You can customize the code to suit your specific needs and use different techniques such as progress bars or breadcrumb navigation to guide the user through the form.
    • 0
    • Reply
    • Share
      Share
      • Share on Facebook
      • Share on Twitter
      • Share on LinkedIn
      • Share on WhatsApp
      • Report
Leave an answer

Leave an answer
Cancel reply

Choose from here the video type.

Put Video ID here: https://www.youtube.com/watch?v=sdUUx5FdySs Ex: "sdUUx5FdySs".

Related Questions

  • Which of the following function in PHP returns a text in title case from a variable?
  • Which of the following function is used to compress a string in PHP?
  • Which PHP function is capable to read specific number of characters from a file?
  • Which PHP function is used to find the position of the last occurrence of a substring inside another string?
  • The function in PHP that can be used to concatenate array elements to form a single delimited string is
  • Which one of the following is the correct way for calling the JavaScript code?
  • Which type of JavaScript language is ___?
  • What is the difference between Java and JavaScript?
  • Which is the correct way to write a javascript array
  • Which of the following is not a variable scope in PHP?

Sidebar

Top Users

Janeclarizz Belmores

Janeclarizz Belmores

  • 3,722 Points
SaRa

SaRa

  • 3,388 Points
Professor
Wish Lay

Wish Lay

  • 2,609 Points

Adv 250x250

  • About Us
  • Home
  • Communities
  • Tags
  • Points
  • Users
  • Help
  • Contact Us
  • Referrals
  • Policies
    • Privacy policy
    • Terms of use
Revenue

© 2023 Ansfind. | Designed by Weboptify

monetization_on Earn home Home
search Search
help Add

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.