Grab ElementbyID from innerhtml

Discussion in 'Javascript' started by fmdevelopertim@gmail.com, Jun 29, 2006.

  1. Guest

    New to AJAX so sorry if this is simple.

    Have a page that gives the user a list to select a brand. Based on the
    brand selected it shows a list of sizes available using the following
    code:

    function handleStateChange() {
    if(xmlHttp.readyState == 4) {
    if(xmlHttp.status == 200) {
    document.getElementById("serverResponse").innerHTML =
    xmlHttp.responseText;
    }
    }
    }

    The next step is show a list of all items available that match that
    brand and size. Using the following code to grab the values selected:

    function createQueryString2() {
    var Brand = document.getElementById("Brand").value;
    var Size = document.getElementById("size").value;

    var queryString = "brand=" + Brand + "&size=" + Size;

    return queryString;
    }

    The page works exactly as expected in FireFox, but IE is not capturing
    the size element from the innerHTML. Added display vaiable functions to
    the PHP page that is being rendered and the brand variable is there,
    the size variable is not.

    Thanks for any help.
    , Jun 29, 2006
    #1
    1. Advertising

  2. wrote:


    > function createQueryString2() {
    > var Brand = document.getElementById("Brand").value;
    > var Size = document.getElementById("size").value;
    >
    > var queryString = "brand=" + Brand + "&size=" + Size;
    >
    > return queryString;
    > }
    >
    > The page works exactly as expected in FireFox, but IE is not capturing
    > the size element from the innerHTML. Added display vaiable functions to
    > the PHP page that is being rendered and the brand variable is there,
    > the size variable is not.


    I can only guess from the name of that function that you somewhere call
    it to create a querystring for a HTTP GET request URL.
    What do you mean by "IE is not capturing the size element from the
    innerHTML"? Do you create the element with id="size" by assigning to the
    innerHTML of another element? Do you get a script error on
    document.getElementById("size").value
    with IE? If there is no element with id="size" then that expression
    should give a script error as then getElementById returns null and you
    can't access .value on null. Do you get a script error?
    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
    Martin Honnen, Jun 29, 2006
    #2
    1. Advertising

  3. Guest

    Full Java below:

    var xmlHttp;

    function createXMLHttpRequest() {
    if (window.ActiveXObject) {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
    }
    }

    function createQueryString() {
    var Brand = document.getElementById("Brand").value;

    var queryString = "brand=" + Brand;

    return queryString;
    }

    function doRequestUsingGET() {
    createXMLHttpRequest();

    var queryString = "response.php?";
    queryString = queryString + createQueryString() ;
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("Post", queryString, true);
    xmlHttp.send(null);
    }

    function handleStateChange() {
    if(xmlHttp.readyState == 4) {
    if(xmlHttp.status == 200) {
    document.getElementById("serverResponse").innerHTML =
    xmlHttp.responseText;
    }
    }
    }

    function createQueryString2() {
    var Brand = document.getElementById("Brand").value;
    var Size = document.getElementById("size").value;

    var queryString = "brand=" + Brand + "&size=" + Size;

    return queryString;
    }

    function doRequestUsingGET2() {
    createXMLHttpRequest();

    var queryString = "listing.php?";
    queryString = queryString + createQueryString2() ;
    xmlHttp.onreadystatechange = handleStateChange2;
    xmlHttp.open("Post", queryString, true);
    xmlHttp.send(null);
    }

    function handleStateChange2() {
    if(xmlHttp.readyState == 4) {
    if(xmlHttp.status == 200) {
    document.getElementById("available").innerHTML =
    xmlHttp.responseText;
    }
    }
    }


    The page result.php just builds a pull down list - '<select id="size"
    onchange="doRequestUsingGET2();" name="size">

    I need to grab the value of <select id="Brand"
    onchange="doRequestUsingGET();" name="Brand" tabindex="1"> (working
    well on all browsers) and the value of Size from the innerhtml call.

    These 2 values are used in listing.php which builds a table of the
    results.
    Martin Honnen wrote:
    > wrote:
    >
    >
    > > function createQueryString2() {
    > > var Brand = document.getElementById("Brand").value;
    > > var Size = document.getElementById("size").value;
    > >
    > > var queryString = "brand=" + Brand + "&size=" + Size;
    > >
    > > return queryString;
    > > }
    > >
    > > The page works exactly as expected in FireFox, but IE is not capturing
    > > the size element from the innerHTML. Added display vaiable functions to
    > > the PHP page that is being rendered and the brand variable is there,
    > > the size variable is not.

    >
    > I can only guess from the name of that function that you somewhere call
    > it to create a querystring for a HTTP GET request URL.
    > What do you mean by "IE is not capturing the size element from the
    > innerHTML"? Do you create the element with id="size" by assigning to the
    > innerHTML of another element? Do you get a script error on
    > document.getElementById("size").value
    > with IE? If there is no element with id="size" then that expression
    > should give a script error as then getElementById returns null and you
    > can't access .value on null. Do you get a script error?
    > --
    >
    > Martin Honnen
    > http://JavaScript.FAQTs.com/
    , Jun 29, 2006
    #3
  4. wrote:


    > function createQueryString2() {
    > var Brand = document.getElementById("Brand").value;
    > var Size = document.getElementById("size").value;



    Can you answer that:

    >>Do you get a script error on
    >> document.getElementById("size").value
    >>with IE? If there is no element with id="size" then that expression
    >>should give a script error as then getElementById returns null and you
    >>can't access .value on null. Do you get a script error?


    If there is no script error then IE finds the element just fine by its
    id. Thus if there is no script error then the problem is not with
    getElementById.

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
    Martin Honnen, Jun 29, 2006
    #4
  5. Guest

    No script error.

    I display the two variables in the PHP file and it displays:

    Selected Brand is 19
    Selected size is

    The size variable is empty. It is being passed as:

    var queryString = "brand=" + Brand + "&size=" + Size;
    var queryString = "listing.php?";
    queryString = queryString + createQueryString2() ;


    Martin Honnen wrote:
    > wrote:
    >
    >
    > > function createQueryString2() {
    > > var Brand = document.getElementById("Brand").value;
    > > var Size = document.getElementById("size").value;

    >
    >
    > Can you answer that:
    >
    > >>Do you get a script error on
    > >> document.getElementById("size").value
    > >>with IE? If there is no element with id="size" then that expression
    > >>should give a script error as then getElementById returns null and you
    > >>can't access .value on null. Do you get a script error?

    >
    > If there is no script error then IE finds the element just fine by its
    > id. Thus if there is no script error then the problem is not with
    > getElementById.
    >
    > --
    >
    > Martin Honnen
    > http://JavaScript.FAQTs.com/
    , Jun 29, 2006
    #5
  6. wrote:


    > I display the two variables in the PHP file and it displays:
    >
    > Selected Brand is 19
    > Selected size is
    >
    > The size variable is empty. It is being passed as:
    >
    > var queryString = "brand=" + Brand + "&size=" + Size;
    > var queryString = "listing.php?";
    > queryString = queryString + createQueryString2() ;


    Hard to tell without seeing a test case. Is the element with id="size" a
    single or multiple select element? Does it render properly? What does
    document.getElementById('size').selectedIndex
    give?

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
    Martin Honnen, Jun 30, 2006
    #6
  7. Guest

    Thanks for the reply - I figured it out based on your comments. The
    list rendered correctly but the value element was not correctly
    defined.

    I greatly appreciate your assistance!


    Martin Honnen wrote:
    > wrote:
    >
    >
    > > I display the two variables in the PHP file and it displays:
    > >
    > > Selected Brand is 19
    > > Selected size is
    > >
    > > The size variable is empty. It is being passed as:
    > >
    > > var queryString = "brand=" + Brand + "&size=" + Size;
    > > var queryString = "listing.php?";
    > > queryString = queryString + createQueryString2() ;

    >
    > Hard to tell without seeing a test case. Is the element with id="size" a
    > single or multiple select element? Does it render properly? What does
    > document.getElementById('size').selectedIndex
    > give?
    >
    > --
    >
    > Martin Honnen
    > http://JavaScript.FAQTs.com/
    , Jun 30, 2006
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?U2hhd24=?=

    How do I grab a session from the server by sessionID

    =?Utf-8?B?U2hhd24=?=, Feb 12, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    293
    Kevin Spencer
    Feb 13, 2004
  2. Darrel
    Replies:
    2
    Views:
    489
    Darrel
    Nov 14, 2004
  3. Alan Silver
    Replies:
    9
    Views:
    476
    Alan Silver
    Feb 16, 2005
  4. Camet
    Replies:
    0
    Views:
    117
    Camet
    Jul 6, 2006
  5. sonic
    Replies:
    5
    Views:
    280
    Randy Webb
    Jul 11, 2006
Loading...

Share This Page