-1

フォームデータをロードしてサーバーに送信し、返されたデータをグラフ化したいと思います。フォームの入力フィールドにデフォルトのデータがあり、コメントする場合は正常に機能します

//$("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> 
4

1 に答える 1

1

あなたはここでたくさんのことを間違ってやっています.1つはwireyが指摘したもので、もう1つはボタンのクリックでフォームの送信を防ぐ必要があります. え?送信ボタンをクリックすると、デフォルトのアクションはフォームを送信してactionページに移動することです。この ajax 呼び出しを行い、チャートをプロットする追加の eventListener が添付されていますが、ボタンは引き続きデフォルトのアクションを実行します。あなたのaction場合は同じページであるページに移動するので、そのようなことが起こったことにさえ気付かず、ちらつきやページのリロードに気付いたのでしょうか?

jQuery ではpreventDefault()、イベント オブジェクトのメソッドを呼び出すことで、この既定のアクションを防止できます。このメソッドは、第 1 引数としてイベント リスナーに渡されます。詳細については、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/

于 2012-08-11T06:19:23.047 に答える