www.webdeveloper.com
Results 1 to 3 of 3

Thread: Any knows to fix this Script, !!!!

  1. #1
    Join Date
    Oct 2012
    Posts
    11

    Any knows to fix this Script, !!!!

    Hi

    Here, I have to create one button execute four different function from drop down list, Using jQuery.....


    if the person select one value from drop down list, then when he click the button to eXcute.....
    Code:
    <html >
    <head>
        <title></title>
    </head>
    <body>
        <script src="jquery.js" type="text/javascript"></script><script type="text/javascript">
         $(document).ready(function(){
         $('select[name="dropdown"]').change(function(){
    
        if ($(this).val() == "3")
           
            $(".Button").click(function(){
    
    });​});​});​
     <script src="jquery.js" type="text/javascript"></script><script type="text/javascript">
         $(document).ready(function(){
         $('select[name="dropdown"]').change(function(){
    
        if ($(this).val() == "4")
           
            $(".Button").click(function(){
    
    });​});​});​
    <script src="jquery.js" type="text/javascript"></script><script type="text/javascript">
         $(document).ready(function(){
         $('select[name="dropdown"]').change(function(){
    
        if ($(this).val() == "5")
           $(".Button").click(function(){
    
    });​});​});​
    <script src="jquery.js" type="text/javascript"></script><script type="text/javascript">
         $(document).ready(function(){
         $('select[name="dropdown"]').change(function(){
    
        if ($(this).val() == "6")
            alert("call the do something function on option 2");
            $(".Button").click(function(){
    
    });​});​});​
       
       
    </script>
     <form action="" style="position:absolute;  top:30px; left:30px; border:3px solid Gray">SELECT DISK:<select name="dropdown">
            <option value="3 " id="3 Disk">3 Disk</option>
            <option value="4 ">4 Disk</option>
            <option value="5 ">5 Disk</option>
            <option value="6 ">6 Disk</option>
            </select></form>
            <input class="Button3" type="button" value="SOLVE" style="position:absolute;  top:90px;  left:90px; font-weight:bolder;  border:3px solid Gray"/>
    </body>
    </html>
    This script is not working , any know how to modify or fix this script!!!!!!

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    953
    There are a couple of issues with your code. Firstly you link to the jquery.js file 3 times and also don't seem to close each set of <script> tags with your additional javascript coding. You also have extra spaces in the option values, which would cause conflict when javascript attempts to compare the values. And your jquery selector for the button aims at a class called 'Button' but it seems your button uses a class called 'Button3'.

    Obviously I made all of those corrections and adjusted your code to be a little more compact and uniform.
    HTML Code:
    <!DOCTYPE html>
    <head>
        <title></title>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      $('select[name="dropdown"]').change(function() {
        $(".Button").unbind();
    
        if($(this).val() == "3") {       
          $(".Button").click(function(){alert("3");});
        } else {
          if($(this).val() == "4") {
            $(".Button").click(function(){alert("4");});
          } else {
            if($(this).val() == "5") {
              $(".Button").click(function(){alert("5");});
            } else {
              if($(this).val() == "6") {
                $(".Button").click(function(){alert("6");});
              }
            }
          }
        }
      });
    });
    </script>
    </head>
    <body>
    <form action="" style="position:absolute;  top:30px; left:30px; border:3px solid Gray">
    SELECT DISK:
    <select name="dropdown">
      <option value="3">3 Disk</option>
      <option value="4">4 Disk</option>
      <option value="5">5 Disk</option>
      <option value="6">6 Disk</option>
    </select>
    </form>
    <input class="Button" type="button" value="SOLVE" style="position: absolute; top: 90px; left: 90px; font-weight: bolder; border: 3px solid Gray;" />
    
    </body>
    </html>
    But I should point out it only sets the onclick event for the button when you change the value of the select box. This means when the page loads there will be no action set. You would have to insert a bit of extra code in the document.ready function to run a one time check and initially set the button's onclick value.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Oct 2012
    Posts
    11
    Thank you--> for letting me know each correction you have made!!!
    Works Great!!!

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