CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
Subu Hunter
Subu Hunter

Reputation: 63

I want to change the value of my input field based the value of my dropdown. But both should have different values

I want to change the value of my input field based the value of my dropdown. But both should have different values.

I want to have 2 different values like the dropdown value should be "Chenai - Pondicherry" and the input value must be 2000

i tried somethin like this but it's not workin. can anyone help me out?

$(document).ready(function() {
$("#price").live("change", function() {
	if ($("#options").val() == "Chenai - Pondicherry") { 
		$("#price").val("200");	  
 	} 
 	else if ($("#options").val() == "Chenai - Thirupathi"){      
  	  $("#price").val("201");	
 	}else ($("#options").val() == "Chenai - Kerala"){ 
      $("#price").val("202");	
 	}
  });
	<input id="price" type="text" name="cuscharge" placeholder="price" readonly>

			<select id="options" name="tname"> 
				<option value="">Select Trip</option> 
				<option value="Chenai - Pondicherry">Chenai - Pondicherry</option> 
				<option value="Chenai - Thirupathi">Chenai - Thirupathi</option> 
				<option value="Chenai - Kerala">Chenai - Kerala</option>
			</select>

Upvotes: 0

Views: 115

Answers (4)

Ahmed Ginani
Ahmed Ginani

Reputation: 6650

 $(document).ready(function() {
$("#options").on("change", function() {
	var opt_val = $("#options").val();
	if (opt_val == "Chenai - Pondicherry") { 
		$("#price").val("200");	  
 	} 
 	else if (opt_val == "Chenai - Thirupathi"){      
  	  $("#price").val("201");	
 	}else if(opt_val == "Chenai - Kerala"){ 
      $("#price").val("202");	
 	}
 });
  });
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <input id="price" type="text" name="cuscharge" placeholder="price" readonly>
<select id="options" name="tname"> 
<option value="">Select Trip</option> 
<option value="Chenai - Pondicherry">Chenai - Pondicherry</option> 
<option value="Chenai - Thirupathi">Chenai - Thirupathi</option> 
<option value="Chenai - Kerala">Chenai - Kerala</option>
</select>

Upvotes: 0

Praveen Kumar Guntoju
Praveen Kumar Guntoju

Reputation: 84

$(document).ready(function(){
  $("#options").on("change",function() {
    if ($("#options").val() == "Chenai - Pondicherry"){ 
		$("#price").val("200");
        } 
    else if($("#options").val() == "Chenai - Thirupathi"){      
  	   $("#price").val("201");	
 	   }
    else if($("#options").val() == "Chenai - Kerala"){ 
        $("#price").val("202");	
 	   }
    else{
       $("#price").val("");	
        }
  });
 });
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input id="price" type="text" name="cuscharge" placeholder="price" readonly>

			  <select id="options" name="tname"> 
				<option value="">Select Trip</option> 
				<option value="Chenai - Pondicherry">Chenai - Pondicherry</option> 
				<option value="Chenai - Thirupathi">Chenai - Thirupathi</option> 
				<option value="Chenai - Kerala">Chenai - Kerala</option>
			</select>

Add jquery library there is on change method in jquery,check if else loop also it is worng at else part.

Upvotes: 0

Bilal Ahmed
Bilal Ahmed

Reputation: 4066

i fixed some errors and its working fine

$(document).ready(function() {
    $("#options").change(function() {
        if ($("#options").val() == "Chenai - Pondicherry") { 
            $("#price").val("200");   
        } 
        else if ($("#options").val() == "Chenai - Thirupathi"){      
          $("#price").val("201");   
        }
        else if ($("#options").val() == "Chenai - Kerala"){ 
          $("#price").val("202");   
        }
        else
        {
          $("#price").val("Select Price");
        }
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<input id="price" type="text" name="cuscharge" placeholder="price" readonly value="">

<select id="options" name="tname"> 
    <option value="">Select Trip</option> 
    <option value="Chenai - Pondicherry">Chenai - Pondicherry</option> 
    <option value="Chenai - Thirupathi">Chenai - Thirupathi</option> 
    <option value="Chenai - Kerala">Chenai - Kerala</option>
</select>

Upvotes: 1

Ashu
Ashu

Reputation: 1320

set values in html then change event assign to textbox

 $(document).ready(function() {
    $("#options").change(function() {
    	$('#price').val($(this).val());
      });
    });
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  
<input id="price" type="text" name="cuscharge" placeholder="price" readonly>
    
    <select id="options" name="tname"> 
     <option value="">Select Trip</option> 
     <option value="2000">Chenai - Pondicherry</option> 
     <option value="1000">Chenai - Thirupathi</option> 
     <option value="3000">Chenai - Kerala</option>
    </select>

Upvotes: 1

Related Questions