data is not sending with GET method
<p>I am using ajax to communicate with the server side. here is the code ,</p>

<p>My pages HTML</p>

<pre><code>&lt;form class="form-horizontal" role="form" method="GET"&gt; 
    &lt;div class="form-group"&gt; 
        &lt;label class="control-label col-sm-2" for="first_name"&gt;First Name :&lt;/label&gt; 
        &lt;div class="col-sm-4"&gt; 
            &lt;input type="text" class="form-control" id="f_name" placeholder="Enter First Name"&gt;
        &lt;/div&gt; 
    &lt;/div&gt; 
    &lt;div class="form-group"&gt; 
        &lt;div class="col-sm-offset-2 col-sm-10"&gt; 
            &lt;input type="submit" class="btn btn-success" id="submit" onClick="process()"&gt;
             &lt;/button&gt; 
        &lt;/div&gt; 
    &lt;/div&gt; 
&lt;/form&gt;
</code></pre>

<p>The javascript</p>

<pre><code>function process(){
var fname = encodeURIComponent(document.getElementById("f_name").value);
$(document).ready(function(){
    $.ajax({
        type:"GET",
        url:"db.php?f_name="+fname,

        success:function(data){
            document.getElementById(infoTable).innerHTML = data;


        }
    })
});
}
</code></pre>

<p>my php code ,</p>

<pre><code>&lt;?php
$name = $_GET['f_name'];
echo $name;

?&gt; 
</code></pre>

<p>but i am getting the server response as undefined index . i have noticed that when i press the button, the url is not changing (i can't see the url with values).
Is there anything with the code or anything else ? please help, Thank you</p>