CODEWITHSUNDEEP
jquery
Newbees
Newbees

Reputation: 89

Unable to trigger the bind the event

I can't figure out why this event not triggered after multiple times trying with different ways. All I want is to bind my event with the change of value of FIRST INPUT text box through drop down menu Category Name. Means when I select "A or B or C " from "Category list " than that will updated to "First Input" and the event will trigger by the change of value of "First Input".

But I'm stuck and only able when I press some key on text field of "First Input" but that's not my requirement. My JSFIDDLE is here and the piece of code is given below.

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />    </head>
    <body>
    <div class="col-md-3">  
                    <label>CategoryName</label>
                    <select class="form-control" name="cat_id" id="cat_id">
                        <option>A</option>
                        <option>B</option>
                        <option>C</option>
                    </select>
                </div>
      <div class="col-md-4">
            FIRST Input<input type="text" name="take" id="take" class="form-control" placeholder="Take Value"  />  
                        </div> 
      <div class="col-md-4">
          Give Output<input type="text" name="give" id="give" class="form-control" placeholder="Give Value" />  
     </div>                   
     <script>
                    $(document).ready(function(){  
                     $(function(){
                      $('body').on('click','#cat_id',function(){

                          var s     =$('#cat_id').val();
                          var n = s.lastIndexOf(",");
                          var s2 = s.substring(n + 1);
                          $('#take').val(s2);
                      })
                  });
                   $('#take').bind('input selectionchange propertychange',function(){  alert($('#take').val()); 
                   });
              });  
         </script>

Upvotes: 2

Views: 78

Answers (2)

Anton Makov
Anton Makov

Reputation: 845

I didn't understand what exactly you want to achieve, if you want to bind your selection of options you should use "change" instead of click in your jquery code link + example

if you are interested to bind your textbox you should use select instead of click

link + example

update

A small example of triggering events

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {

    var selectedOption = '';
  $("#optionSelect").change(function (e) {
        selectedOption = $( "#optionSelect option:selected" ).text();
        $("#testBtn").trigger("click");
   });

   $("#testBtn").click(function (e){
        $("#first_input").val(selectedOption);
   });

});
</script>
</head>
<body>

<select id="optionSelect">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

<button id='testBtn'>Test me</button>

<div id='test'></div>
<input type='text' id='first_input'/>
</body>
</html>

Upvotes: 0

BobRodes
BobRodes

Reputation: 6175

First, bind is deprecated, and I suspect you're only using it because you couldn't get on to work. The reason that you can't get it to work is because the change event doesn't trigger simply because a change is made in the box. It only triggers after the box loses focus.

So, if you programmatically change the value in a box, the change event doesn't trigger at all, since it never had focus in the first place.

The way to get what you want is to also programmatically trigger the change event, like so (I went ahead and replaced your bind with on, and changed your click event to a change event as it should be):

        $(document).ready(function() {
          $(function() {
            $('#cat_id').on('change', function() {

              var s = $('#cat_id').val();
              var n = s.lastIndexOf(",");
              var s2 = s.substring(n + 1);

              $('#take').val(s2).trigger('change');
            })
          });

          $('#take').on('change', function(e) {
            $('#give').val($('#take').val());

          });

        });

To get a clearer understanding of how the change event works, have a look at this example.

Upvotes: 1

Related Questions