无需单击“提交”按钮即可自动显示数据

Question

我有一个带搜索表单的网页，我想要它们而不按搜索按钮，它应该在加载页面时有用。

Html代码：

<form id="search-form" name="search-form" onsubmit="return search()">
<div>
<div class="input-holder">
<input type="text" id="query" value="test" class="search-input"/>
<button  class="search-icon" onclick="searchToggle(this, event);"><span>search</span></button>
</div>
<span class="close" onclick="searchToggle(this, event);"></span>
<div class="result-container">
</div>
</div>
</form>

Answer 1

使用jQuery，您可以完成@CetainPerformance的优秀建议。

$(document).ready(function () {

// Load input text query with value 'test'
$('#query').val('test');

});

// Add onclick event to span class .close
$( ".search-icon" ).on( "click", function() {
  console.log('span class .search-icon was Clicked.' );
});

// Add onclick event to span class .close
$( ".close" ).on( "click", function() {
  console.log('span class .close was Clicked.' );
});

// Add onsubmit event to form id #search-form
$( "#search-form" ).on( "submit", function() {
  console.log('form id #search-form was submitted.' );
});

.close {

cursor: pointer;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="search-form" name="search-form">
<div>

<div class="input-holder">

<input type="text" id="query" value="test" class="search-input"/>
<button  class="search-icon">Search</button>
<span class="close">[Close X]</span>

</div>

<div class="result-container">
</div>

</div>

</form>

每次点击搜索，都必须点击再次运行代码snipet 。这是因为表格已提交。