javascript – How do I create a variable-number of inputs for a form?-ThrowExceptions

Exception or error:

I have a database that stores reference information for various projects that need to be updated on a recurring basis (e.g. project A might have fields “Day completed” and “Cost” while project B might have fields “Location,” “Contractor,” and “Age”). I am building a web app that needs create an input form for every possible project type when clicked. I have a button that displays a drop-down menu for the different projects, but I don’t know how to create the variable-length input form. This should all happen on teh same webpage. Thoughts?

Example: When project A is clicked, a form will appear that displays input options for “Day completed” and “Cost,” but when project B is clicked, a form will appear for “Location,” “Contractor,” and “Age.”

How to solve:
I would do it with jquery as follows:    
$("#drop-down-id").change(function(){
$("#form-id").empty()
if($("#drop-down-id").val()=="Project a"){
   $("#form-id").append('<input type="date" name="day-completed">')
   $("#form-id").append('<input type="number" name="cost">')
   $("#form-id").append('<input type="submit" value="submit">')
}
if($("#drop-down-id").val()=="Project b"){
   $("#form-id").append('<input type="text" name="location">')
   $("#form-id").append('<input type="text" name="contractor">')
   $("#form-id").append('<input type="number" name="Age">')
   $("#form-id").append('<input type="submit" value="submit">')
}
});

Leave a Reply

Your email address will not be published. Required fields are marked *