I want to create multiple forms based on the user input of a dropdown list

Question

I want to create multiple forms based on user input of a dropdown list. For example, if the user selects 3, then I have to create 3 same forms, one after another. I have the code below:
HTML code

    
        
            
                
                    Select the number of passengers:
                    
                
            
        
    
    
    

    
        
            
                Passenger Info
                Enter your personal info below. These data will be displayed on your ticket.
                
                    
                        Passenger One (Lead passenger)
                        
                            
                                
                                    First name:
                                    
                                
                            
                            
                                
                                    Last name:
                                    
                                
                            
                            
                                
                                    Sex:
                                    
                                
                            
                        
                        
                            
                                
                                    Date of birth: 
                                    
                                
                            
                            
                                
                                    Phone:
                                    
                                
                            
                            
                                
                                    Email:
                                    
                                
                            
                        
                        
                            
                                
                                    Address:
                                    
                                
                            
                            
                                
                                    City:
                                    
                                
                            
                            
                                
                                    Postal code:

And JS code I found that shows the result of the dropdown list

function GetSelectedValue() {
    var e = document.getElementById("passengersSelector");
    var numberOfPassengers = e.options[e.selectedIndex].value;

    document.getElementById("result").innerHTML = "You selected " + numberOfPassengers + " passengers";
}

I am still a beginner, so any tips would be appreciated! :)

AdityaParab · Accepted Answer

You can store the contents of your outside-container class in a separate variable. And depending on the user selection, add this variable that many times to the array.

const formMarkup = `
        
            Passenger Info
            Enter your personal info below. These data will be displayed on your ticket.
            
                
                    Passenger One (Lead passenger)
                    
                        
                            
                                First name:
                                
                            
                        
                        
                            
                                Last name:
                                
                            
                        
                        
                            
                                Sex:
                                
                            
                        
                    
                    
                        
                            
                                Date of birth: 
                                
                            
                        
                        
                            
                                Phone:
                                
                            
                        
                        
                            
                                Email:
                                
                            
                        
                    
                    
                        
                            
                                Address:
                                
                            
                        
                        
                            
                                City:
                                
                            
                        
                        
                            
                                Postal code:
                                
                            
                        
                    
                


            

        
    `

And then

function GetSelectedValue() {
    var e = document.getElementById("passengersSelector");
    var numberOfPassengers = e.options[e.selectedIndex].value;
    var result = [];
    for(var i=0; i < numberOfPassengers; i++) {
        result.push(formMarkup);
    }

    document.getElementById("outside-container").innerHTML = result.join('');
}

Also, update your original markup to


        
            
                
                    Select the number of passengers:

I want to create multiple forms based on the user input of a dropdown list

Answers (1)

Related Questions