Send form input to function

Send form input to function

Hi;

I need to send user input to a function so it reads a div onkeyup. I have done what I thought but I need help to pass the user input to the function and then to the other page that gets reloaded (and I dont know how).

This is the page. The input field under Search By Suburb.


This is the code that calls the function on okey up:
  1. <div class="col-md-6">
                    <div class="panel panel-info">
                            <div class="panel-heading">
                                <h3 class="panel-title">Search by Suburb:</h3>
                            </div>
                        <div class="panel-body">
                            ‌<div class="form-group" onkeyup="suburb_search();">
                                <form name ="form" id = "form"><input id="exampleInputEmail1" class="form-control" name = "suburb" id = "suburb" type="text" placeholder="ie Surfers Paradise"></form>
                            </div>
                        </div>
                    </div>
                </div>       
                <div id = "suburbs">-</div>











And this is the function that reloads the div based on user input:

  1.         function suburb_search()
                {
                    alert('Function has been called. Now it should update the div');
                    $.post('<?php echo base_url('phone_number/index/');?>', { suburb: document.form.suburb.value},function(output){$('#suburbs').html(output).show();});
                }



Please let me know how I should achieve this.


Thank you