按鈕提交在url后添加字段

jQuery makes it easy to get your project up and running. Though it's fallen out of favor in recent years, it's still worth learning the basics, especially if you want quick access to its powerful methods.

jQuery使您可以輕松啟動和運行項目。 盡管近年來它不受歡迎，但仍然值得學習基礎知識，尤其是如果您想快速使用其強大的方法。

But while jQuery is a powerful library, it can't do everything. That's where having solid understanding of vanilla JavaScript comes in handy.

但是，盡管jQuery是一個功能強大的庫，但它無法完成所有工作。 在那里，對香草JavaScript有扎實的了解非常有用。

Say you have a Wikipedia Viewer project like this:

假設您有一個像這樣的Wikipedia Viewer項目：

$("#searchbox").keyup(function(event) {if(event.keyCode === 13) {$("#searchbutton").click();};
});$("#searchbutton").click(function() {var searchInput = document.getElementById("searchbox").value;searchInput = searchInput.toLowerCase();if(searchInput !== "") {var myRequest = new XMLHttpRequest();myRequest.open('GET','https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch='+ searchInput + '&utf8=&format=json&origin=*');myRequest.onload = function() {var searchResults = JSON.parse(myRequest.responseText);$(".resultingarticles").empty();  for(i=0; i<10; i++) {var articleTitle = searchResults.query.search[i].title;var articleSnippet = searchResults.query.search[i].snippet;var articleId = searchResults.query.search[i].pageid;var articleLink = "https://en.wikipedia.org/?curid=" + articleId;$(".resultingarticles").append("<a href='" + articleLink + "' target='_blank'>" + "<div class='article'>" + "<p>"+articleTitle+"</p>" + "<p>" + articleSnippet + "</p>" + "</div>" + "</a>");};};myRequest.send();};
});

Everything is working as you expect – you can enter text into the search box, hit enter or the "Search" button, and see a list of Wikipedia articles.

一切都按預期運行-您可以在搜索框中輸入文本，按Enter或“搜索”按鈕，然后查看Wikipedia文章列表。

Because you're using type="search" on your input element, the Chrome browser will automatically add an "X" to the end of the input if there's text and you hover over the input. Note that other browsers might handle type="search" differently.

由于您在input元素上使用type="search" ，因此如果有文本并將鼠標懸停在輸入上，Chrome瀏覽器會自動在輸入末尾添加“ X”。 請注意，其他瀏覽器可能會不同地處理type="search" 。

When you click on the "X", the text disappears.

當您單擊“ X”時，文本消失。

But say you already have a list of articles, and when you clear the text, you also want to clear the populated articles:

但是說您已經有文章列表，并且在清除文本時，您還希望清除填充的文章：

It turns out that clicking the "X" in the search box fires a "search" event. jQuery doesn't support the "search" event, so you'll have to write an event listener in vanilla JavaScript:

事實證明，單擊搜索框中的“ X”會觸發“搜索”事件。 jQuery不支持“搜索”事件，因此您必須使用原始JavaScript編寫事件監聽器：

document.getElementById("searchbox").addEventListener("search", function(event) {$(".resultingarticles").empty();  
});

Now when a search event is fired, you can use jQuery to clear the div element with the articles:

現在，當觸發搜索事件時，您可以使用jQuery清除以下文章中的div元素：

翻譯自: https://www.freecodecamp.org/news/targeting-click-of-clear-button-x-on-input-field/

按鈕提交在url后添加字段