Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Junior Member
    Join Date
    Mar 2011
    Posts
    18
    Member #
    27055
    Hey guys, I have come a good bit further thanks to your help, but have run up against another brick wall.

    Here is what I am dealing with:

    1. Functions getXMLHTTP() and getTeams() work fine and the dropdown boxes are filled with data from mySQL database.

    2. When I try to submit the data to mySQL in last part, the submit button does not appear to have any communication with the server. I am using LiveHTTP headers in Firefox, but no action appears to be taking place.

    *I have validated the code on W3 Validation with no errors.

    Can someone help me with this?

    Here is my code:
    Code:
    <html>
    <head>
    <title>Submit Picks</title>
    <script type="text/javascript">
    function getXMLHTTP() { //fuction to return the xml http object
            var xmlhttp=false;
            try{
                xmlhttp=new XMLHttpRequest();
            }
            catch(e)    {
                try{
                    xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch(e){
                    try{
                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                    catch(e1){
                        xmlhttp=false;
                    }
                }
            }
    
            return xmlhttp;
        }
      
        function getTeams(strURL) {
    
            var req = getXMLHTTP();
    
            if (req) {
    
                req.onreadystatechange = function() {
                    if (req.readyState == 4) {
                        // only if "OK"
                        if (req.status == 200) {
                            document.getElementById('hometeam').innerHTML=req.responseText;
                            document.getElementById('awayteam').innerHTML=req.responseText;
                        } else {
                            alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                        }
                    }
                }
                req.open("GET", strURL, true);
                req.send(null);
            }
    
        }
    
    function submitPick()
    {
    var req2 = getXMLHTTP();
    req2.onreadystatechange=function()
      {
      if (req2.readyState==4 && req2.status==200)
        {
        document.getElementById("myDiv").innerHTML=req2.responseText;
        }
      }
    var home = document.getElementById('home').options[document.getElementById('home').selectedIndex].value;
    var away = document.getElementById('away').options[document.getElementById('away').selectedIndex].value;
    var score = document.getElementById('score').options[document.getElementById('score').selectedIndex].value;
    var queryString = "?home=" + home + "?away=" + away + "&score=" + score;
    
    req2.open("GET", "update.php" + queryString,true);
    req2.send();
    }
    
    </script>
    </head>
    
    <body>
    <form method="post" action="" name="form1">
    <table width="60%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><h5>Please Select a League:</h5><select name="league" onChange="getTeams('findteams.php?league='+this.value)">
        <option value="">Select League</option>
        <option value="1">English Premier League</option>
        <option value="2">English Championship</option>
            </select></td>
      </tr>
    
     <tr style="">
    <td ><h5>Home Team:</h5><div id="hometeam"><select id="home" name="home">
        <option>Select Team</option>
            </select></div></td>
      </tr>
    
    <tr style="">
    <td ><h5>Away Team:</h5><div id="awayteam"><select id="away" name="away">
        <option>Select Team</option>
            </select></div></td>
      </tr>
    <tr style="">
    <td ><h5>Predicted Score:</h5><select name="score" id="score">
    <option value="10">1-0</option>
    <option value="20">2-0</option>
    <option value="30">3-0</option>
    <option value="40">4-0</option>
    <option value="00">0-0</option>
    <option value="11">1-1</option>
    <option value="22">2-2</option>
    <option value="33">3-3</option>
    <option value="01">0-1</option>
    <option value="02">0-2</option>
    <option value="03">0-3</option>
    <option value="04">0-4</option>
    </select></td>
      </tr>
    
    </table>
    </form>
    <button type="button" onclick="submitPick()">Submit Pick </button>
    
    <div id="myDiv">Your picks will display here.</div>
    
    </body>
    </html>

  2.  

  3. #2
    Junior Member
    Join Date
    Mar 2011
    Posts
    18
    Member #
    27055
    ok after playing around a little more, ive found the problem lies with the 'home' and 'away' select boxes. I discovered this because the program has no problem running when just 'score' is submitted.

    apparently, the ajax call won't run because javascript is unable to get the values for 'home' and 'away'

    If this helps, I have posted the code for 'findteams.php' here which is what populates the 'home' and 'away' select boxes.

    findteams.php:

    Code:
    <?
    $league=$_REQUEST['league'];
    
    $link = mysql_connect('localhost', 'admin', 'password');
    if (!$link) {
        die('Could not connect: ' . mysql_error());
    }
    mysql_select_db('db_name');
    
    $query="select team from teams where countryid=$league";
    $result=mysql_query($query);
    
    ?>
    
    <select name="team">
    <option>Select Team</option>
    <? while($row=mysql_fetch_array($result)) { ?>
    <option value><?=$row['team']?></option>
    <? } ?>
    </select>

  4. #3
    Member
    Join Date
    May 2011
    Location
    Baltimore, MD
    Posts
    60
    Member #
    27796
    Liked
    11 times
    Oh dude...

    Code:
    var home = document.getElementById('home').options[document.getElementById('home').selectedIndex].value;
    Try:
    Code:
    var home = document.getElementById('home').value;
    Setup a couple alert()'s if you need to as well. Maybe right before the variable gets set so that you can play around with it.

    Usually, if JS stops all together, it's because it errored out, like you said.
    /phillihp/
    Check out my blog @ http://www.phillihp.com
    ~Web~Mobile~Hacking~Tech~Gadgets~More~

  5. #4
    Member
    Join Date
    May 2011
    Location
    Baltimore, MD
    Posts
    60
    Member #
    27796
    Liked
    11 times
    Also, porting HTML via Ajax gets hairy when JavaScript gets involved. You may lose your new "team" select box in context to the other HTML on the page. Usually this happens with JS, but the best way to do this is to already have that select box on your main page and hide it. Use Ajax to return the values. Once the values come in, clear and populate the select box (clear because it may be the second request).

    Try those and lets see where u are then.
    /phillihp/
    Check out my blog @ http://www.phillihp.com
    ~Web~Mobile~Hacking~Tech~Gadgets~More~

  6. #5
    Member
    Join Date
    May 2011
    Location
    Baltimore, MD
    Posts
    60
    Member #
    27796
    Liked
    11 times
    Hey, I think the original retrieval:
    var home = document.getElementById('home').options[document.getElementById('home').selectedIndex].value;

    You just have to change .value to .text. But, I'd say just use the document.getElementById().value
    /phillihp/
    Check out my blog @ http://www.phillihp.com
    ~Web~Mobile~Hacking~Tech~Gadgets~More~

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Hey man! Don't change that selectedIndex part around like that! I told him to do that originally. Don't mess up my stuff.

    Seriously, inplaytoday, follow the advice given by phillihp, especially the part about "alert"ing your queryString variable. You might also want to run IE on your page if you haven't already...it will let you know with a little icon right away if something's up with your Javascript. I never understood why other browsers don't do that. Make it easier, man.
    inplaytoday likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    Member
    Join Date
    May 2011
    Location
    Baltimore, MD
    Posts
    60
    Member #
    27796
    Liked
    11 times
    Haha TheGAME. I checked myself. And .text will retrieve the contents inside <option>THIS</option>. .value gets the <option value="THIS"></option>. But I still like my Object.value();
    TheGAME1264 and inplaytoday like this.
    /phillihp/
    Check out my blog @ http://www.phillihp.com
    ~Web~Mobile~Hacking~Tech~Gadgets~More~

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Yeah, that's true. I just realized why I was confused, though. I saw the "value" word in the option field but didn't check to see if there was an actual value. I use value with everything as a force of habit, even when values and texts are the same.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  10. #9
    Junior Member
    Join Date
    Mar 2011
    Posts
    18
    Member #
    27055
    hehe, i was gonna say something about theGame telling me to change it that way, glad you remembered

    I found a way to make it all work together with 2 php files and a couple ajax requests. I kept theGame's suggestion with the javascript home and away variables the same and it has worked fine. Although, if i understand correctly, I could have saved some typing and not used 'values' but just grabbed the actual 'text' inside the option boxes itself if I used getElementbyId().text

    good to know for future use!

    thanks both of yall

  11. #10
    Junior Member
    Join Date
    Mar 2011
    Posts
    18
    Member #
    27055
    Quote Originally Posted by phillihp, post: 206692
    Also, porting HTML via Ajax gets hairy when JavaScript gets involved. You may lose your new "team" select box in context to the other HTML on the page. Usually this happens with JS, but the best way to do this is to already have that select box on your main page and hide it. Use Ajax to return the values. Once the values come in, clear and populate the select box (clear because it may be the second request).

    Try those and lets see where u are then.
    Yes, i ran into this problem as well. I had a select list that was retrieved through an ajax call, but when i tried to 'grab' the data from the returned select list and send Another ajax request with it, ran into all kinds of problems. i dont remember how i solved this, but got it working with a little trial-and-error.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

ajax formsubmit button does nothing

Click on a term to search for related topics.
All times are GMT -6. The time now is 10:29 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com