title: Trying update dropdown select element without reloading using Vanilla JavaScript
body: <p>I wasn't finding what I needed so here is my problem. I have to use Vanilla Javascript for this project by the way. I am trying to create an owner and adding it to a '' dropdown menu. The good news is I am able to add it to the dropdown but the bad news is I have to reload my page to see the dropdown update with my new created owner name. The question is how do I accomplish updating my dropdown dynamically without page refresh? <strong>Just an fyi, I cannot use jquery for this.</strong></p>
  <p>Here is some of my relavent code:</p>
  <p>Here is my html:</p>
  <pre><code>&lt;form id = &quot;owner_form&quot;&gt;
          &lt;div&gt;
            &lt;label for='name'&gt;Owner Name:&lt;/label&gt;
            &lt;input type='text' id='name' name='name' placeholder=&quot;John Doe&quot; &gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;label for='phone_number'&gt;Phone Number:&lt;/label&gt;
            &lt;input type='text' id='phone_number' name='phone_number' placeholder=&quot;John Doe&quot; &gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;label for='real_estate_agent'&gt;Listing Agent:&lt;/label&gt;
            &lt;input type='text' id='real_estate_agent' name='real_estate_agent' placeholder=&quot;John Doe&quot;&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;input type='submit' id='owner_submit' value='Submit'/&gt;
          &lt;/div&gt;
        &lt;/form&gt;
  
        //The target dropdown is in a seperate form but I will only show the relevant part
        
         &lt;form id = &quot;listing_form&quot;&gt;
        &lt;div&gt;
          &lt;label for='name'&gt;Owner Name:&lt;/label&gt;
          &lt;select id='owner_id' name='owner_id' &gt;
            
          &lt;/select&gt;
        &lt;/div&gt;
  
  
  </code></pre>
  <p>//right here is me making my post fetch request to the backend to create owner and post it to database</p>
  <pre><code> ownerForm.addEventListener('submit', (event)=&gt;{
          event.preventDefault()
          const formData = new FormData(ownerForm)
          fetch(OWNERS_URL,{
            method: 'POST',
            header: {
              'Content-Type': 'application/json',
                &quot;Accept&quot;: &quot;application/json&quot;
            },
            body: formData 
          }).then(resp =&gt; resp.json()).then((owner_obj) =&gt; {
          let option = document.createElement('option');
          option = owner_obj.name;
          dropdown.append(option)
          console.log(owner_obj)
          })
        })
  </code></pre>
  <p><strong>I am not sure if this part will be relevant but here is my fetch request to GET my owners from my source and display them in the dropdown</strong></p>
  <pre><code>fetch(OWNERS_URL)
      .then((resp) =&gt;{
          if(resp.status !== 200){
              console.warn('Looks like there was a problem. Status Code: ' + 
            resp.status);  
          return;    
          }
          resp.json().then((data) =&gt;{  
              
          
              for (let i = 0; i &lt; data.length; i++) {
                  let option;
                  option = document.createElement('option');
                
                  option.text = data[i].name;
                  // debugger
                  option.value = data[i].id; 
                  dropdown.add(option); 
                  console.log(option)
              }    
            }); 
  
      }
      )
      .catch(function(err) {  
          console.error('Fetch Error -', err);  
        });
  
  </code></pre>
  <p>I have researched many examples for they were mostly Jquery which I am not familiar with yet which is why I was having a tough time finding what I needed. Any help on this will be appreciated. Thank You</p>