Результаты формы сразу перезаписываются с помощью jquery

0

Я пытаюсь создать простой, чтобы заменить ключевые слова в документе, но я борюсь с основным вводом.

По сути, я использовал функцию 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>
  • 0
    почему ты просто не поставил код в вопросе?
  • 0
    Я думал, что это слишком много, и я не мог понять, какие биты выделить. Я добавлю это сейчас. Сожалею.
Показать ещё 2 комментария
Теги:
forms

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 делает то же самое.

Поделиться
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();
    }  

});
Поделиться
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>
Поделиться
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);
                }  

            });

См. Return false после вызова функции convertTextBox(), что предотвращает convertTextBox() вашей формы, перезагружая веб-страницу с помощью параметров формы.

Поделиться
  • 0
    Где возврат ложный?
  • 0
    О, ваш код был отформатирован неправильно.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню