title: AJAX call (POST) with variable query (pure JavaScript)
body: <p>I am trying to make a <a href="/questions/tagged/ajax" class="post-tag" title="show questions tagged &#39;ajax&#39;" rel="tag">ajax</a>call (<code>POST</code>) whose url in <code>XMLHttpRequest.open()</code> and whose query in <code>XMLHttpRequest.send()</code> are variable depending of a condition.</p>
  
  <p>So I have a <a href="/questions/tagged/html" class="post-tag" title="show questions tagged &#39;html&#39;" rel="tag">html</a>select form:</p>
  
  <pre><code>&lt;form id="myForm"&gt;
    &lt;select name='options' id='options'&gt;
      &lt;option&gt;One&lt;/option&gt;
      &lt;option&gt;Two&lt;/option&gt;
      &lt;option&gt;Three&lt;/option&gt;
      &lt;option&gt;Another number&lt;/option&gt;
    &lt;/select&gt;
    &lt;input type="submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The form after adding programatically a new field to create a new number if the option 'Another number' is chosen is:</p>
  
  <pre><code>&lt;form&gt;
    &lt;select&gt;
      &lt;option&gt;&lt;/option&gt;
      ...
    &lt;/select&gt;
    &lt;input type="text" name="ownOption" id="" ownOption&gt; //New field in form created when 'Another number' is chosen.
    &lt;input type="submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And the script is:</p>
  
  <pre><code>&lt;script&gt;
    var e = document.getElementById("options");
    var myQuery = ''
    var myUrl = 'firstUrl'
    e.addEventListener('change', function() {
        var index = e.selectedIndex;
        myQuery = e.options[index].text
        if (myQuery == 'Another number') {
          //Create new input field in form
          myUrl = 'secondUrl'
        } 
      })
  
      //Getting elements from new form after adding field programatically.
      var data = document.getElementById('myForm')
  
      //Listening to event and AJAX call
      data.addEventListener('submit', makeRequest);
  
      function makeRequest(e) {
        e.preventDefault();
        var xhr = new XMLHttpRequest()
        xhr.onreadystatechange = callback;
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.open('POST', myUrl, true); //myUrl is 'firstUrl' or 'secondUrl' depending if 'Another number' is chosen or not-That works well
        //I want to do something like below; that is, alternative queries depending of a condition. The code below doesn't work
        if (myQuery == 'Another number') {
          xhr.send('clicks=' + data.elements[1].value) //From the new input field, second in order in the form.
        } else /*myQuery is any of the options but the last*/ {
          xhr.send('clicks=' + myQuery)
        }
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I can do a alternative query in <code>XMLHttpRequest.send(query)</code> depending if there have been selected one of the given options or a new one through the new input field.</p>