www.webdeveloper.com
Results 1 to 2 of 2

Thread: AJAX Form POST/GET - HTML Form Submit problem

  1. #1
    Join Date
    Jul 2009
    Posts
    1

    AJAX Form POST/GET - HTML Form Submit problem

    Hi everyone,

    Apologies for my newbiness, put I've been beating my head against a wall trying to get this to work:

    Basically I have a form that's broken up by divs, and i'd like to submit that form to some php:

    Code:
    <form action="javascript:get(document.getElementById('myform'));" name="myform" id="myform">
    
    <div id="model" class="inpane">
    	<p>Select your model:</p>
    	<select>
            <option value="">--choose--</option>
            <option value="newest">iPhone (Original) - 4GB</option>
            <option value="oldest">iPhone (Original) - 8GB</option>
            </select>
    </div>
    
    <div id="status" class="outpane">
    	<p>Does it work?</p>
            <select>
            <option value="">--choose--</option>
            <option value="working">yes, it works</option>
            <option value="notworking">no, it's busted :(</option>
          	</select>
    	</div>
        
    <div id="condition" class="outpane">
    	<p>What's its condition?</p>
            <select>
            <option value="">--choose--</option>
            <option value="new (never used)">new (never used)</option>
            <option value="perfect condition">perfect condition</option>
            <option value="good">good</option>
            <option value="poor">poor</option>
            <option value="horrible">horrible (but it works!)</option>
            </select>
    	</div>
    <input type="button" name="button" value="Submit" onclick="javascript:get(this.parentNode);">
    </form>
    Here's the script I'm working with, I'm pretty sure I have to do some sort of extra loop to get it to find all the selects within the DIVs

    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.childNodes.length; i++) {
             if (obj.childNodes[i].tagName == "INPUT") {
                if (obj.childNodes[i].type == "text") {
                   getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
                }
                if (obj.childNodes[i].type == "checkbox") {
                   if (obj.childNodes[i].checked) {
                      getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
                   } else {
                      getstr += obj.childNodes[i].name + "=&";
                   }
                }
                if (obj.childNodes[i].type == "radio") {
                   if (obj.childNodes[i].checked) {
                      getstr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
                   }
                }
             }   
             if (obj.childNodes[i].tagName == "SELECT") {
                var sel = obj.childNodes[i];
                getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
             }
             
          }
          makeRequest('test.php', getstr);
       }
    </script>
    Here's my test.php

    Code:
    <?
    print_r($_GET;
    ?>
    This is definitely a little over my head, does anyone have some advice on how I could start to tackle it?

    Thanks!

  2. #2
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    You have to specify an onSubmit listener to return a false to stop the HTML posting to the server and then run the AJAX function for what ever process.

    The form action should be a URL and not a call to a script.

    Seems to me that you have hacked together a script with little understanding of the different technologies. If you look on this site, you will find lots of excamples of posting a forum by using AJAX. All it takes is a search here.

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