title: get form data by click and chart with the data in highchart
body: <p>I want to load form data and send it to the sever then chart with the returned data. It works fine if the form's input field have default data and I comment </p>
  
  <pre><code>//$("button").click(function(){
  </code></pre>
  
  <p>I get no chart all if the default text fields are empty. I tried different ways but still I wont get it load from the form by clicking a button. I am stuck for 2 days now. Please, help. Thanks in advance. Here is the code</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var chart = null;
  var dataString = [];
  $(document).ready(function() {
      $("button").click(function() {
          $(function() {
              var city1 = $("#city1").val();
              var city2 = $("#city2").val();
              dataString = {
                  city1: city1,
                  city2: city2
              };
  
              requestData();
          });
      });
  
      function requestData() {
          $.ajax({
              url: 'array.php',
              type: 'POST',
              data: dataString,
              success: function(point) {
                  var chartSeriesData = [];
                  var chartCategory = [];
                  $.each(point, function(i, item) {
                      var series_name = item.name;
                      var series_data = item.data2;
                      var cagory = series_name;
  
                      var series = {
                          name: series_name,
                          data: item.data2
                      };
                      chartSeriesData.push(series);
                      chartCategory.push(series_name);
                  });
                  chart = new Highcharts.Chart({
                      chart: {
                          renderTo: 'container',
                          defaultSeriesType: 'column',
                      },
                      title: {
                          text: 'Real time data from database'
                      },
                      xAxis: {
                          categories: chartCategory
                      },
                      yAxis: {
                          minPadding: 0.1,
                          maxPadding: 0.1,
                          title: {
                              text: 'Value',
                              margin: 40
                          }
                      },
                      series: chartSeriesData
                  });
              },
              cache: false
          });
      }
  });​
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the body section</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div id="container" style="min-width: 200px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;
  
  &lt;div id="city_form"&gt;
    &lt;form name="contact" action="" method="post"&gt;
        &lt;label for="city1" id="city1_label"&gt;First city&lt;/label&gt;
        &lt;input type="text" name="city1" id="city1" size="30" value="Amsterdam" /&gt;
  
  
        &lt;label for="city2" id="email_label"&gt;Second city&lt;/label&gt;
        &lt;input type="text" name="city2" id="city2" size="30" value="London" /&gt;
        &lt;button&gt;Click me&lt;/button&gt; 
    &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>