javascript - Why is this sidebar data not going to ajax and why is slider value showing ui not defined? -

i have sidebar contains input. want data ajax. logging these inputs. however, not getting anything. here did:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    <script>      $("#find_match").click(function() {          alert("clicked");      });  </script>    <aside>      <br><br>      select gender      <select name="gender" id="gender">          <option value="">select</option>          <option value="male">male</option>          <option value="female">female</option>      </select>                    <hr>      educational qualification :       <select class="form-control" name="eduqualification" id="eduqualification" class="required">          <option value="">select</option>          <option value="10">10th</option>          <option value="12">12th</option>          <option value="15">graduate</option>          <option value="17">post graduate</option>      </select>                    <hr>      salary expectation (in rupees):      <select class="form-control" name="salary" id="salary">          <option value="">select</option>          <option value="1">upto 1 lakh</option>          <option value="2">upto 1-2 lakhs</option>          <option value="3">2-5 lakh</option>          <option value="4">5-10 lakh</option>          <option value="5">more 10 lakh</option>      </select>        <br><br>      <button id="find_match">search matches </button>      </aside>

i not getting data in console when files in place. have slider in html page , want value in jquery; "ui not defined".

heres snippet-

<label for="amount">age range:</label>                 <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">                 <div id="slider-range"></div> 

js code-

<script>     $(function() {         $( "#slider-range" ).slider({           range: true,           min: 20,           max: 60,           values: [ 20, 30 ],           slide: function( event, ui ) {             $( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );           }         });         $( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ) +           " - " + $( "#slider-range" ).slider( "values", 1 ) );         });     </script>       $("#find_match").click(function(){    // want value of slider here..             var minage = $('#amount').val(ui.values[ 0 ]);  }); 

i suppose.. giving error because not getting ui variable comes part of callback in slide(). how resolve problem? please help.

as comment above suggests, need wait dom ready. if dom isn't ready cannot bind event handler element.

$(document).ready(function() {     $("#find_match").click(function(){         alert("clicked");     }); }); 

the second part of question new javascript posted messed up. need put event handler portion of code within document.ready function. should be:

$(function() {     $("#slider-range").slider({       range: true,       min: 20,       max: 60,       values: [ 20, 30 ],       slide: function(event, ui) {           $("#amount").val(ui.values[ 0 ] + " - " + ui.values[1]);       }     });      // took out of val() , put in var it's easier read     var sliderval = $("#slider-range").slider("values", 0) +         " - " + $("#slider-range").slider("values", 1);     $("#amount").val(sliderval);      // code below must within document.ready, or event     // handler won't bind element because dom isn't ready!     $("#find_match").click(function() {         // want value of slider here..             var minage = $('#amount').val(ui.values[ 0 ]);     }); });