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 回答
2

你应该在你的点击事件中防止默认，因为 GO 是提交按钮，它会尝试提交整个表单：

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

});
于 2013-11-12T10:36:19.833 回答
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 回答
1

改变

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

        });

对于那样的事情

<input type="submit" value="Go" onclick = "convertTextBox(); return false;"/>

在你的 js 中：

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

            });

看到函数调用后的返回false convertTextBox()，它会阻止你的表单被真正提交，重新加载带有表单参数的网页。

于 2013-11-12T10:36:03.330 回答