CODEWITHSUNDEEP
jqueryselecttextinputrange
Mikhail
Mikhail

Reputation: 103

JQuery select input value doesn't change automatically if you set by hands

I have select and input range + input text.

There are two types of choices in select:

  1. Your size in inputs value.
  2. Fixed size in inputs value.

If you choose fixed size everything is ok but, if you set size by hands at first and then choose fixed size input value doesn't changed. Where is the mistake?

    $(document).ready(function () {     
        $("div.roword select").change( function() {
            var text = $(this).find("option:selected").text();
            if (text == "60x90") {
                $("input#height, input#heightPlus").attr('value', '60');
                $("input#width, input#widthPlus").attr('value', '90');
                $("input#height, input#width").focus();
                $("input#height, input#width").blur();
             }
    });
});

Upvotes: 0

Views: 114

Answers (1)

PraveenKumar
PraveenKumar

Reputation: 1861

Try this

$(document).ready(function () {     
    $("div.roword select").change( function() {
        var text = $(this).find("option:selected").text();
        if (text == "Size 60x90") {
            $("input#height, input#heightPlus").val(60);
            $("input#width, input#widthPlus").val(90);
            $("input#height, input#width").focus();
            $("input#height, input#width").blur();
        }
   });
});


jQuery(document).ready(function($) {
		count = 0;
	    var html2 = $("<input form='send' type='range' id='width' name='width" + count + "' min='40' max='300' value='40'/><input type='text' pattern='\d*' maxlength='3' id='widthPlus' name='widthPlus" + count + "' min='40' max='300' value='40'/>");
	    $(".form-col-3").html(html2);
		$(document).on('input', '#width', function(event) {
		    $(this).next().val($(this).val());
		});
		$(document).on('input', '#widthPlus', function(event) {
		    $(this).prev().val($(this).val());
		});
		$("div.roword select").change( function() {
	        var text = $(this).find("option:selected").text();
	        if (text == "Size 60x90") {
	            $("input#height, input#heightPlus").val(60);
	            $("input#width, input#widthPlus").val(90);
	            $("input#height, input#width").focus();
	            $("input#height, input#width").blur();
	        }else{
	            $("input#height, input#heightPlus").val(40);
	            $("input#width, input#widthPlus").val(40);                
            }
	   });
    });
<div id="form" >
       <div class="roword">
           <div class="col-md-3 col-sm-6 col-xs-12 form-col-1">
               <select  form="send" name="type[]">
                    <option value="">Choose type</option>
                    <option class="optionBold" value="1.1">Your own size</option>
                   <option value="1.1">Size 60x90</option>
                  </select>
           </div>
           <div class="col-md-3 col-sm-6 col-xs-12 form-col-3">
           </div>
           <div class="col-md-2 col-sm-5 col-xs-10 form-col-4">
               <input class="myPrice" form="send" type="text" name="result[]" readonly>
           </div>
       </div>
   </div>
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

Upvotes: 2

Related Questions