代码之家 › 专栏 › 技术社区 › onit

如何在单击按钮时从页面(引导程序4)隐藏或删除搜索表单?

bootstrap-4 html javascript

onit · 技术社区 · 3 年前

我如何才能使此搜索表单和搜索按钮从页面中消失,因为它将被一条感谢消息所取代?

<div class="row">
      <div class="col">

        <!-- ## SEARCH FORM ------------------------------------------------ -->
        <form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
          <div class="form-group mb-2">
            <label for="searchtext">Enter your email</label>
          </div>
          <div class="form-group mx-sm-3 mb-2">
            <input type="text" class="form-control" style='width:310px' id="searchtext" name="searchtext" placeholder="Search Text">
          </div>
          <button type="submit" class="btn btn-primary mb-2">Search</button>
        </form>
        <!-- ## SEARCH FORM ~ END ------------------------------------------- -->

      </div>
    </div>

我试着这样做:

//HANDLE FORM SUBMISSION
function handleFormSubmit(formObject) {
  google.script.run.withSuccessHandler(createTable).processForm(formObject);
}

function saveData() {
  var searchForm = document.getElementById('search-form')
  var page = document.getElementById("page");
  var table = document.getElementById("dtable");

  //document.getElementById("search-form").reset();
  page.innerHTML = "";
  search-form... = ""//????
  table.innerHTML = "<h4>Thank you!</h4>";
}

2 回复 | 直到 3 年前

user973254 user973254 3 年前

你有 onsubmit="handleFormSubmit(this) 所以你最好添加 <h4>Thank you!</h4> 中的代码 handleFormSubmit() ,但无论如何,您可以这样做:

<div class="row">
  <div class="col">
    <form id="search-form" class="form-inline" onsubmit="handleFormSubmit(this)">
      <div class="form-group mb-2">
        <label for="searchtext">Enter your email</label>
      </div>
      <div class="form-group mx-sm-3 mb-2">
        <input type="text" class="form-control" style='width:310px' id="searchtext" name="searchtext" placeholder="Search Text">
      </div>
      <button type="submit" class="btn btn-primary mb-2" id="searchButton" onclick="saveData();">Search</button>
    </form>
  </div>
</div>

<script type="text/javascript">
    function insertAfter(newNode, existingNode) {
      existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
    }

    function saveData() {
      var searchForm = document.getElementById('search-form');
      var searchButton = document.getElementById("searchButton");

      var thankYouDiv = document.createElement('div');
      thankYouDiv.innerHTML = "<h4>Thank you!</h4>";

      insertAfter(thankYouDiv,  searchForm.lastElementChild);
    }
</script>

-1

Denny Septian Panggabean 3 年前

var searchForm = document.getElementById('search-form');
var page = searchForm.parentElement;

// Set new result
page.innerHTML =

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

3 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

3 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

3 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

3 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前