Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post

    Trigger an onchange event on page load?

    Hello,

    I have this onchange event that occurs after user selection of a dropdown menu. When a user makes a selection it queries the database and delivers some data.

    The value of the dropdown is stored in a database, but the problem is when the page is refreshed the delivered data disapears, only reappearing if you change the dropdown.

    How can I make the onchange event run when the page loads so that if there is already a selection, the database data will always be there, only to change if the user changes the selection?

    Here is the JS:
    Code:
    <script type="text/javascript">
    function showCustomer(str)
    {var xmlhttp;    
    if (str=="")
    {document.getElementById("txtHint").innerHTML="";
    return;}
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();}
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
    xmlhttp.onreadystatechange=function()
    {if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {document.getElementById("txtHint").innerHTML=xmlhttp.responseText;}}
    xmlhttp.open("GET","getcustomer.asp?q="+str,true);
    xmlhttp.send();}
    </script>
    And the onchange line:

    Code:
    <SELECT Name=""customers"" id=""customers"" onchange=""showCustomer(this.value)"">
    Etc... Please ignore the double sets of quotes.

  2. #2
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    You could just trigger it manually as soon as the page is loaded:
    Code:
    document.customers.onchange();
    You'd have to try it, though — I usually use jQuery for event handling. But it looks like it would work.

  3. #3
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by venegal View Post
    You could just trigger it manually as soon as the page is loaded:
    Code:
    document.customers.onchange();
    You'd have to try it, though — I usually use jQuery for event handling. But it looks like it would work.
    Thanks. Where would I place this code?

  4. #4
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    PHP Code:
    window.onload = function () {
    // here
    }; 
    Make sure not to make another window.onload if you already got one in there, though.

  5. #5
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by venegal View Post
    PHP Code:
    window.onload = function () {
    // here
    }; 
    Make sure not to make another window.onload if you already got one in there, though.
    Im still not 100% clear on where to place this... ive tried the following which does not work.. maybe you have some insight. Im sorry I am not well versed in javascript.

    Code:
    <script type="text/javascript">
    function showCustomer(str)
    {var xmlhttp;    
    if (str=="")
    {document.getElementById("txtHint").innerHTML="";
    return;}
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();}
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
    xmlhttp.onreadystatechange=function()
    {if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {document.getElementById("txtHint").innerHTML=xmlhttp.responseText;}}
    xmlhttp.open("GET","getcustomer.asp?q="+str,true);
    xmlhttp.send();}
    
    window.onload = function () { 
    document.customers.onchange();
    };  
    </script>

  6. #6
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    The placement looks ok. Can you show this on a live site, so I can check out why it's not working?

  7. #7
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by venegal View Post
    The placement looks ok. Can you show this on a live site, so I can check out why it's not working?
    Unfortunately its an internal web application, so thats not possible...

    If you have any ideas please let me know... I hope I can find a solution.

  8. #8
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    I thought i would post that this code below does indeed create an alert onload... so that is working but the full function is not triggering the onchange.

    Any ideas?

    Code:
    <script type="text/javascript">
    function showCustomer(str)
    {var xmlhttp;    
    if (str=="")
    {document.getElementById("txtHint").innerHTML="";
    return;}
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();}
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
    xmlhttp.onreadystatechange=function()
    {if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {document.getElementById("txtHint").innerHTML=xmlhttp.responseText;}}
    xmlhttp.open("GET","getcustomer.asp?q="+str,true);
    xmlhttp.send();}
    alert('This is what an alert message looks like.');
    </script>
    
    <script type="text/javascript">
    window.onload = showCustomer();
    </script>

  9. #9
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Of course there will be an alert. Your alert is outside of any function, it will just run no matter what.

    And if you call showCustomer that way (without parameter), it's also obvious that it won't do anything (except making sure that txtHint is empty, which it probably already is).

    Even if it's some internal application, you can just set up a demo site by copying the HTML source you get from the browser to its own file. Just make sure all the necessary scripts are in there and put it on a server.

    That said, it looks like I got a bit confused, because there was only the select in your HTML snippet, and not the wrapping form.

    Instead of
    Code:
    document.customers.onchange();
    it should really be
    Code:
    document.your_form_name.customers.onchange();
    or
    Code:
    document.getElementsByName('customers')[0].onchange();

  10. #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    19,466
    Thanks
    217
    Thanked 2,699 Times in 2,675 Posts
    function showCustomer(str)

    window.onload = showCustomer();

    if no parameter is passed str is undefined.


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

  11. #11
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by venegal View Post
    Of course there will be an alert. Your alert is outside of any function, it will just run no matter what.

    And if you call showCustomer that way (without parameter), it's also obvious that it won't do anything (except making sure that txtHint is empty, which it probably already is).

    Even if it's some internal application, you can just set up a demo site by copying the HTML source you get from the browser to its own file. Just make sure all the necessary scripts are in there and put it on a server.

    That said, it looks like I got a bit confused, because there was only the select in your HTML snippet, and not the wrapping form.

    Instead of
    Code:
    document.customers.onchange();
    it should really be
    Code:
    document.your_form_name.customers.onchange();
    or
    Code:
    document.getElementsByName('customers')[0].onchange();
    I actually dont have access to any external asp hosting... so I cant throw it up for you unfortunately. It seems none of these examples work though. Maybe there is something we are missing here.

    EDIT: Here is the link to the original script! http://www.w3schools.com/Ajax/ajax_database.asp you cant do it on this page, but if the dropdown status is saved and the page reloaded, the customer data does not appear until the dropdown is changed again... hopefully this will help?
    Last edited by rtown; 01-26-2011 at 05:07 PM.

  12. #12
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Philip M View Post
    function showCustomer(str)

    window.onload = showCustomer();

    if no parameter is passed str is undefined.


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Can you elaborate on this? Sorry I am not very good in javascript.. What is the string that is being passed in the first place? What should I be passing?

  13. #13
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Here is a better way to see what I am trying to fix.. here is the script:

    http://www.w3schools.com/Ajax/tryit....yajax_database

    Add SELECTED to one of the options, then hit the "edit and click me button"... you can see that the option is now selected, but the information is not presented unless you go back to the dropdown and select something else.

  14. #14
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Quote Originally Posted by rtown View Post
    I actually dont have access to any external asp hosting... so I cant throw it up for you unfortunately. It seems none of these examples work though. Maybe there is something we are missing here.
    It's just about the HTML, so any kind of hosting would do.

    Quote Originally Posted by rtown View Post
    EDIT: Here is the link to the original script! http://www.w3schools.com/Ajax/ajax_database.asp you cant do it on this page, but if the dropdown status is saved and the page reloaded, the customer data does not appear until the dropdown is changed again... hopefully this will help?
    I don't know what to tell you. My last suggestion works perfectly. Just put this code into that tryit box you linked to and see for yourself:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function showCustomer(str)
    {
    var xmlhttp;    
    if (str=="")
      {
      document.getElementById("txtHint").innerHTML="";
      return;
      }
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","getcustomer.asp?q="+str,true);
    xmlhttp.send();
    }
    window.onload = function() {
    document.getElementsByName('customers')[0].onchange();
    };
    </script>
    </head>
    <body>
    
    <form action=""> 
    <select name="customers" onchange="showCustomer(this.value)">
    <option value="">Select a customer:</option>
    <option value="ALFKI">Alfreds Futterkiste</option>
    <option value="NORTS " selected="selected">North/South</option>
    <option value="WOLZA">Wolski Zajazd</option>
    </select>
    </form>
    <br />
    <div id="txtHint">Customer info will be listed here...</div>
    
    </body>
    </html>
    All I changed from the original is what I suggested in my last post, and I made one of the options preselected, so you actually see that it works.

  15. Users who have thanked venegal for this post:

    rtown (01-26-2011)

  16. #15
    New Coder
    Join Date
    Oct 2010
    Posts
    99
    Thanks
    10
    Thanked 1 Time in 1 Post
    Quote Originally Posted by venegal View Post
    It's just about the HTML, so any kind of hosting would do.



    I don't know what to tell you. My last suggestion works perfectly. Just put this code into that tryit box you linked to and see for yourself:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function showCustomer(str)
    {
    var xmlhttp;    
    if (str=="")
      {
      document.getElementById("txtHint").innerHTML="";
      return;
      }
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","getcustomer.asp?q="+str,true);
    xmlhttp.send();
    }
    window.onload = function() {
    document.getElementsByName('customers')[0].onchange();
    };
    </script>
    </head>
    <body>
    
    <form action=""> 
    <select name="customers" onchange="showCustomer(this.value)">
    <option value="">Select a customer:</option>
    <option value="ALFKI">Alfreds Futterkiste</option>
    <option value="NORTS " selected="selected">North/South</option>
    <option value="WOLZA">Wolski Zajazd</option>
    </select>
    </form>
    <br />
    <div id="txtHint">Customer info will be listed here...</div>
    
    </body>
    </html>
    All I changed from the original is what I suggested in my last post, and I made one of the options preselected, so you actually see that it works.
    Yes! This works! I must not have had things together properly. I just copy and pasted the whole script you changed and used it... works just as I needed.

    Thats a relief. Thank you for spending the time here!


 

Posting Permissions

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