Skip to main content

Hiding previous button and dynamically adding submit button in vanilla JS multi-step form?

I am building a multi-stage form in vanilla HTML/CSS/JS and bootstrap.

I would like assistance amending my codepen so that:

  • On the first step/tab, the previous button is not displayed. Currently, it appears if you press the previous button and return to the first page.
  • On the final step/tab, a submit button is dynamically added and replaces the next button (which is redundant on this final step).
  • Make the placeholder styling in the textarea go to the top of the box (not center as it is now).

The styling is wrong on the codepen as it hasn't come through properly, but it is functional nonetheless so it doesn't matter for the purposes of these questions.

Codepen is here:

https://codepen.io/trusaiyan/pen/eYLOaja

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PAGE</title>

    <!-- font awesome cdn link  -->

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
      integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

    <!-- BOOTSTRAP cdn link  -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />

    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
    />

    <!-- custom css file link  -->
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <!-- header section starts  -->

    <header class="header">
      <nav id="navbar" class="nav">
        <img src="images/logo2.png" alt="" />
      </nav>
    </header>
    <!-- END NAV -->
    <main>
      <!-- START CARD -->
      <div class="card-container">
        <div class="card-header pa-5">
          <h1>DEMO SURVEY</h1>
        </div>
        <div class="card-progress">
          <div class="progress">
            <div
              class="progress-bar progress-bar-striped progress-bar-animated"
              role="progressbar"
              aria-valuenow="1"
              aria-valuemin="0"
              aria-valuemax="7"
              style="width: 0%"
              id="progress"
            ></div>
          </div>
          <p class="progress-text">
            Step <span id="tabNo">1</span> of <span>7</span>
          </p>
        </div>
        <div class="card-content pa-5">
          <h2 id="title">YOUR DETAILS</h2>
          <p id="description">Please enter your details</p>

          <form action="">
            <div class="page active-page" id="page1">
              <div class="form-inputs-text">
                <div class="columns">
                  <label for="firstName">First Name</label> <br />
                  <input
                    type="text"
                    id="firstName"
                    name="firstName"
                    placeholder="Enter first name"
                  />
                </div>
                <div class="columns">
                  <label for="lastName">Last Name</label> <br />
                  <input
                    type="text"
                    id="lastName"
                    name="lastName"
                    placeholder="Enter last name"
                  />
                </div>
              </div>
              <div class="form-inputs-text">
                <div class="columns">
                  <label for="emailAddress">Email</label> <br />
                  <input
                    type="email"
                    id="emailAddress"
                    name="emailAddress"
                    placeholder="Enter email address"
                  />
                </div>
                <div class="columns">
                  <label for="position">Position</label> <br />
                  <input
                    type="text"
                    id="position"
                    name="position"
                    placeholder="Enter position"
                  />
                </div>
              </div>
              <div class="form-inputs-text">
                <div class="columns">
                  <label for="Title">Title</label> <br />
                  <input
                    type="text"
                    id="title"
                    name="title"
                    placeholder="Enter title"
                  />
                </div>
                <div class="columns">
                  <label for="phoneNumber">Phone Number</label> <br />
                  <input
                    type="tel"
                    id="phoneNumber"
                    name="phoneNumber"
                    placeholder="Enter phone number"
                  />
                </div>
              </div>
              <div class="form-inputs-text">
                <div class="columns">
                  <label for="country">Country</label> <br />
                  <select name="country" id="country">
                    <option value="Albania">Albania</option>
                    <option value="Andorra">Andorra</option>
                    <option value="Australia">Australia</option>
                    <option value="Austria">Austria</option>
                    <option value="Belgium">Belgium</option>
                    <option value="Bosnia and Herzegovina">
                      Bosnia & Herzegovina
                    </option>
                    <option value="Bulgaria">Bulgaria</option>
                    <option value="Canada">Canada</option>
                    <option value="Croatia">Croatia</option>
                    <option value="Cyprus">Cyprus</option>
                    <option value="Czech Republic">Czech Republic</option>
                    <option value="Denmark">Denmark</option>
                    <option value="Estonia">Estonia</option>
                    <option value="Faroe Islands">Faroe Islands</option>
                    <option value="Finland">Finland</option>
                    <option value="France">France</option>
                    <option value="Georgia">Georgia</option>
                    <option value="Germany">Germany</option>
                    <option value="Greece">Greece</option>
                    <option value="Hungary">Hungary</option>
                    <option value="Iceland">Iceland</option>
                    <option value="Ireland">Ireland</option>
                    <option value="Israel">Israel</option>
                    <option value="Italy">Italy</option>
                    <option value="Latvia">Latvia</option>
                    form-group
                    <option value="Liechtenstein">Liechtenstein</option>
                    <option value="Lithuania">Lithuania</option>
                    <option value="Luxembourg">Luxembourg</option>
                    <option value="Macedonia, The Former Yugoslav Republic of">
                      North Macedonia
                    </option>
                    <option value="Malta">Malta</option>
                    <option value="Moldova, Republic of">Moldova</option>
                    <option value="Montenegro">Montenegro</option>
                    <option value="Netherlands">Netherlands</option>
                    <option value="Norway">Norway</option>
                    <option value="Poland">Poland</option>
                    <option value="Portugal">Portugal</option>
                    <option value="Romania">Romania</option>
                    <option value="Serbia">Serbia</option>
                    <option value="Slovakia">Slovakia</option>
                    <option value="Slovenia">Slovenia</option>
                    <option value="Spain">Spain</option>
                    <option value="Sweden">Sweden</option>
                    <option value="Switzerland">Switzerland</option>
                    <option value="Turkey">Turkey</option>
                    <option value="Ukraine">Ukraine</option>
                    <option value="United Kingdom">United Kingdom</option>
                    <option value="United States">United States</option>
                  </select>
                </div>
                <div class="columns">
                  <label for="company">Company</label> <br />
                  <input
                    type="tel"
                    id="company"
                    name="company"
                    placeholder="Enter company name"
                  />
                </div>
              </div>
              <div class="form-inputs-text">
                <div class="columns">
                  <label for="Title">Company Website</label> <br />
                  <input
                    type="text"
                    id="website"
                    name="title"
                    placeholder="Enter website URL"
                  />
                </div>
              </div>
            </div>
            <div class="page" id="page2">
              <div class="input-labels-radio">
                <label for="rating">Very poor</label>
                <label for="rating">Poor</label>
                <label for="rating">OK</label>
                <label for="rating">Good</label>
                <label for="rating">Very good</label>
              </div>
              <div class="form-inputs-radio">
                <input type="radio" id="rating1" name="rating" />
                <input type="radio" id="rating2" name="rating" />
                <input type="radio" id="rating3" name="rating" />
                <input type="radio" id="rating4" name="rating" />
                <input type="radio" id="rating5" name="rating" />
              </div>
            </div>
            <div class="page" id="page3">
              <div class="input-labels-radio">
                <label for="rating">Very unclear</label>
                <label for="rating">Unclear</label>
                <label for="rating">Acceptable</label>
                <label for="rating">Clear</label>
                <label for="rating">Very clear</label>
              </div>
              <div class="form-inputs-radio">
                <input type="radio" id="rating1" name="rating" />
                <input type="radio" id="rating2" name="rating" />
                <input type="radio" id="rating3" name="rating" />
                <input type="radio" id="rating4" name="rating" />
                <input type="radio" id="rating5" name="rating" />
              </div>
            </div>
            <div class="page" id="page4">
              <div class="input-labels-radio">
                <label for="rating">Very easy</label>
                <label for="rating">Easy</label>
                <label for="rating">OK</label>
                <label for="rating">Difficult</label>
                <label for="rating">Very difficult</label>
              </div>
              <div class="form-inputs-radio">
                <input type="radio" id="rating1" name="rating" />
                <input type="radio" id="rating2" name="rating" />
                <input type="radio" id="rating3" name="rating" />
                <input type="radio" id="rating4" name="rating" />
                <input type="radio" id="rating5" name="rating" />
              </div>
            </div>
            <div class="page" id="page5">
              <div class="form-inputs-text">
                <!-- <label for="Title">Input</label> <br /> -->
                <input
                  type="text"
                  id="message"
                  name="message"
                  placeholder="Enter your text here"
                />
              </div>
            </div>
            <div class="page" id="page6">
              <div class="input-labels-radio">
                <label for="rating">Very poor</label>
                <label for="rating">Quite poor</label>
                <label for="rating">Acceptable</label>
                <label for="rating">Good</label>
                <label for="rating">Extremely good</label>
              </div>
              <div class="form-inputs-radio">
                <input type="radio" id="rating1" name="rating" />
                <input type="radio" id="rating2" name="rating" />
                <input type="radio" id="rating3" name="rating" />
                <input type="radio" id="rating4" name="rating" />
                <input type="radio" id="rating5" name="rating" />
              </div>
            </div>
            <div class="page" id="page7">
              <div class="input-labels-radio">
                <label for="rating">Very poor</label>
                <label for="rating">Quite poor</label>
                <label for="rating">Acceptable</label>
                <label for="rating">Good</label>
                <label for="rating">Extremely good</label>
              </div>
              <div class="form-inputs-radio">
                <input type="radio" id="rating1" name="rating" />
                <input type="radio" id="rating2" name="rating" />
                <input type="radio" id="rating3" name="rating" />
                <input type="radio" id="rating4" name="rating" />
                <input type="radio" id="rating5" name="rating" />
              </div>
            </div>
          </form>
        </div>
        <div class="card-actions pa-5">
          <!-- <p>You have spent 2 mins doing this form</p> -->
          <div>
            <button onclick="prevTab()" class="btn btn-primary" id="prevBtn">
              Previous
            </button>
            <button onclick="nextTab()" class="btn btn-primary" id="nextBtn">
              Next
            </button>
          </div>
        </div>
      </div>
    </main>
    <!-- footer section ends -->

    <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

    <!-- custom js file link  -->
    <script src="js/script.js"></script>
  </body>
</html>

const info = [
  {
    title: "YOUR DETAILS",
    description: "Please enter your details",
  },
  {
    title: "SYSTEM CHECK",
    description: "How was the overall System Check experience?",
  },
  {
    title: "SYSTEM CHECK",
    description: "How clear were the System Check instructions?",
  },
  {
    title: "SYSTEM CHECK",
    description: "How easy to complete were the System Check steps?",
  },
  {
    title: "SYSTEM CHECK",
    description:
      "Did you have any issues during the System Check? If yes, please state below:",
  },
  {
    title: "SYSTEM CHECK",
    description: "How effective do you think the environment checks were?",
  },
  {
    title: "SYSTEM CHECK",
    description: "How user-friendly was the System Check user interface?",
  },
];

let index = 0;

let currentTab = 1;

const prevBtn = document.querySelector("#prevBtn");
const nextBtn = document.querySelector("#nextBtn");

document.querySelector("#prevBtn").style.display = "none";

//nextTab function for clicking the button (with onclick on button)
function nextTab() {
  if (currentTab == 1) {
    //select the h2 and p tags innerhtml and set it to the info arrays currentab's h2 or p tag
    document.querySelector("#title").innerHTML = info[currentTab].title;
    document.querySelector("#description").innerHTML =
      info[currentTab].description;
    //select the first 2 pages set the active-page class
    document.querySelector("#page1").classList.remove("active-page");
    document.querySelector("#page2").classList.add("active-page");

    document.querySelector("#prevBtn").style.display = "inline-block";

    //increase the tab number each time after doing this codeblock
    currentTab++;

    //set the tab number span display to the currenttab number
    document.querySelector("#tabNo").innerHTML = currentTab;

    let progress = document.querySelector("#progress");
    progress.setAttribute("aria-valuenow", currentTab);
    progress.setAttribute("style", `width: ${14.3}%`);
  } else {
    document.querySelector("#title").innerHTML = info[currentTab].title;
    document.querySelector("#description").innerHTML =
      info[currentTab].description;
    document
      .querySelector(`#page${currentTab}`)
      .classList.remove("active-page");
    document
      .querySelector(`#page${currentTab + 1}`)
      .classList.add("active-page");
    currentTab++;
    document.querySelector("#tabNo").innerHTML = currentTab;
    let progress = document.querySelector("#progress");
    progress.setAttribute("aria-valuenow", currentTab);
    progress.setAttribute("style", `width: ${currentTab * 14.3}%`);
  }
}

function prevTab() {
  if (currentTab != 1) {
    document.querySelector("#title").innerHTML = info[currentTab].title;
    document.querySelector("#description").innerHTML =
      info[currentTab].description;
    document
      .querySelector(`#page${currentTab}`)
      .classList.remove("active-page");
    document
      .querySelector(`#page${currentTab - 1}`)
      .classList.add("active-page");
    currentTab--;
    document.querySelector("#tabNo").innerHTML = currentTab;
    let progress = document.querySelector("#progress");
    progress.setAttribute("aria-valuenow", currentTab);
    progress.setAttribute("style", `width: ${currentTab * 14.3}%`);
  }
}

/*=============== GOOGLE FONTS ===============*/

@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto:ital,wght@0,100;0,300;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  /*========== COLOURS ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --white: #fff;

  --trans: all 0.3s ease-in-out;

  /*========== FONT + TYPOGRAPHY ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Poppins", sans-serif;
  --big-font-size: 2rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: 0.938rem;
  --small-font-size: 0.813rem;
  --smaller-font-size: 0.75rem;
  --slightly-large: 1.475rem;

  /*========== FONT WEIGHT ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== MARGINES BOTTOM ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --mb-0-5: 0.5rem;
  --mb-0-75: 0.75rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;

  /*========== Z INDEX ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/* RESPONSIVE TYPOGRAPHY */
@media screen and (min-width: 968px) {
  :root {
    --big-font-size: 3.5rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: 0.875rem;
    --smaller-font-size: 0.813rem;
  }
}

/*=============== BASE ===============*/

/* Custom properties/variables  */
:root {
  --main-white: #fff;
  --main-blue: lightblue;
  --main-red: #7d4561;
  --main-gray: #000000;
}

/* Base reset */
* {
  margin: 0;
  padding: 0;
}

/* box-sizing and font sizing */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;

  font-size: 62.5%;
  scroll-behavior: smooth;
}

/* 1200px / 16px = 75em */
@media (max-width: 75em) {
  html {
    font-size: 60%;
  }
}

/* 980px / 16px = 61.25em */
@media (max-width: 61.25em) {
  html {
    font-size: 58%;
  }
}

/* 460px / 16px = 28.75em */
@media (max-width: 28.75em) {
  html {
    font-size: 55%;
  }
}

/*=============== BASE ===============*/

body {
  font-family: "Poppins", sans-serif;
  font-size: 1.8rem; /* 18px */
  font-weight: 400;
  line-height: 1.4;
  color: var(--main-black);
}

/*=============== NAV ===============*/

.nav {
  display: flex;
  width: 100%;
  /*background: var(--main-blue);*/
  /*box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);*/
}

.nav img {
  width: 250px;
  padding: 5px;
  margin-left: 20px;
}

@media (max-width: 28.75em) {
}

/*=============== CARD SECTION ===============*/

main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
}

.card-container {
  /*box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;*/
  /*box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;*/
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
    rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
    rgba(0, 0, 0, 0.07) 0px 16px 16px;
  margin: 0 auto;
  width: 600px;
  border-radius: 2rem;
  overflow-x: hidden;
}

.card-header {
  background: rgb(131, 58, 180);
  background: linear-gradient(
    90deg,
    rgba(131, 58, 180, 1) 0%,
    rgba(234, 91, 12, 1) 50%,
    rgba(252, 176, 69, 1) 100%
  );
  padding: 50px;
  color: white;
}

.card-content h2,
.card-content p {
  padding-bottom: 15px;
}

.card-content h2 {
  font-weight: bold;
}

.progress {
  border-radius: 0px;
}

.progress-text {
  padding-left: 25px;
  padding-top: 10px;
}

.pa-5 {
  padding: 25px;
}

form {
  margin-right: ;
}

.card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.card-actions p {
  font-size: var(--h3-font-size);
  margin-right: 10px;
}

.card-actions button {
  width: 12rem;
  height: 3rem;
  margin: 0.5rem;
  font-size: var(--h2-font-size);
  letter-spacing: 1px;
  border-radius: 3rem;
 
}

.card-actions button:hover {
  transform: scale(1.04);
  transition: 0.2s ease-out;
}

/*=============== CARD TABS ===============*/

.page {
  display: none;
}

.active-page {
  display: block !important;
}

.columns {
  margin: 5px 0px;
}

.input-labels-radio {
  display: flex;
  justify-content: space-around;
  padding-bottom: 10px;
  font-size: var(--slightly-large);
}

.form-inputs-radio {
  display: flex;
  justify-content: space-around;
}

.form-inputs-text {
  display: flex;
  justify-content: space-between;
}

input[type="text"] {
  border: 1px solid rgb(126, 125, 125);
  margin-bottom: 1rem;
  margin-top: 0.5rem;
  padding: 2px;
  border-radius: 3rem;
  background-color: #e9ecef;
}

input[type="radio"] {
  transform: scale(1.75);
  cursor: pointer;
}

input[type="tel"] {
  margin-bottom: 1rem;
  margin-top: 0.5rem;
  padding: 2px;
  border-radius: 3rem;
  background-color: #e9ecef;
}

input[type="email"] {
  border: 1px solid rgb(126, 125, 125);
  margin-bottom: 1rem;
  margin-top: 0.5rem;
  padding: 2px;
  border-radius: 3rem;
  background-color: #e9ecef;
}

input[type="email"]:focus {
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
    rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
    rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
input {
  padding-left: 10px !important;
}

input[type="radio"]:hover {
  transform: scale(2);
  transition: 0.2s ease-out;
}

select[name="country"] {
  border-radius: 3rem;
  border: 1px solid rgb(126, 125, 125);
  margin-bottom: 1rem;
  margin-top: 0.5rem;
  padding: 2px;
  background-color: #e9ecef;
}

label {
  font-weight: 600;
}

#message{
  width: 100%;
  height: 200px;
  max-height: 350px;
  overflow-x: hidden;
  overflow-y: auto;
}

Thanks

I've tried various methods but unsure on the correct way to do this, so any help appreciated.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/HbsLtw9

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

ValueError: X has 10 features, but LinearRegression is expecting 1 features as input

So, I am trying to predict the model but its throwing error like it has 10 features but it expacts only 1. So I am confused can anyone help me with it? more importantly its not working for me when my friend runs it. It works perfectly fine dose anyone know the reason about it? cv = KFold(n_splits = 10) all_loss = [] for i in range(9): # 1st for loop over polynomial orders poly_order = i X_train = make_polynomial(x, poly_order) loss_at_order = [] # initiate a set to collect loss for CV for train_index, test_index in cv.split(X_train): print('TRAIN:', train_index, 'TEST:', test_index) X_train_cv, X_test_cv = X_train[train_index], X_test[test_index] t_train_cv, t_test_cv = t[train_index], t[test_index] reg.fit(X_train_cv, t_train_cv) loss_at_order.append(np.mean((t_test_cv - reg.predict(X_test_cv))**2)) # collect loss at fold all_loss.append(np.mean(loss_at_order)) # collect loss at order plt.plot(np.log(al...
Post a Comment
Read more

Sorting large arrays of big numeric stings

I was solving bigSorting() problem from hackerrank: Consider an array of numeric strings where each string is a positive number with anywhere from to digits. Sort the array's elements in non-decreasing, or ascending order of their integer values and return the sorted array. I know it works as follows: def bigSorting(unsorted): return sorted(unsorted, key=int) But I didnt guess this approach earlier. Initially I tried below: def bigSorting(unsorted): int_unsorted = [int(i) for i in unsorted] int_sorted = sorted(int_unsorted) return [str(i) for i in int_sorted] However, for some of the test cases, it was showing time limit exceeded. Why is it so? PS: I dont know exactly what those test cases were as hacker rank does not reveal all test cases. source https://stackoverflow.com/questions/73007397/sorting-large-arrays-of-big-numeric-stings
Post a Comment
Read more

How to load Javascript with imported modules?

I am trying to import modules from tensorflowjs, and below is my code. test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title </head> <body> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script> <script type="module" src="./test.js"></script> </body> </html> test.js import * as tf from "./node_modules/@tensorflow/tfjs"; import {loadGraphModel} from "./node_modules/@tensorflow/tfjs-converter"; const MODEL_URL = './model.json'; const model = await loadGraphModel(MODEL_URL); const cat = document.getElementById('cat'); model.execute(tf.browser.fromPixels(cat)); Besides, I run the server using python -m http.server in my command prompt(Windows 10), and this is the error prompt in the console log of my browser: Failed to loa...
Post a Comment
Read more