Übergeben von Sucheingabe an Javascript ohne Eingabe-Schaltfläche

Question

Ich habe das folgende HTML-Formular, das ich versuche, Javascript ohne Verwendung von Schaltflächen zu übermitteln. Geben Sie die Abfrage ein und drücken Sie die Eingabetaste, um die Formularübergabe abzuschließen.

Ich bekomme einen Fehler "TypeError: undefined ist kein Objekt (Bewertung 'this.form.query')". Wenn ich 'this.form.query' aus dem onsubmit() entferne, wird die Funktion aufgerufen. Was mache ich falsch? Wie soll ich die Abfrage an die JS-Funktion übergeben?

<form onsubmit="searchWiki(this.form.query)"> 
<input type="search" placeholder="Search Wikipedia" name="query" /> 
</form> 

Meine JS-Funktion ist unter

function searchWiki(data) { 
var script = document.createElement('script'); 
console.log(data); 
script.src = '//en.wikipedia.org/w/api.php?action=opensearch&format=json&search=apple%20inc&callback=wikiData'; 
document.getElementsByTagName('head')[0].appendChild(script); 
}; 

Update: Vielen Dank an alle Hilfe. Unten ist mein aktualisierten Code:

HTML

<form id="search"> 
    <input type="search" placeholder="Search Wikipedia" name="query" /> 
</form> 

JS

function searchWiki(data) { 
    let script = document.createElement('script'); 
    console.log(data); 
    script.src = `//en.wikipedia.org/w/api.php?action=opensearch&format=json&search=${data}&callback=wikiData`; 
    document.getElementsByTagName('head')[0].appendChild(script); 
} 

document.getElementById('search').addEventListener('submit', function(e) { 
    e.preventDefault(); 
    searchWiki(encodeURIComponent(this.query.value)); 
}) 

Answer 1

das ist schon die form, also gibt diese.form undefined.

Sie müssen entweder die Eingabe direkt weitergeben müssen: this.query oder den Wert des Eingangs passieren:

<form onsubmit="searchWiki(this.query.value)"> 

Answer 2

Versuchen Sie nicht, dies 'im DOM verwenden.

Answer 3

Sie können einen id auf Ihre Eingabe hinzufügen und verwenden document.getElementById

<form onsubmit="searchWiki(document.getElementById('query').value)"> 
<input type="search" placeholder="Search Wikipedia" id="query" name="query" /> 
</form> 

Answer 4

Hier So würde ich es machen, wenn die Verwendung von jQuery möglich ist:

function searchWiki(data) { 
 
    var script = document.createElement('script'); 
 
    console.log(data); 
 
    script.src = '//en.wikipedia.org/w/api.php?action=opensearch&format=json&search=apple%20inc&callback=wikiData'; 
 
    document.getElementsByTagName('head')[0].appendChild(script); 
 
}; 
 

 
$("form").on("submit", function(e) { 
 
    e.preventDefault(); 
 
    searchWiki($(this).serialize()); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="search" placeholder="Search Wikipedia" name="query" /> 
 
</form>