Formular Javascript senden Ereignis

Ich möchte ein Formular nur mit Javascript verwalten, aber der Eventlistener funktionierte nicht für mich. Was ist los mit dir?Formular Javascript senden Ereignis

Meine Form:

<script src="init.js"></script> 
<div id="search_box"> 
    <form id="search_form"> 
     <input type="search" name="search" autofocus placeholder="Google search" id="searchbox"> 
     <input type="button" value=&#9679; id="searchsign"> 
    </form> 
</div> 
<script src="search.js"></script>

In Init.js Datei:

"use strict"; 

function $(selector){ 
    return document.querySelector(selector); 
} 

function $$(selector){ 
    return document.querySelectorAll(selector); 
}

in Search.js Datei:

$('#searchsign').addEventListener('click', search); 
$('#search_form').addEventListener('submit', search); 

function search(){ 
    console.info('search function OK'); 
    var searchvalue = $("#searchbox").value; 
    var google = "https://www.google.hu/search?site=&source=hp&q="; 
    window.location = google + searchvalue; 
}

Quelle

2016-09-13 gabor aron

Konsole Fehler

Vergessen Sie nicht e.preventDefault() in einreichen Funktion hinzufügen? –

search() wird nach dem Zuweisen der Ereignislistener definiert. –

@NicolaiEhemann: Nein, 'search.js' ist unten. –

Das submit Ereignis des Formulars auf die Aktion geht die Form (keine Aktion = die aktuelle URL) und lade die Seite neu.

Wenn Sie es mit JavaScript sind Handhabung, das Argument Ereignis akzeptieren und preventDefault auf nenne es das Standardverhalten zu verhindern:

function search(e) { 
    e.preventDefault(); 
    // ... 
}

würde ich vorschlagen, auch entweder nicht Ihre Funktionen Globals zu machen, oder search einen geben anderer Name, um Konflikte im globalen Namespace zu vermeiden.

Randbemerkung: Sie müssen URI-encode Query-String-Argumente, so ändern Sie Ihre location Zuordnung encodeURIComponent zu verwenden:

window.location = google + encodeURIComponent(searchvalue);

Working copy on JSBin(Da Stapel Snippets Arbeit in Rahmen, die don Lassen Sie uns nicht zu Google wechseln.

Quelle des Arbeitsbeispiels:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
<div id="search_box"> 
    <form id="search_form"> 
    <input type="search" name="search" autofocus placeholder="Google search" id="searchbox"> 
    <input type="button" value=&#9679; id="searchsign"> 
    </form> 
</div> 
<script> 
"use strict"; 
(function() { // Scoping function to avoid globals 
    function $(selector) { 
    return document.querySelector(selector); 
    } 

    function $$(selector) { 
    return document.querySelectorAll(selector); 
    } 

    $('#searchsign').addEventListener('click', search); 
    $('#search_form').addEventListener('submit', search); 

    function search(e) { 
    e.preventDefault(); 
    console.info('search function OK'); 
    var searchvalue = $("#searchbox").value; 
    var google = "https://www.google.hu/search?site=&source=hp&q="; 
    window.location = google + encodeURIComponent(searchvalue); 
    } 
})(); 
</script> 
</body> 
</html>

Quelle

2016-09-13 17:43:53

Code looks fine to me here

Die Ergebnisse werden zeigen, nicht, weil Google selbst Iframes werden nicht erlauben, aber Sie können Ihre Konsolenprotokolle drucken, ganz gut sehen.

Wenn Sie nicht die gleichen Ergebnisse wie oben in Ihrem Code sehen, dann vermute ich, gibt es ein Problem mit der Reihenfolge oder Art, in der Sie Ihre Dateien einschließen.

Quelle

2016-09-13 17:44:38 Pabs123

Wenn Sie submit Ereignis auslösen wollen, fügen Sie nicht Ereignis-Listener klicken einreichen, statt dessen type zu submit ändern. Standard einreichen Verhalten und Seite zu verhindern Nachladen

"use strict"; 
 

 
function $(selector) { 
 
    return document.querySelector(selector); 
 
} 
 

 
function $$(selector) { 
 
    return document.querySelectorAll(selector); 
 
} 
 

 
$('#search_form').addEventListener('submit', search); 
 

 
function search(e) { 
 
    e.preventDefault(); 
 
    console.info('search function OK'); 
 
    var searchvalue = $("#searchbox").value; 
 
    var google = "https://www.google.hu/search?site=&source=hp&q="; 
 
    window.location = google + searchvalue; 
 
}

<script src="init.js"></script> 
 
<div id="search_box"> 
 
    <form id="search_form"> 
 
    <input type="search" name="search" autofocus placeholder="Google search" id="searchbox"> 
 
    <input type="submit" value=&#9679; id="searchsign"> 
 
    </form> 
 
</div> 
 
<script src="search.js"></script>

Quelle

2016-09-13 17:45:18 berrtech

Formular Javascript senden Ereignis

Antwort

Verwandte Themen