Why is this sidebar data not going to ajax and why is slider value showing ui not defined?
<p>I have a sidebar which contains some input. I want to get this data into my ajax. I am logging these inputs. However, I am not getting anything. Here is what I did:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;script&gt;
    $("#find_match").click(function() {
        alert("clicked");
    });
&lt;/script&gt;

&lt;aside&gt;
    &lt;br&gt;&lt;br&gt;
    Select Gender
    &lt;select name="gender" id="gender"&gt;
        &lt;option value=""&gt;Select&lt;/option&gt;
        &lt;option value="male"&gt;Male&lt;/option&gt;
        &lt;option value="female"&gt;Female&lt;/option&gt;
    &lt;/select&gt;
            
    &lt;hr&gt;
    Educational Qualification : 
    &lt;select class="form-control" name="eduQualification" id="eduQualification" class="required"&gt;
        &lt;option value=""&gt;Select&lt;/option&gt;
        &lt;option value="10"&gt;10th&lt;/option&gt;
        &lt;option value="12"&gt;12th&lt;/option&gt;
        &lt;option value="15"&gt;Graduate&lt;/option&gt;
        &lt;option value="17"&gt;Post Graduate&lt;/option&gt;
    &lt;/select&gt;
            
    &lt;hr&gt;
    Salary expectation (in rupees):
    &lt;select class="form-control" name="salary" id="salary"&gt;
        &lt;option value=""&gt;Select&lt;/option&gt;
        &lt;option value="1"&gt;Upto 1 lakh&lt;/option&gt;
        &lt;option value="2"&gt;Upto 1-2 lakhs&lt;/option&gt;
        &lt;option value="3"&gt;2-5 lakh&lt;/option&gt;
        &lt;option value="4"&gt;5-10 lakh&lt;/option&gt;
        &lt;option value="5"&gt;More than 10 lakh&lt;/option&gt;
    &lt;/select&gt;

    &lt;br&gt;&lt;br&gt;
    &lt;button id="find_match"&gt;Search matches &lt;/button&gt;
    &lt;/aside&gt;</code></pre>
</div>
</div>
</p>

<p>I am not getting any data in my console even when all my files are in place.
I have a slider which is in my html page and I want to get its value in jquery; for this it say "ui not defined".</p>

<p>Heres the snippet-</p>

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

<p>js code-</p>

<pre><code>&lt;script&gt;
    $(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 ) );
        });
    &lt;/script&gt;


    $("#find_match").click(function(){

  // I want to get the value of slider here..    
        var minAge = $('#amount').val(ui.values[ 0 ]);

});
</code></pre>

<p>I suppose.. it is giving that error because its not getting ui variable which comes as a part of callback in slide().
How to resolve this problem?
Please help.</p>