javascript - 提交时重置 div 内容

标签 javascript jquery html ajax forms

我有一个 isbn 搜索 input 和一个提交 button。在表单提交时,结果显示在表单下方的 div 中,工作正常。

我的问题是我可以反复按提交,多个 div 一个接一个地出现。

如何在每次按下提交时替换 div 的内容?

到目前为止我的代码;

$( "#form" ).submit(function() {

    var isbn = $('#isbn_search').val(); 
    var url='https://www.googleapis.com/books/v1/volumes?q=isbn:'+isbn;
    event.preventDefault();
    $.getJSON(url,function(data){
            $.each(data.items, function(entryIndex, entry){                   
                var html = '<div class="result">';   
                html += '<h3>' + ( entry.volumeInfo.title )+ '</h3>';  
                $(html).hide().appendTo("#result").fadeIn(1000);
            });
    });

});

<form id="form" method="post" action="">
    <label>ISBN: </label>
    <input type="text" id="isbn_search" name="isbn_search" />

    <input type="submit" value='Search Google Books' />
</form>

<div id="result"></div>

最佳答案

只需在添加新数据之前重置#result 的html。比如这样:

...
$.getJSON(url,function(data){
    $('#result').html('');
    $.each(data.items, function(entryIndex, entry){
...

关于javascript - 提交时重置 div 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27486177/

相关文章:

javascript - 窗口莫名检测到滚动

javascript - 如何使用 javascript 找到字符串中最常见的 2 个字母并返回一个新字符串

javascript - 设置默认显示:none for a section of text

html - 使用 CSS #Part II 在 HTML 中自动生成编号列表

javascript - 改变 JavaScript 中 typeof 操作符的行为

javascript - angularjs:创建用于闪烁消息的系统

javascript - 使用 jQuery 检测元素褪色 true 或 false

jquery - 元素中 .addClass() 方法的问题

javascript - 使用 onclick 切换特定的类元素

html - 设置无序列表的样式