www.webdeveloper.com
Results 1 to 7 of 7

Thread: getElementsByTagName for SELECT not working

  1. #1
    Join Date
    Jul 2007
    Posts
    11

    getElementsByTagName for SELECT not working

    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.
    Code:
    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
    Code:
    <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

    Code:
    <?
    print_r($_GET);
    ?>

    Any ideas? Many thanks.
    Last edited by Morlan; 05-15-2009 at 10:26 AM.

  2. #2
    Join Date
    Nov 2002
    Posts
    4,473
    The SELECT is not an INPUT tag.

  3. #3
    Join Date
    Jul 2007
    Posts
    11
    Quote Originally Posted by gil davis View Post
    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

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

  4. #4
    Join Date
    Nov 2002
    Posts
    4,473
    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.
    Code:
    frm = document.myform;
    for (var i=1;i<frm.length;i++) {
      alert(i + " " + frm[i].type)
    }

  5. #5
    Join Date
    Jul 2007
    Posts
    11
    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.

    Code:
             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


    Code:
    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.

  6. #6
    Join Date
    Nov 2002
    Posts
    4,473
    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".

  7. #7
    Join Date
    Jul 2007
    Posts
    11

    Thumbs up

    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles