-1

I want doctors fees applicable in a city for a specific disease to get displayed in input box automatically. I am using this code but not getting results.

//code for country - state - city menu from which to select city , state and branch code as per country selected

     var countryStateInfo = {


     "USA": {
         "California": {
                  "Los Angeles"    :    ["ucl01", "ucl02"],
               "San Diego"      :    ["ucs01","ucs02"]
     },


         "Texas": {
                 "Dallas ":   ["utd01", "utd02"],
                 "Austin" :     ["uta01", "uta02"]
        }
        },
  
 "India": {
  
     "Uttar Pradesh": {
                   "Kanpur":    ["iuk01","iuk02"],
                  "Lucknow" :   ["iul01", "iul02"]
      },
          "Gujarat": {
                    "Vadodara" : ["igv01", "igv02"],
                      "Surat" :    ["igs01", "igs02"]
  }
 }
}

window.onload = function () {
     
    //Get html elements
     
    var countySel = document.getElementById("countySel");
    var stateSel = document.getElementById("stateSel"); 
    var citySel = document.getElementById("citySel");
    var codeSel = document.getElementById("codeSel");

//Load countries
for (var country in countryStateInfo) {
    countySel.options[countySel.options.length] = new Option(country, country);
}         

//County Changed
         countySel.onchange   =   function () {
  
         stateSel.length  =  1;

        citySel.length  =  1; 

         codeSel.length   =  1; 
  
    if (this.selectedIndex   <  1)
     return; 
  
     for (var state in countryStateInfo [this.value])       {
   stateSel.options  [stateSel.options.length]   = new    Option(state, state);
      }
        }

        //State Changed
      stateSel.onchange    =     function () {   
  
     citySel.length = 1; // remove all options bar first
     codeSel.length = 1; // remove all options bar first
  
  if (this.selectedIndex < 1)
   return; // done
   
     for (var city in countryStateInfo[countySel.value]             [this.value]) {
citySel.options[citySel.options.length] = new Option(city,     city);
  }
   }

        
     //City Changed
        citySel.onchange = function () {
        codeSel.length = 1; // remove all options bar first
      
        if (this.selectedIndex < 1)
       return; // done
      
         var codes = countryStateInfo[countySel.value]                 [stateSel.value][this.value];
          for (var i = 0; i < codes.length; i++) {
          codeSel.options[codeSel.options.length] = new                   Option(codes[i], codes[i]);
         }
       } 
       }

// code to get selected value of country ,state , city  and problem from the form, on the basis of which doctors fees to be get displayed in consultancy fees input box name='conchrg'automatically.

        function Fees(){
        var z= document.form["newP"].country.value;
         var y= document.form["newP"].state.value;
          var x= document.form["newP"].city.value;
            var v=document.form["newP"].probtype.value;
              

         var s;

         if (z.value==='India'){
        if(y.value==='Uttar Pradesh'){
            if(x.value==='Lucknow'){
                switch(v){
                    case "Heart":
                        s="700";
                        break;
                    case "Brain":
                        s="800";
                        break;
                    case "Bones":
                        s="500";
                        break;
                    case "Digestion":
                        s="400";
                         break;
                    case "Kidney":
                        s="600";
                         break;
                    case "Child":
                        s="300";
                         break; 
                         
                     default :
                     s="0"  ;
             }
         }
            else if(x.value==='Kanpur'){
                switch(v){
                    case "Heart":
                        s="650";
                        break;
                    case "Brain":
                        s="750";
                        break;
                    case "Bones":
                        s="450";
                        break;
                    case "Digestion":
                        s="350";
                         break;
                    case "Kidney":
                        s="550";
                         break;
                    case "Child":
                        s="250";
                         break; 
                         
                     default :
                     s="0"  ;
               }
           }
       }
         else if(y.value==='Gujarat'){
         if(x.value==='Vadodara'){
                switch(v){
                   case "Heart":
                        s="750";
                        break;
                    case "Brain":
                        s="850";
                        break;
                    case "Bones":
                        s="550";
                        break;
                    case "Digestion":
                        s="450";
                         break;
                    case "Kidney":
                        s="650";
                         break;
                    case "Child":
                        s="350";
                         break; 
                         
                     default :
                     s="0"  ;
             }}
            else if(x.value==='Surat'){
                switch(v){
                    case "Heart":
                        s="720";
                        break;
                    case "Brain":
                        s="820";
                        break;
                    case "Bones":
                        s="520";
                        break;
                    case "Digestion":
                        s="420";
                         break;
                    case "Kidney":
                        s="620";
                         break;
                    case "Child":
                        s="320";
                         break; 
                         
                     default :
                     s="0"  ;
             }
         }
                }
            }
            else if(z.value==='USA'){
           if(y.value==='California'){
            if(x.value==='Los Angeles'){
                switch(v){
                    case "Heart":
                        s="70";
                        break;
                    case "Brain":
                        s="80";
                        break;
                    case "Bones":
                        s="50";
                        break;
                    case "Digestion":
                        s="40";
                         break;
                    case "Kidney":
                        s="60";
                         break;
                    case "Child":
                        s="30";
                         break; 
                         
                     default :
                     s="0"  ;
             }}
            else if(x.value==='San Diego'){
                switch(v){
                    case "Heart":
                        s="60";
                        break;
                    case "Brain":
                        s="70";
                        break;
                    case "Bones":
                        s="40";
                        break;
                    case "Digestion":
                        s="30";
                         break;
                    case "Kidney":
                        s="50";
                         break;
                    case "Child":
                        s="20";
                         break; 
                         
                     default :
                     s="0"  ;
             }
         }
         }
          else if(y.value==='Texas'){
         if(x.value==='Dallas'){
                switch(v){
                    case "Heart":
                        s="80";
                        break;
                    case "Brain":
                        s="90";
                        break;
                    case "Bones":
                        s="60";
                        break;
                    case "Digestion":
                        s="50";
                         break;
                    case "Kidney":
                        s="70";
                         break;
                    case "Child":
                        s="40";
                         break; 
                         
                     default :
                     s="0"  ;
             }}
            else if(x.value==='Austin'){
                switch(v){
                    case "Heart":
                        s="75";
                        break;
                    case "Brain":
                        s="85";
                        break;
                    case "Bones":
                        s="55";
                        break;
                    case "Digestion":
                        s="45";
                         break;
                    case "Kidney":
                        s="65";
                         break;
                    case "Child":
                        s="35";
                         break; 
                         
                     default :
                     s="0"  ;
             }
         }
                }         
        }
            var t= parseInt(s);
             document.form["newP"].conchrg.value=t;
       
           }
 h1{
    color:#333333;
    font-size:25px;
    text-align:center;
}
table{
    color:#666666;
    font-size:20px;
    text-align:justify;
    margin-left:300px;
    width:800px;
    border:2px solid black;
    background-color:#33ccff;
}
td{
    padding:10px;
    border:1px solid black;
    }
#button{
    color:black;
    font-size:20px;
    margin-left:390px;
    width:130px;
    height:60px;
     background:grey;

}

        input{
padding:10px;
  height:30px;
 width:550px;
 float:none;}

 input[type="Radio"]{
padding:10px;
height:30px;
width:30px;
float:none;}
    <form id="newP" action="PRegistration" method="post">
         
    <table><tr><td colspan="4">
          
    <h1>New Patient Registration Form</h1></td></tr>
          
    <tr><td width="100%" colspan="4"></td></tr>
    <tr><td>Country:</td><td width="75%"colspan="3">
    <select    id="countySel"  size="1"name="country"
    onchange="Fees()">
          <option value="" selected="selected">--SelectCountry--           </option>
           </select></td></tr>
           
      <tr><td>State:</td><td width="75%" colspan="3">
      <select id="stateSel" size="1" name="state"
      onchange="Fees()">
        
        <option value="" selected="selected">--Select State-
        </option>
        </select></td></tr>
        
          <tr><td>City:</td><td width="75%" colspan="3"><select
          id="citySel" size="1" name="city" onchange="Fees()">
          
      <option value="" selected="selected">----Select City--
      </option>
        </select></td></tr>
        
                  <tr><td>Medicenter code:</td><td width="75%"
                  colspan="3"><select id="codeSel" size="1"
                  name="code">
                  
            <option value="" selected="selected">--Select Code--
            --    </option>
        </select></td></tr>
            
       <tr><td>Problem Type:</td> 
       <td width="75%" colspan="3"><select name="probtype"
       onchange="Fees()">
       
             <option value="Opt1-----Select your Problem--
             </option>
                  <option value="Heart">Heart</option>  
                  <option value="Brain">Brain</option>
               <option value="Bones">Human Bones
               Problem</option>
               <option value="Digestion">Digestion
               Problem</option>
              <option value="Kidney">Kidney Problem</option>
               <option value="Child">Child Disease</option>
                     </select></td></tr>
                     
        <tr><td>Consultancy Charges:</td><td
        width="75%"colspan="3">
             <input  type="text" name="conchrg" id="conchrg"/>
             </td>    </tr>
    </table>
GSerg
  • 71,102
  • 17
  • 141
  • 299
Alankriti Nigam
  • 3
  • 2

1 Answers1

1

See, I have found a couple of problems here other than Scott have mentioned in the above comments.

  1. There was some error in your HTML, missing quote. right here, (Opt1-----Select your Problem--)
  2. A lot of your ids and names for elements are having space in them. Try removing the spaces as you won't be able to refer them.

//code for country - state - city menu from which to select city , state and branch code as per country selected

var countryStateInfo = {


  "USA": {
    "California": {
      "Los Angeles": ["ucl01", "ucl02"],
      "San Diego": ["ucs01", "ucs02"]
    },


    "Texas": {
      "Dallas ": ["utd01", "utd02"],
      "Austin": ["uta01", "uta02"]
    }
  },

  "India": {

    "Uttar Pradesh": {
      "Kanpur": ["iuk01", "iuk02"],
      "Lucknow": ["iul01", "iul02"]
    },
    "Gujarat": {
      "Vadodara": ["igv01", "igv02"],
      "Surat": ["igs01", "igs02"]
    }
  }
}

window.onload = function() {

  //Get html elements

  var countySel = document.getElementById("countySel");
  var stateSel = document.getElementById("stateSel");
  var citySel = document.getElementById("citySel");
  var codeSel = document.getElementById("codeSel");

  //Load countries
  for (var country in countryStateInfo) {
    countySel.options[countySel.options.length] = new Option(country, country);
  }

  //County Changed
  countySel.onchange = function() {

    stateSel.length = 1;

    citySel.length = 1;

    codeSel.length = 1;

    if (this.selectedIndex < 1)
      return;

    for (var state in countryStateInfo[this.value]) {
      stateSel.options[stateSel.options.length] = new Option(state, state);
    }
  }

  //State Changed
  stateSel.onchange = function() {

    citySel.length = 1; // remove all options bar first
    codeSel.length = 1; // remove all options bar first

    if (this.selectedIndex < 1)
      return; // done

    for (var city in countryStateInfo[countySel.value][this.value]) {
      citySel.options[citySel.options.length] = new Option(city, city);
    }
  }


  //City Changed
  citySel.onchange = function() {
    codeSel.length = 1; // remove all options bar first

    if (this.selectedIndex < 1)
      return; // done

    var codes = countryStateInfo[countySel.value][stateSel.value][this.value];
    for (var i = 0; i < codes.length; i++) {
      codeSel.options[codeSel.options.length] = new Option(codes[i], codes[i]);
    }
  }
}

// code to get selected value of country ,state , city  and problem from the form, on the basis of which doctors fees to be get displayed in consultancy fees input box name='conchrg'automatically.

function Fees() {
  var z = document.getElementById("newP").country.value;
  var y = document.getElementById("newP").state.value;
  var x = document.getElementById("newP").city.value;
  var v = document.getElementById("newP").probtype.value;


  var s ="999";

  if (z === 'India') {
    if (y  === 'Uttar Pradesh') {
      if (x  === 'Lucknow') {
        switch (v) {
          case "Heart":
            s = "700";
            break;
          case "Brain":
            s = "800";
            break;
          case "Bones":
            s = "500";
            break;
          case "Digestion":
            s = "400";
            break;
          case "Kidney":
            s = "600";
            break;
          case "Child":
            s = "300";
            break;

          default:
            s = "0";
        }
      } else if (x === 'Kanpur') {
        switch (v) {
          case "Heart":
            s = "650";
            break;
          case "Brain":
            s = "750";
            break;
          case "Bones":
            s = "450";
            break;
          case "Digestion":
            s = "350";
            break;
          case "Kidney":
            s = "550";
            break;
          case "Child":
            s = "250";
            break;

          default:
            s = "0";
        }
      }
    } else if (y === 'Gujarat') {
      if (x === 'Vadodara') {
        switch (v) {
          case "Heart":
            s = "750";
            break;
          case "Brain":
            s = "850";
            break;
          case "Bones":
            s = "550";
            break;
          case "Digestion":
            s = "450";
            break;
          case "Kidney":
            s = "650";
            break;
          case "Child":
            s = "350";
            break;

          default:
            s = "0";
        }
      } else if (x === 'Surat') {
        switch (v) {
          case "Heart":
            s = "720";
            break;
          case "Brain":
            s = "820";
            break;
          case "Bones":
            s = "520";
            break;
          case "Digestion":
            s = "420";
            break;
          case "Kidney":
            s = "620";
            break;
          case "Child":
            s = "320";
            break;

          default:
            s = "0";
        }
      }
    }
  } else if (z === 'USA') {
    if (y === 'California') {
      if (x === 'Los Angeles') {
        switch (v) {
          case "Heart":
            s = "70";
            break;
          case "Brain":
            s = "80";
            break;
          case "Bones":
            s = "50";
            break;
          case "Digestion":
            s = "40";
            break;
          case "Kidney":
            s = "60";
            break;
          case "Child":
            s = "30";
            break;

          default:
            s = "0";
        }
      } else if (x === 'San Diego') {
        switch (v) {
          case "Heart":
            s = "60";
            break;
          case "Brain":
            s = "70";
            break;
          case "Bones":
            s = "40";
            break;
          case "Digestion":
            s = "30";
            break;
          case "Kidney":
            s = "50";
            break;
          case "Child":
            s = "20";
            break;

          default:
            s = "0";
        }
      }
    } else if (y === 'Texas') {
      if (x === 'Dallas') {
        switch (v) {
          case "Heart":
            s = "80";
            break;
          case "Brain":
            s = "90";
            break;
          case "Bones":
            s = "60";
            break;
          case "Digestion":
            s = "50";
            break;
          case "Kidney":
            s = "70";
            break;
          case "Child":
            s = "40";
            break;

          default:
            s = "0";
        }
      } else if (x === 'Austin') {
        switch (v) {
          case "Heart":
            s = "75";
            break;
          case "Brain":
            s = "85";
            break;
          case "Bones":
            s = "55";
            break;
          case "Digestion":
            s = "45";
            break;
          case "Kidney":
            s = "65";
            break;
          case "Child":
            s = "35";
            break;

          default:
            s = "0";
        }
      }
    }
  }
  var t = parseInt(s);
  document.getElementById("newP").conchrg.value = t;

}
<form id="newP" name="newP" action="PRegistration" method="post">

  <table>
    <tr>
      <td colspan="4">

        <h1>New Patient Registration Form</h1>
      </td>
    </tr>

    <tr>
      <td width="100%" colspan="4"></td>
    </tr>
    <tr>
      <td>Country:</td>
      <td width="75%" colspan="3">
        <select id="countySel" size="1" name="country" onchange="Fees()">
          <option value="" selected="selected">--SelectCountry-- </option>
        </select>
      </td>
    </tr>

    <tr>
      <td>State:</td>
      <td width="75%" colspan="3">
        <select id="stateSel" size="1" name="state" onchange="Fees()">

          <option value="" selected="selected">--Select State-
          </option>
        </select>
      </td>
    </tr>

    <tr>
      <td>City:</td>
      <td width="75%" colspan="3">
        <select id="citySel" size="1" name="city" onchange="Fees()">

          <option value="" selected="selected">----Select City--
          </option>
        </select>
      </td>
    </tr>

    <tr>
      <td>Medicenter code:</td>
      <td width="75%" colspan="3">
        <select id="codeSel" size="1" name="code">

          <option value="" selected="selected">--Select Code-- -- </option>
        </select>
      </td>
    </tr>

    <tr>
      <td>Problem Type:</td>
      <td width="75%" colspan="3">
        <select name="probtype" onchange="Fees()">

          <option value="Opt1">-----Select your Problem----</option>
                  <option value="Heart">Heart</option>  
                  <option value="Brain">Brain</option>
               <option value="Bones">Human Bones
               Problem</option>
               <option value="Digestion">Digestion
               Problem</option>
              <option value="Kidney">Kidney Problem</option>
               <option value="Child">Child Disease</option>
                     </select></td></tr>
                     
        <tr><td>Consultancy Charges:</td><td
        width="75% "colspan="3">
             <input  type="text" name="conchrg" id="conchrg"/>
             </td>    </tr>
    </table>
 <input id="button" type="submit" value="Register"/>
 </form>
 </body>
  </html>
Alankriti Nigam
  • 3
  • 2
Satish Kumar
  • 571
  • 5
  • 14
  • Actually @Satish its not working with form only. I have another small code also to display a dummy text on the basis of user entering a letter. – Alankriti Nigam Apr 28 '18 at 20:15
  • @AlankritiNigam. I didn't get you. Can you explain a little more? – Satish Kumar Apr 28 '18 at 20:17
  • Actually @Satish its not working with form only. I have another small code also to display a dummy text on the basis of user entering a letter.It was working well without using the form element but on using form element it is not giving output. – Alankriti Nigam Apr 28 '18 at 20:26
  • @AlankritiNigam, If you are having trouble getting your form using document.form then use document.getElementById(). Read [this](https://stackoverflow.com/a/2435762/6481320) – Satish Kumar Apr 28 '18 at 20:27
  • @AlankritiNigam. You might have noticed that in **Fees()** I have used the by-id method. – Satish Kumar Apr 28 '18 at 20:30
  • yes @Satish i noticed but have set the value of the variable s=999. it is showing that in the output. it is not checking switch conditions – Alankriti Nigam Apr 28 '18 at 20:38
  • @AlankritiNigam. Like I mentioned in my answer, you have some extra spaces. It seems that the values of options for probtype have space in them. Try removing them. – Satish Kumar Apr 28 '18 at 20:48
  • yes @Satish i removed them and also replaced x.value==='India' with x==='India'.It is working now. Thanxx – Alankriti Nigam Apr 28 '18 at 20:53