Sending form variables

[bigheadedd]

Hi,

 

I'm having a little problem with some code that I'm using from

 

http://www.captain.at/howto-ajax-form-post-get.php

 

I'm using the updated code which is at the bottom of the page, as my form is within divs etc.

Everything works except for the drop down select menu?

 

I'm a little perplexed as to why its happening as all of the others are fine.

 

Any help would be massively grateful!

 

The code if the website is down is:

 

<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 + "&";
     }
     
  }
  makePOSTRequest('post.php', getstr);
}

</script>


<input type="button" name="button" value="GET test.html" 
   onclick="javascript:makeRequest('test.html', '');">
<br><br>
<input type="button" name="button" value="GET get.php?test=2" 
   onclick="javascript:makeRequest('get.php', '?test=2');">
<br><br>


<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
<input type="checkbox" name="mycheck2" value="2"> 2
<input type="checkbox" name="mycheck3" value="3"> 3
<input type="checkbox" name="mycheck4" value="4"> 4
<input type="checkbox" name="mycheck5" value="5"> 5
<br>
<select name="myselect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<input type="button" name="button" value="Submit" 
   onclick="javascript:get(this.parentNode);">
<input type="submit" name="button" value="Normal Submit Button">
</form>

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

 

Thanks

 

Edd

[penguin28]

Edd,

 

Were you able to get this work?  I've found it particularly frustrating as the original code works when not in a table surrounded by <td > tags.  When I drop it in, the array is not passed.  If I use the modified form from 'Mark', then I get an object expected error.

 

Any help would really be fantastic.  I've got all functionality I need, but the layout is sorely lacking.

 

- Martin

[bigheadedd]

Unfortunately I haven't no!

Its really bugging me as everything else works within <div> or <td> tags, except drop downs which is quite frustrating! I'm not particularly great at javascript so i'm at a bit of a loss.

 

Again, any help would be hugely appreciated!

 

Edd

[seanlim]

From what i see, the updated code is wrong. About 8 lines from the bottom, the line which says:

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

 

Your drop-down menus are "select" tags, not "input". therefore, the condition can never be true and your drop-down menus will be ignored.

 

Try something like this instead, haven't tested the code

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 + "&";
           }
     }  

  }
   for (i=0; i<obj.getElementsByTagName("SELECT").length; i++) {
        var sel = obj.getElementsByTagName("SELECT")[i];
        getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
   }
  makePOSTRequest('post.php', getstr);
}

[bigheadedd]

That worked a treat!

Thanks very much for that; lifesaver!