getElementsByTagName for SELECT not working

[Morlan]

I'm trying to post the value of a SELECT dropdown using AJAX.

I'm using this method:
http://www.captain.at/howto-ajax-form-post-get.php


The script succesfully POSTS all form data apart from the SELECT dropdown. I've no idea why.

This is the piece of code that should grab the SELECT value and build the srting.

if (obj.getElementsByTagName("input")[i].tagName == "SELECT") {
        var sel = obj.getElementsByTagName("input")[i];
        getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
     }

Here's the whole code:

test.html

<script type="text/javascript" language="javascript">
   var http_request = false;
   function makeRequest(url, parameters) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
         	// set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      http_request.onreadystatechange = alertContents;
      http_request.open('GET', url + parameters, true);
      http_request.send(null);
   }

   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('myspan').innerHTML = result;            
         } else {
            alert('There was a problem with the request.');
         }
      }
   }
   
function get(obj) {
  var getstr = "?";
  for (i=0; i<obj.getElementsByTagName("input").length; i++) {
        if (obj.getElementsByTagName("input")[i].type == "text") {
           getstr += obj.getElementsByTagName("input")[i].name + "=" + 
                   obj.getElementsByTagName("input")[i].value + "&";
        }
        if (obj.getElementsByTagName("input")[i].type == "checkbox") {
           if (obj.getElementsByTagName("input")[i].checked) {
              getstr += obj.getElementsByTagName("input")[i].name + "=" + 
                   obj.getElementsByTagName("input")[i].value + "&";
           } else {
              getstr += obj.getElementsByTagName("input")[i].name + "=&";
           }
        }
        if (obj.getElementsByTagName("input")[i].type == "radio") {
           if (obj.getElementsByTagName("input")[i].checked) {
              getstr += obj.getElementsByTagName("input")[i].name + "=" + 
                   obj.getElementsByTagName("input")[i].value + "&";
           }
     }  
     if (obj.getElementsByTagName("input")[i].tagName == "SELECT") {
        var sel = obj.getElementsByTagName("input")[i];
        getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
     }
     
  }

      makeRequest('get.php', getstr);
   }
</script>


<form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">
<input type="text" name="myfield" value="teststring"><br>
<input type="radio" name="myradio" value="0" checked> 0
<input type="radio" name="myradio" value="1"> 1<br>
<input type="checkbox" name="mycheck1" value="1"> 1

<br>
<select name="myselect">
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>

<input type="button" name="button" value="Submit" 
   onclick="javascript:get(this.parentNode);">
</form>

<br><br>
Server-Response:<br>
<span name="myspan" id="myspan"></span>

get.php

<?
print_r($_GET);
?>

Any ideas? Many thanks.

[gil davis]

The SELECT is not an INPUT tag.

[Morlan]

The SELECT is not an INPUT tag.

That's what I thought.

I tried the following but it still doesn't work. I get the error

obj.getElementsByTagName("select")[i] is undefined

if (obj.getElementsByTagName("select")[i].tagName == "SELECT") {
        var sel = obj.getElementsByTagName("select")[i];
        getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
     }

[gil davis]

You can't just change part of the FOR loop like that. You'll never find the object.

You would be better off looping through the FORM elements.

frm = document.myform;
for (var i=1;i<frm.length;i++) {
  alert(i + " " + frm[i].type)
}

[Morlan]

Can I not use getElementsByTagName to loop through and grab the value of all the SELECT boxes?

I've been using this code below, which works fine, but if the SELECT is wrapped in a DIV, it doesn't work, so I thought getElementsByTagName would get around that.

         if (obj.childNodes[i].tagName == "SELECT") {
            var sel = obj.childNodes[i];
            getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
         }

I'm just trying to understand how the code below should work. I see that it checks if the tag name is SELECT and then grabs the selectd value, and then builds the string. I keep getting an error obj.getElementsByTagName("select")[i] is undefined

if (obj.getElementsByTagName("select")[i].tagName == "SELECT") {
        var sel = obj.getElementsByTagName("select")[i];
        getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
     }

I only have one select box so I suppose I could just grab the value with getElementById, but it would be nice to get the above working for future Ajax forms.

Does anyone have any other example Ajax scripts that build a GET/POST string for forms? The one above was all I could find.

[gil davis]

What I was trying to explain is that you can't use this line in the existing "FOR" loop:

if (obj.getElementsByTagName("select")[i].tagName == "SELECT") {

Your FOR loop started looking through all "INPUT" tags, and it will *never* find a "SELECT" tag in that collection. Then you took the unrelated index (i) in a collection of "SELECT" tags which only has the one "SELECT" object, so you get "undefined".

You would need to add a separate "FOR" loop (in addition to the existing loop) to search for "SELECT" objects.

Also, there is no reason to create an array of tagName "SELECT" objects and filter any further. They will *all* have a tagName of "SELECT".

[Morlan]

Thanks so much for that. Took me a while to understand what you were saying, but it clicked with me in the end and I managed to get it working.