How do I add condition to radio button to show specific step when user choose form the list

Question

0.00/5 (No votes)

See more:

Hello I am new to programing I am creating this small page. I need to add conditions on the radios. when a user choose option form the list for example if do they want to add their name if they choose yes specific step will be shown if now they will shown different step

HTML

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<meta charset="utf-8">

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

<meta name="description" content="">

<meta name="author" content="">

<title>Makassed Communication Portal</title>

<!-- CSS -->

<link href="assets/css/bootstrap.min.css" rel="stylesheet">

<link href="assets/css/style.css" rel="stylesheet">



<!-- FONT -->

<link href="https://fonts.gstatic.com" rel="preconnect">

<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">

</head>

<body>

<div class="container d-flex align-items-center min-vh-100"><!-- CONTAINER  Starts-->

<div class="row g-0 justify-content-center"><!--- row g-0 justify-content-center Starts-->

<div class="col-lg-4 offset-lg-1 mx-0 px-0"><!-- TITLE Starts -->

<div id="title-container"><!-- title-container Starts-->

<img class="covid-image" src="images/covid-check.png">

<p class="text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati molestiae voluptate atque, saepe maxime dolore cumque quidem veniam accusamus nulla commodi aut corporis, totam est molestias sed ea facere. Et?</p>

</div><!-- title-container Ends-->

</div><!-- TITLE Ends -->

<div class="col-lg-7 mx-0 px-0"><!-- FORMS Starts -->

<div class="progress"><!--progress Starts-->

<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 0%"></div>

</div>

<div id="qbox-container">

<form class="needs-validation" id="form-wrapper" method="post" action="action.php" name="form-wrapper" novalidate>

<div id="steps-container">

    
<fieldset>

<div class="step" id="lang">

<h4>Please Choose Lanuguage | رجاء اختيار اللغة </h4>

<div class="form-check ps-0 q-box">

<div class="q-box__question">

<input checked class="form-check-input question__input" id="q_1_yes" name="q_1" type="radio" value="Yes"> 

<label class="form-check-label question__label" for="q_1_yes">Englsih</label>

</div>

<div class="q-box__question">

<input checked class="form-check-input question__input" id="q_1_no" name="q_1" type="radio" value="No"> 

<label class="form-check-label question__label" for="q_1_no">Arabic</label>

</div>

</div>

</div>

</fieldset>












<fieldset>

<div class="step" id="mnames">

<h4>Do You want to mention Your Name</h4>

<div class="form-check ps-0 q-box">

<div class="row">

<div class="col">

<div class="q-box__question">

<input class="form-check-input question__input" id="q_2_yes" name="q_2" type="radio" value="Yes"> 

<label class="form-check-label question__label" for="q_2_yes">Yes</label>

</div>

</div>


<div class="col">

<div class="q-box__question">

<input checked class="form-check-input question__input" id="q_2_no" name="q_2" type="radio" value="No"> 

<label class="form-check-label question__label" for="q_2_no">No</label>

</div>

</div>



</div>

</div>

</div>

</fieldset>



<fieldset>

<div class="step" id="empname">

<h4>Please Write Your Name and Employee #</h4>

<div class="form-check ps-0 q-box">

<div class="q-box__question">


<div class="row">

<div class="col">

<label for="inputEmail4">Employee Name</label>

<input type="name" class="form-control"  placeholder="Employee Name">

</div>

<div class="col">


<label for="inputPassword4"> Employee Number # </label>

<input type="text" class="form-control"  placeholder="Employee Number #">

</div>

</div>

</div>

</div>

</div>


</fieldset>



<fieldset>

<div class="step">

<h4>Please Select one of the folowing options</h4>

<div class="row">

<div class="col-lg-12">

<div class="form-check ps-0 q-box">

<div class="q-box__question">

<input class="form-check-input question__input q-checkbox" id="q_4_right" name="q_4" type="radio" value="uk"> 

<label class="form-check-label question__label" for="q_4_right">

Doing the right thing ! <br>

<p class="lead">Reaporting someting you see wrong</p>

</label>

</div>

</div>



<div class="form-check ps-0 q-box">

<div class="q-box__question">

<input class="form-check-input question__input q-checkbox" id="q_4_ideas" name="q_4" type="radio" value="j"> 

<label class="form-check-label question__label" for="q_4_ideas">Share your Ideas <br>

<p class="lead">Let us know if you have a great suggestion</p></label>

</div>

</div>

<div class="form-check ps-0 q-box">

<div class="q-box__question">

<input class="form-check-input question__input" id="q_4_views" name="q_4" type="radio" value="us">

<label class="form-check-label question__label" for="q_4_views">Air your Views <br>

<p class="lead"> Tell us what's frusting you in the work place</p></label>

</div>

</div>

</div>

</div>

</div>






<div class="step">

<h4>Donig the right thing</h4>

<p>Reporting someting you see wrong

if you see or suspect someone or something being done wrong that is having a negative impact or harming the association please share your concern</p>

<div class="row">

<div class="form-check ps-0 q-box">

<div class="q-box__question">

<label for="floatingTextarea2">Comments</label>
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>

                      </div>

                    </div>

                  </div>

                </div>

              </fieldset>

              <div class="step d-none">

                <h4>Incident Reported on:</h4>

                <div class="row">

                  <div class="col">

                    <label class="form-label">REPORTED PERSON</label>

                    <input type="text" class="form-control" placeholder="Reported Person">

                  </div>

                  <div class="col">

                    <label class="form-label">REPORTED EMPLOYEE #</label>

                    <input type="text" class="form-control" placeholder="Reported Employee #">

                  </div>

                </div>

                <div class="mt-2">

                  <label class="form-label">INCIDENT TYPE </label>

                  <select class="form-select" aria-label="Default select example">

                    <option selected>Select Incident Type</option>

                    <option value="1">THEFT</option>

                    <option value="2">NON COMPLIANCE WITH COMPANY POLICY</option>

                    <option value="3">FRAUD</option>

                    <option value="3">ABUSING POWER</option>

                    <option value="3">USING COMPANY PROPERTY FOR PERSONAL INTEREST</option>

                    <option value="3">NEGLIGENCE</option>

                  </select>

                </div>




                <div class="mt-2">

                  <label for="exampleFormControlTextarea1">INCIDENT DETAILS </label>

                  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>

                </div>



                <div class="mt-2">

                  <label class="form-label">INCIDENT CITY</label>

                  <select class="form-select" aria-label="Default select example">

                    <option selected>Select Incident City</option>

                    <option value="1">Beirut</option>

                    <option value="2">Bekaa</option>

                  </select>

                </div>


                <div class="mt-2">

                  <div class="row">

                    <div class="col">

                      <label for="formFileMultiple" class="form-label">UPLOAD ATTACHEMENT </label>

                      <input class="form-control" type="file" id="formFileMultiple" multiple />

                    </div>


                    <div class="col">

                      <label for="" class="form-label">INCIDENT DATE</label>

                    </div>


                  </div>

                  <div class="mt-4">

                    <div class="form-check form-switch">

                      <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">

                      <label class="form-check-label" for="flexSwitchCheckDefault">I confirm that, all above provided information is correct.</label>

                    </div>

                  </div>

                </div>

              </div>

              <div class="step d-none">

                <div class="mt-1">

                  <div class="closing-text">

                    <h4>Thank you</h4>

                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut omnis explicabo doloribus at iste magni maiores impedit, nam eum reprehenderit facere aliquid ipsa labore sed? Dolorem eveniet recusandae molestiae at.</p>

                    <p>Click on the submit button to continue.</p>

                  </div>

                </div>

              </div>

              <div id="success">

                <div class="mt-5">

                  <h4>Success! We'll get back to you ASAP!</h4>

                  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur deleniti eius ab totam quaerat illo perferendis, eum veritatis rerum tempore impedit. Saepe dolores eligendi eum culpa beatae, id doloribus ipsum.</p>
                  <a class="back-link" href="">Go back from the beginning ➜</a>

                </div>

              </div>

            </div>

            <div id="q-box__buttons">

              <button id="prev-btn" type="button">Previous</button>

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

              <button id="submit-btn" type="submit">Submit</button>

            </div>

          </form>

        </div>
        <!--progress Starts-->

      </div><!-- FORMS Ends -->

    </div>
    <!--- row g-0 justify-content-center Ends-->

  </div><!-- CONTAINER ends -->

  <div id="preloader-wrapper">
    <!-- preloader-wrapper Starts-->

    <div id="preloader"></div>

    <div class="preloader-section section-left"></div>

    <div class="preloader-section section-right"></div>

  </div><!-- preloader-wrapper Starts-->



  <script>



    if(document.getElementById('q_1_yes').checked) {
    
    $("#mnames").removeClass('d-none');
    
    
    
    
    }
    
    
    else if(document.getElementById('q_1_no').checked) {
    
    $("#mnames").addClass('d-none');
    
    }
    
    
      </script>

  <script src="js/script.js"></script>






</body>

</html>

JavaScript

let step = document.getElementsByClassName('step');
let prevBtn = document.getElementById('prev-btn');
let nextBtn = document.getElementById('next-btn');
let submitBtn = document.getElementById('submit-btn');
let form = document.getElementsByTagName('form')[0];
let preloader = document.getElementById('preloader-wrapper');
let bodyElement = document.querySelector('body');
let succcessDiv = document.getElementById('success');

form.onsubmit = () => {
  return false
}

let current_step = 0;
let stepCount = 8

step[current_step].classList.add('d-block');

if (current_step == 0) {
  prevBtn.classList.add('d-none');
  submitBtn.classList.add('d-none');
  nextBtn.classList.add('d-inline-block');
}

const progress = (value) => {

  document.getElementsByClassName('progress-bar')[0].style.width = `${value}%`;

}

nextBtn.addEventListener('click', () => {

  current_step++;

  let previous_step = current_step - 1;

  if ((current_step > 0) && (current_step <= stepCount)) {

    prevBtn.classList.remove('d-none');
    prevBtn.classList.add('d-inline-block');
    step[current_step].classList.remove('d-none');
    step[current_step].classList.add('d-block');
    step[previous_step].classList.remove('d-block');
    step[previous_step].classList.add('d-none');

    if (current_step == stepCount) {
      submitBtn.classList.remove('d-none');
      submitBtn.classList.add('d-inline-block');
      nextBtn.classList.remove('d-inline-block');
      nextBtn.classList.add('d-none');
    }
  } else {
    if (current_step > stepCount) {
      form.onsubmit = () => {
        return true
      }
    }
  }
  progress((100 / stepCount) * current_step);
});


prevBtn.addEventListener('click', () => {
  if (current_step > 0) {
    current_step--;
    let previous_step = current_step + 1;
    prevBtn.classList.add('d-none');
    prevBtn.classList.add('d-inline-block');
    step[current_step].classList.remove('d-none');
    step[current_step].classList.add('d-block')
    step[previous_step].classList.remove('d-block');
    step[previous_step].classList.add('d-none');

    if (current_step < stepCount) {
      submitBtn.classList.remove('d-inline-block');
      submitBtn.classList.add('d-none');
      nextBtn.classList.remove('d-none');
      nextBtn.classList.add('d-inline-block');
      prevBtn.classList.remove('d-none');
      prevBtn.classList.add('d-inline-block');
    }
  }

  if (current_step == 0) {
    prevBtn.classList.remove('d-inline-block');
    prevBtn.classList.add('d-none');
  }
  progress((100 / stepCount) * current_step);
});


submitBtn.addEventListener('click', () => {
  preloader.classList.add('d-block');
  const timer = ms => new Promise(res => setTimeout(res, ms));
  timer(5)
    .then(() => {
      bodyElement.classList.add('loaded');
    }).then(() => {
      step[stepCount].classList.remove('d-block');
      step[stepCount].classList.add('d-none');
      prevBtn.classList.remove('d-inline-block');
      prevBtn.classList.add('d-none');
      submitBtn.classList.remove('d-inline-block');
      submitBtn.classList.add('d-none');
      succcessDiv.classList.remove('d-none');
      succcessDiv.classList.add('d-block');
    })

   

  
});

What I have tried:

<script>



  if(document.getElementById('q_1_yes').checked) {

  $("#mnames").removeClass('d-none');




  }


  else if(document.getElementById('q_1_no').checked) {

  $("#mnames").addClass('d-none');

  }


    </script>

Posted 2-Apr-22 1:10am

ahmad khaled 2022

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)