带有回车键的 JavaScript 搜索表单并在新选项卡中打开

Question

I tried to modify some search form script with multiple URL, everything is ok but I want to be able to activate the "enter key" button and "open in new tab" for this searchform. any solution/suggestion for this?

Thanks,

 function startSearch(){ searchString = document.searchForm.searchText.value; if(searchString != ""){ searchEngine = document.searchForm.whichEngine.selectedIndex + 1; finalSearchString = ""; if(searchEngine == 1){ finalSearchString = "https://perpus.or.id/?post_types=&s=" + searchString; } if(searchEngine == 2){ finalSearchString = "https://brwa.or.id/search?q=" + searchString; } if(searchEngine == 3){ finalSearchString = "https://madaniberkelanjutan.id/hasil-pencarian/" + searchString; } if(searchEngine == 4){ finalSearchString = "https://jkpp.org/?s=" + searchString; } if(searchEngine == 5){ finalSearchString = "https://www.econusa.id/id/search?search_flag=1&txtsearch=" + searchString + "&x=0&y=0"; } if(searchEngine == 6){ finalSearchString = "https://www.aman.or.id/?s=" + searchString; } location.href = finalSearchString; } }

 <form name="searchForm" target="_blank" method="get"> <table align="center" border cellpadding=3 cellspacing=2 > <td ><input style="background: none" name="searchText" type="text" placeholder="Search Keyword..."> <td > <select style="background: 000000" name="whichEngine" type="radio"> <option selected>Perpustakaan <option>BRWA <option>Madani Berkelanjutan <option>JKPP <option>Econusa <option>AMAN </select> <td bgcolor=navajowhite><input type="button" value="Search" onClick="startSearch()" formtarget="_blank"> </select> </table> </form>

Answer 1

Onkey enter try this:

 function runOnEnter(e){ if(e.keyCode === 13){ e.preventDefault(); // Ensure it is only this code that runs startSearch(); } }

 <td bgcolor=navajowhite><input type="button" value="Search" onkeypress="runOnEnter(event)" onClick="startSearch()" formtarget="_blank">

And to open in new tab try:

window.open(finalSearchString, '_blank');

Answer 2

Getting search text

You should get search text like this

searchString  = document.querySelector('[name="searchText"]').value

Getting engine

You should get search engine index like this

searchEngine  = document.querySelector('[name="whichEngine"]').value

Close option tags and add value attribute

Also close option tags and add value attribute to your options tags, for example

<option value="1">BRWA</option>

If you are lazy you do the follwing:

<option value="https://brwa.or.id/search?q=">BRWA</option>

(Do this for other options)

Then in startSearch() do something like this:

function startSearch(){
   searchString  = document.querySelector('[name="searchText"]').value
   searchEngine  = document.querySelector('[name="whichEngine"]').value
   finalSearchString = searchEngine + searchString;
   window.open(finalSearchString, "_blank");  // This opens in new tab
}

Your complete code will be something like this

 function startSearch(){ searchString = document.querySelector('[name="searchText"]').value searchEngine = document.querySelector('[name="whichEngine"]').value finalSearchString = searchEngine + searchString; window.open(finalSearchString, "_blank"); // This opens in new tab }

 <form name="searchForm" target="_blank" method="get"> <table align="center" border cellpadding=3 cellspacing=2 > <td ><input style="background: none" name="searchText" type="text" placeholder="Search Keyword..."> <td > <select style="background: 000000" name="whichEngine" type="radio"> <option value="https://perpus.or.id/?post_types=&s=" selected>Perpustakaan</option> <option value="https://brwa.or.id/search?q=" >BRWA</option> <option value="https://madaniberkelanjutan.id/hasil-pencarian/" >Madani Berkelanjutan</option> <option value="https://jkpp.org/?s=" >JKPP</option> <option value="https://www.econusa.id/id/search?search_flag=1&txtsearch=" >Econusa</option> <option value="https://www.aman.or.id/?s=" >AMAN</option> </select> <td bgcolor=navajowhite><input type="button" value="Search" onClick="startSearch()" formtarget="_blank"> </select> </table> </form>