Senden Sie Formulardaten an Javascript beim Senden

Question

Ok Ich fühle mich wie das sollte wirklich einfach sein; also entweder habe ich den Punkt der Fragen hier und anderer Webseiten, die ich gelesen habe, völlig übersehen oder es wurde nicht im selben Kontext gefragt ...

Ich habe ein WIRKLICH einfaches Formularelement (unten)

<form> 
    <input type="text" id="searchTerm" /> 
    <input type="submit" value="Submit" id="submitButton" /> 
</form> 

und im wesentlichen alles, was ich tun will, wenn die Submit Schaltfläche geklickt wird, wird der Wert in die (bis jetzt) ​​angemeldet einer JavaScript Function und Konsole weitergegeben text Feld eingegeben haben.

Das sieht so aus, als ob es eine Million Mal gefragt wurde, aber die Fragen, die ich gelesen habe, beantworten meine Frage nicht (glaube ich nicht).

Bearbeiten Vielen Dank für alle Antworten; Das größte Problem ist, dass ich versuchte, eine Funktion in einer externen Javascript Datei zu referenzieren, die nach dem Formularelement aufgerufen wurde.

Answer 1

etwas?

document.getElementById('theform').onsubmit = function() { 
    console.log(document.getElementById('searchTerm').value); 
    return false; 
}; 

JSFiddle hier: https://jsfiddle.net/km7rt62v/

Es ist wichtig zu return false; Standardverhalten am Ende Ihres einreichen Handler zu verhindern, da sonst das Formular veröffentlichen und die Seite neu.

Wie andere gezeigt haben, ist es auch möglich, das onsubmit HTML-Attribut des Formularelements zu verwenden, es ist eine persönliche Vorliebe, aber ich bevorzuge eine sauberere Trennung zwischen JS und HTML.

Edit: Da ich mit jQuery, hier ist die jQuery gleichwertige Antwort und die Frage getaggt akzeptiert wurde ist:

$('#theform').submit(function() { 
    console.log($('#searchTerm').val()); 
    return false; 
}); 

Answer 2

Dies ist ein reines einfaches JavaScript. Sie könnten auch jQuery verwenden.

function checkForm(){ 
 
    console.log(document.getElementById('searchTerm').value); 
 
    return false; 
 
}

<form onsubmit='return checkForm();'> 
 
    <input type="text" id="searchTerm" /> 
 
    <input type="submit" value="Submit" id="submitButton" /> 
 
</form>

Answer 3

gibt es ein Attribut, das Sie onsubmit genannt verwenden können, wenn Sie einen Eingang mit dem Typ gehören in Ihrer Form einzureichen. Hier ist eine Dokumentation http://www.w3schools.com/tags/ev_onsubmit.asp.

würde der Code in etwa so wie diese

aussehen

<form onsubmit="submitForm()"> 
    <input type="text" id="searchTerm"/> 
    <input type="submit" value="Submit" id="submitButton" /> 
</form> 

<script> 
    function submitForm() { 
    let input = document.querySelector('#searchTerm'); 
    console.log(input.value); 
    return false; 
    } 
</script> 

Answer 4

Formular senden:

JS:

var searchForm= document.getElementById('searchForm'); 
var submitButton = document.getElementById('submitButton'); 

searchForm.onsubmit= function() { 
    console.log(searchTerm.value); 
}; 

HTML:

<form id="searchForm"> 
    <input type="text" id="searchTerm" /> 
    <input type="submit" value="Submit" id="submitButton" /> 
</form> 

Auf klicken für Button:

JS:

var searchTerm = document.getElementById('searchTerm'); 
var submitButton = document.getElementById('submitButton'); 

submitButton.onclick = function() { 
    console.log(searchTerm.value); 
}; 

HTML:

<form> 
    <input type="text" id="searchTerm" /> 
    <input type="button" value="Submit" id="submitButton" /> 
</form> 

Siehe Demo Here

Answer 5

Um eine solche Funktion in einer externen Datei haben, ist Ihre beste Wette ist, um Verbinden Sie das Sendeereignis in einem Onload-Ereignis:

window.onload=function() { 
 
    document.getElementById("form1").onsubmit=function(e) { 
 
    e=e?e:event; 
 
    e.preventDefault(); // cancel the submit 
 
    var val = document.getElementById("searchTerm").value; 
 
    console.log(val); 
 
    } 
 
}

<form id="form1"> 
 
    <input type="text" id="searchTerm" /> 
 
    <input type="submit" value="Submit" id="submitButton" /> 
 
</form>

jQuery-Version:

$(function() { 
 
    $("#form1").on("submit",function(e) { 
 
    e.preventDefault(); // cancel the submit 
 
    var val = $("#searchTerm").val(); 
 
    console.log(val); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form id="form1"> 
 
    <input type="text" id="searchTerm" /> 
 
    <input type="submit" value="Submit" id="submitButton" /> 
 
</form>

Answer 6

Sie markiert diese mit jQuery, so ist hier eine Antwort jQuery. Was Sie verwenden müssen, ist der .submit() Event-Handler.

$("form").submit(function(e) { 
 
    console.log("form data: %o", $(this).find("#searchTerm").val()); 
 
    e.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="text" id="searchTerm" /> 
 
    <input type="submit" value="Submit" id="submitButton" /> 
 
</form>

Dieser Code wird eine Prozedur zum <form>onsubmit Ereignisse zuordnen:

Answer 7

Also das Hauptproblem war ich das <script> Element aufgenommen hatte, die Anbindung an den externen JavaScript-Datei, in der Unterseite meines <body> Elements; Das bedeutet, dass zum Zeitpunkt der Erstellung des Formulars nicht bekannt war, über welche Javascript-Funktion ich sprach.

Vielen Dank an alle diejenigen, die geholfen haben, und das war die Lösung ....

HTML

<head> 
    <!-- jQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <!-- Custom JavaScript --> 
    <script src="js/wiki.js"></script> 
</head> 
<body> 
    <form id="theform" onsubmit="test(this.searchTerm.value)"> 
    <input type="text" id="searchTerm" /> 
    <input type="submit" value="Submit" id="submitButton" /> 
    </form> 
</body> 
</html> 

JavaScript

$(document).ready(function() { 

    test = function(value) { 
     console.log(value); 
    return false; 
    }; 

});