通过单击获取表单数据并使用Highchart中的数据进行图表

get form data by click and chart with the data in highchart

本文关键字：数据 Highchart 单击 获取 表单      更新时间：2023-09-26

我想加载表单数据并将其发送到服务器，然后使用返回的数据进行图表。如果表单的输入字段具有默认数据并且我评论，则工作正常 

//$("button").click(function(){

如果默认文本字段为空，我没有得到任何图表。我尝试了不同的方法，但仍然无法通过单击按钮从表单加载它。我现在被困了 2 天。请帮忙。提前谢谢。这是代码

<script type="text/javascript">
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
        });
    }
});​
</script>

这是正文部分

<body>
<div id="container" style="min-width: 200px; height: 400px; margin: 0 auto"></div>
<div id="city_form">
  <form name="contact" action="" method="post">
      <label for="city1" id="city1_label">First city</label>
      <input type="text" name="city1" id="city1" size="30" value="Amsterdam" />

      <label for="city2" id="email_label">Second city</label>
      <input type="text" name="city2" id="city2" size="30" value="London" />
      <button>Click me</button> 
  </form>
</div>
</body>
</html>

你在这里做错了很多事情，一个是 wirey 指出的，另一个你必须阻止点击按钮提交表单。啊？当您单击提交按钮时，其默认操作是提交表单并将您带到action页面。您确实附加了一个添加的 eventListener，它进行此 ajax 调用，然后绘制图表，但该按钮仍将执行其默认操作，即将您带到 action 页面，在您的情况下是同一页面，所以您甚至没有意识到发生了这样的事情，您可能已经注意到闪烁或页面重新加载？

jQuery 允许通过在事件对象上调用 preventDefault() 方法来阻止此默认操作，该方法作为第一个参数传递给事件侦听器。您可以在此处阅读有关它的更多信息 http://api.jquery.com/event.preventDefault/试试这个，让我们知道它是否有帮助。

.HTML

<div id="city_form">
  <form name="contact" action="" method="post">
      <label for="city1" id="city1_label">First city</label>
      <input type="text" name="city1" id="city1" size="30" value="Amsterdam" />

      <label for="city2" id="email_label">Second city</label>
      <input type="text" name="city2" id="city2" size="30" value="London" />
      <button id="btnGet">Click me</button>
  </form>
</div>

.JS

$("#btnGet").click(function(evt) {
    evt.preventDefault();
    var city1 = $("#city1").val();
    var city2 = $("#city2").val();
    var dataString = {
        city1: city1,
        city2: city2
    };
    requestData(dataString);
});

jsFiddle @ http://jsfiddle.net/jugal/V5zt9/6/

相关文章：