0

ドキュメント内のキーワードを置き換える単純な for を作成しようとしていますが、基本的な入力に苦労しています。

基本的に、jQuery の ajax 関数を使用して、Google スプレッドシートの内容を取得し、それを変更するキーワードのソースとして使用したいと考えています。

次に、HTML を jQuery に接続して、作業を行うテキストを誰かが貼り付けられるようにしました。

問題は、コピーを貼り付けて送信をクリックするとすぐに、それが短時間表示されてから HTML がリセットされることです。私は何を間違えましたか？

ここでコードを見つけることができます: http://jsbin.com/IMIwabe/1/edit?html,console,output

<title>Test Form</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    #results_box {
        border: red 5px solid;
                }

    #place {
        border: #cccccc 1px solid;

    }           
</style>
<script type="text/javascript">
$(document).ready(function() {
    var json_source = "https://spreadsheets.google.com/feeds/list/0ApL1zT2P00q5dG1wOUMzSlNVV3VRV2pwQ2Fnbmt3M0E/od7/public/basic?alt=json";
    var json_data = $.ajax({

        dataType: 'jsonp',
        url: json_source,
        success: function(data){
            //for (i=0; i<data.feed.entry.length; i++){
            //  $('#results_box').append(data.feed.entry[i].title['$t']);
            //} 
            json_data = data.feed.entry;
            return json_data;

        },      

        error: function(jqXHR, textStatus, errorThrown){ 
                        $('#results_box').html('<h2>Something went wrong!</h2><p><b>' + textStatus  + '</b> ' + errorThrown  + '</p>');
        }
    }); 

    $(':submit').click(function(){
        //function convert text box postcode into lat long
        if ($('#place').val() !=''){
            var copy_string = $('#place').val();
            $('#results_box').html(copy_string);
        }  

    }); 

});//document ready end 
</script>
</head>

<body>
    <div id="wrapper">
    <div id="query_box" class="panel">  
  <form id="form_submit"><h4>Copy to process:</h4>
    <textarea id="place"></textarea>
    <input type="submit" value="Go" />

  </form>
</div>
<div id="results_box" >Results will appear here</div>  
</div>



</body>
</html>
4

4 に答える 4

2

送信が実際に実行されないようにするには、送信から false を返す必要があります。クリックイベントが発生していますが、フォームが送信され、ページがリセットされています。

$(':submit').click(function(){
    //function convert text box postcode into lat long
    if ($('#place').val() !=''){
        var copy_string = $('#place').val();
        $('#results_box').html(copy_string);
    }  
    return false;
});

使用することもできますpreventDefaultが、return false は事実上同じことを行います。

于 2013-11-12T10:35:25.087 に答える
1

これを試して

$('#te').click(function(){
            //function convert text box postcode into lat long
            if ($('#place').val() !=''){
                var copy_string = $('#place').val();
                $('#results_box').html(copy_string);
            }  

        }); 

    });//document ready end 
    </script>
</head>

<body>
    <div id="wrapper">
    <div id="query_box" class="panel">  
      <form ><h4>Copy to process:</h4>
        <textarea id="place"></textarea>
        <input id="te" type="button" value="Go" />

      </form>
    </div>
    <div id="results_box" >Results will appear here</div>  
    </div>
于 2013-11-12T10:34:50.303 に答える