Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    May 2018
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding additional fields to form.

    Hello All,
    I currently have this page Rahman | Khaliq | Contacts
    What I am trying to do is have a guest choose yes or no, if they choose no, and click submit. I will get The answer no with their name to my email.

    If they choose Yes, then I want a dropdown box to appear with numbers 1 though 10. If they choose 1, then a input box shows up so they can put the name of the guest. If they choose 2 then 2 input boxes show up, so on and so forth.

    All fields should be required if they choose yes.
    The submit should send me the results to my email...

    Let me know your guys thoughts.
    Thank you very much.

  2. #2
    New Coder
    Join Date
    May 2018
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <!DOCTYPE html>
    <html lang="de">
    
    <head>
        <title>Dynamic form</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style>
            #dynselect {
                display: none;
            }
            #dyn2 label {
                display: none;
            }
        </style>
    </head>
    
    <body>
        <input type="radio" name="choice-animals" id="choice-animals-dogs" value="yes" required>
        <label for="choice-animals-dogs">Yes, I would love to.</label>
        <input type="radio" name="choice-animals" id="choice-animals-cats" value="no">
        <label for="choice-animals-cats">No, Sorry I can't make it.</label>
        <select id="dynselect">
            <option value="">How Many People Will Be Attending?</option>
            <option value="foropt1">1 Person:</option>
            <option value="foropt2">2 People:</option>
            <option value="foropt3">3 People:</option>
    <option value="foropt4">4 People:</option>
            <option value="foropt5">5 People:</option>
            <option value="foropt6">6 People:</option>
    <option value="foropt7">7 People:</option>
            <option value="foropt8">8 People:</option>
            <option value="foropt9">9 People:</option>
    <option value="foropt10">10 People:</option>
        </select>
        <div id="dyn2">
            <label for="dyninput1">
                Name of 1st Person:<input class="foropt1 foropt2 foropt3 foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput1" enabled>
                
    
        </label>
        <label for="dyninput2">
           Name of 2nd Person: <input class="foropt2 foropt3 foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput2" enabled>
            
        </label>
        <label for="dyninput3">
            Name of 3rd Person:<input class="foropt3 foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput3" enabled>
           
        </label>
      <label for="dyninput4">
               Name of 4th Person: <input class="foropt4 foropt5 foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput4" enabled>
              
    
        </label>
      <label for="dyninput5">
            Name of 5th Person:    <input class="foropt5 foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput5" enabled>
                
    
        </label>
      <label for="dyninput6">
            Name of 6th Person:    <input class="foropt6 foropt7 foropt8 foropt9 foropt10" name="dyninput6" enabled>
                
    
        </label>
      <label for="dyninput7">
            Name of 7th Person:    <input class="foropt7 foropt8 foropt9 foropt10" name="dyninput7" enabled>
                
    
        </label>
      <label for="dyninput8">
            Name of 8th Person:    <input class="foropt8 foropt9 foropt10" name="dyninput8" enabled>
                
    
        </label>
      <label for="dyninput9">
            Name of 9th Person:    <input class="foropt9 foropt10" name="dyninput9" enabled>
                
    
        </label>
      <label for="dyninput10">
            Name of 10th Person:    <input class="foropt10" name="dyninput10" enabled>
                
    
        </label>
    </div>
     <script>
            document.getElementById("choice-animals-dogs").addEventListener("click", function () {
                document.getElementById("dynselect").style.display = "block";
                // todo: set required for this select
            });
    
    // todo: hide select and remove required when "no" is clicked
    
    document.getElementById("dynselect").addEventListener("change", function () {
        // create a list of all inputs
        var inputs = document.querySelectorAll("#dyn2 input");
        // loop through these inputs
        for (var i = 0; i < inputs.length; i++) {
            // provide current input
            var cinput = inputs[i];
            // check if this input has class according
            // value of the selected option
            if (cinput.classList.contains(this.value)) {
                // input should be enabled and visible
                cinput.parentNode.style.display = "block";
                cinput.setAttribute("required", true);
                cinput.removeAttribute("disabled");
            } else {
                // input should be disabled and invisible
                cinput.parentNode.style.display = "none";
                cinput.removeAttribute("required");
                cinput.setAttribute("disabled", true);
    
            }
    
        }
    });
    </script>
    </body>
    
    </html>
    so now I still dont see the submit btn that enters results to email as well as clicking no showing nothing just the submit btn. Dynamic form


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •