www.webdeveloper.com
Results 1 to 5 of 5

Thread: Display Pricing onload

  1. #1
    Join Date
    Dec 2013
    Posts
    3

    Thumbs up Display Pricing onload

    Hi Guys

    I am using the following script to display pricing from my database in a table dependent upon the selection from the drop down box by the end user. The script works great. However my issue is that I would like the first option in each drop down to be viewable when the page loads. For example: The page loads with the pricing data for the first select id's in the drop down.

    I hope I have explained this correctly. If you need further information let me know. And please feel free to talk to me like an imbecile as my java-script skills are poor

    Javascript -
    Code:
    <script type="text/javascript">
    function showUser()
    {
    var user = document.getElementById("user").value;
    var type = document.getElementById("type").value;
    var finish = document.getElementById("finish").value;
    
    if (finish=="")
      {
      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","getuser.php?q="+user+"&t="+type+"&f="+finish,true);
    xmlhttp.send();
    }
    </script>
    HTML -
    HTML Code:
    <div id="prices_dropdown_form">
    <form id="dropdown_form">
    <select id="user">
    <option value="">Select custom Type</option>
    <option value="1">Custom 1</option>
    <option value="2">Custom 2</option>
    </select>
    <select id="type">
    <option value="">Select custom Type2</option>
    <option value="1">Custom 4</option>
    <option value="2">Custom 5</option>
    </select>
    <select id="finish" onchange="showUser()">
    <option value="">Select Finish Type</option>
    <option value="1">Flat</option>
    <option value="2">Round</option>
    </select>
    </form>
    <br />
    <div id="txtHint"><b>Product Info &amp; Prices</b></div></div>

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Let me know if I have understood you incorrectly. First items on each <select> chosen, and the showUser function invoked afterwards:

    Code:
    <div id="prices_dropdown_form">
    <form id="dropdown_form">
    <select id="user">
    <option value="">Select custom Type</option>
    <option value="1" selected="selected">Custom 1</option>
    <option value="2">Custom 2</option>
    </select>
    <select id="type">
    <option value="">Select custom Type2</option>
    <option value="1" selected="selected">Custom 4</option>
    <option value="2">Custom 5</option>
    </select>
    <select id="finish" onchange="showUser()">
    <option value="">Select Finish Type</option>
    <option value="1" selected="selected">Flat</option>
    <option value="2">Round</option>
    </select>
    </form>
    <br />
    <div id="txtHint"><b>Product Info &amp; Prices</b></div></div>
    <script type="text/javascript">showUser();</script>

  3. #3
    Join Date
    Dec 2013
    Posts
    3
    Legend. Thank you it works Great forum, didn't expect to have this resolved so quickly.

  4. #4
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    As you seem easy to please I've rewritten your JavaScript function too. There is no need to support browsers such as IE5/6:

    Code:
    function showUser()
    {
    	var
    		user   = document.getElementById('user').value,
    		type   = document.getElementById('type').value,
    		finish = document.getElementById('finish').value,
    		xmlhttp;
    
    	if (!finish) {
    
    		document.getElementById('txtHint').innerHTML = '';
    
    	} else {
    
    		xmlhttp = new XMLHttpRequest();
    		xmlhttp.onreadystatechange = function()
    		{
    			if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
    				document.getElementById('txtHint').innerHTML = xmlhttp.responseText;
    			}
    		};
    		xmlhttp.open('GET', 'getuser.php?q=' + encodeURIComponent(user) + '&t=' + encodeURIComponent(type) + '&f=' + encodeURIComponent(finish), true);
    		xmlhttp.send();
    
    	}
    }

  5. #5
    Join Date
    Dec 2013
    Posts
    3
    Quote Originally Posted by bionoid View Post
    As you seem easy to please I've rewritten your JavaScript function too.
    haha thank you very much. That would have taken me a couple of months to figure that out

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