AJAX question (forms)

Discussion in 'JavaScript' started by synchronized, Feb 22, 2007.

  1. #1
    Thanks for taking the time to look at my question.

    I use ajax to create a dynamic form. Example: cedriccolpaert.be/ajaxtest/

    When I submit this form, only the original form variables/values are transferred.

        index.html
        <html><head><title>test</title></head><body>
        <script LANGUAGE="javascript" TYPE="text/javascript">
        <!--
        //Browser Support Code
        function showareas(cat){
        var ajaxRequest;
        try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
        } catch (e){
        // Internet Explorer Browsers
        try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
        try{
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){
        // Something went wrong
        alert("Your browser broke!");
        return false;
        }
        }
        }
        // Create a function that will receive data sent from the server
        ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
        ajaxareas.innerHTML = ajaxRequest.responseText;
        }
        }
        ajaxRequest.open('GET', 'ajax.php?cat='+cat, true);
        ajaxRequest.send(null);
        }
        //-->
        </script>
    
        <table cellpadding="1" cellspacing="1">
        <FORM METHOD=POST ACTION="printvariables.php">
        <tr><td><input type="radio" name="category" value="category_one" onclick="javascript:showareas('category_one');" checked>category one</td></Tr>
        <tr><td><input type="radio" name="category" value="category_two" onclick="javascript:showareas('category_two');">category two</td></Tr>
        <tr><td><input type="radio" name="category" value="category_three" onclick="javascript:showareas('category_three');">category three</td></Tr>
        <tr><td>&nbsp;</td></tr>
        <tr><td ID="ajaxareas" align="left"> </td></tr>
        <tr><td>&nbsp;</td></tr>
        <tr><td><input type="submit" value="submit"></td></tr>
        </FORM>
        </table>
    HTML:


        ajax.php
        <?
        if ($_GET['cat'] == 'category_one') {
        echo '
        variable category_one_var: <input type="text" name="category_one_var"> <br>
        variable category_one_var2: <input type="checkbox" name="category_one_var2" value="some value"> <br>
        ';
        }
        elseif ($_GET['cat'] == 'category_two') {
        echo '
        variable category_two_var: <input type="text" name="category_two_var"> <br>
        variable category_two_var2: <input type="checkbox" name="category_two_var2" value="some value"> <br>
        ';
        }
        elseif ($_GET['cat'] == 'category_three') {
        echo '
        variable category_three_var: <input type="text" name="category_three_var"> <br>
        variable category_three_var2: <input type="checkbox" name="category_three_var2" value="some value"> <br>
        ';
        }
        ?>
    PHP:


        printvariables.php
        <?
        print_r ($_REQUEST);
        ?>
    PHP:
    o jeah.. one more thing: The new form variables/values are transmitted on IE, but not on firefox!

    Thanks,
    Cedric
     
    synchronized, Feb 22, 2007 IP
  2. Aragorn

    Aragorn Peon

    Messages:
    1,491
    Likes Received:
    72
    Best Answers:
    1
    Trophy Points:
    0
    #2
    The problem is that simply replacing the innerHTML is not adding the elements to the Form. You should use the appendChild method to create and insert another child element.
     
    Aragorn, Feb 24, 2007 IP
  3. infernaliuns

    infernaliuns Active Member

    Messages:
    121
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    55
    #3
    try this:

    
    
    document.getElementById('ajaxareas').innerHTML = ajaxRequest.responseText;
    
    
    Code (markup):
     
    infernaliuns, Feb 24, 2007 IP
  4. Aragorn

    Aragorn Peon

    Messages:
    1,491
    Likes Received:
    72
    Best Answers:
    1
    Trophy Points:
    0
    #4
    Still not working for me. Is it working for you synchronized?
     
    Aragorn, Feb 24, 2007 IP
  5. rays

    rays Active Member

    Messages:
    563
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #5
    synchronized:
    Very polite, I am impressed :) keep the good attitude going mate
     
    rays, Feb 28, 2007 IP