Formelement sendet nicht seine Werte

So habe ich eine Form:Formelement sendet nicht seine Werte

<form name="htmlform" method="post" action="test.html"> 
    <input type="text" id="first" placeholder="First Name" required> 
    <input type="text" id="last" placeholder="Last Name" required> 
    <input type="email" id="email" placeholder="Email" required> 
    <textarea id="comments" name="comments" placeholder="Message" required></textarea> 
    <button name="send" type="submit" class="submit">SEND</button> 
</form>

und nachdem der Benutzer das Formular abschickt, wird gesendet durch POST-Methode test.html. Und das ist der Code auf test.html.

<div id="targetDiv"></div> 

</body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 
    var first=$("#first").val(); 
    var last=$("#last").val(); 
    var email=$("#email").val(); 
    var comments=$("#comments").val(); 
    var txt1="Welcome " +first+" "+last; 
    var txt2="Your Email is " +email; 
    var txt3="Your Message is "+ comments; 
    $("#targetDiv").append(txt1+"<br>"+txt2+"<br>"+txt3); 
</script>

aber, wenn der Benutzer trägt, druckt #targetDiv immer aus:

Welcome undefined undefined 
Your Email is undefined 
Your Message is undefined

Quelle

2016-09-04 eclipseIzHere

Versuchen Sie stattdessen – PeMaCN

eine HTML-Seite POST GET gebuchten Werte nicht zugreifen können. Sie müssen ein tatsächliches serverseitiges Programm einrichten, um mit Formularposts umzugehen. – Tomalak

@Titus also lege ich die js unter das Formular? wie mache ich das test.html? – eclipseIzHere

Ihr Formular und das Div, dem Sie versuchen, Werte anzufügen, müssen sich in derselben HTML-Datei befinden, es sei denn, Sie arbeiten mit einem Server. Geben Sie auch einen Ereignis-Listener ein, um den gesamten Code aufzurufen, den Sie bereits haben. Gefällt mir:

$(".submit").on("click", function(e) { 
    e.preventDefault(); 
    var first=$("#first").val(); 
    var last=$("#last").val(); 
    var email=$("#email").val(); 
    var comments=$("#comments").val(); 
    var txt1="Welcome " +first+" "+last; 
    var txt2="Your Email is " +email; 
    var txt3="Your Message is "+ comments; 
    $("#targetDiv").append(txt1+"<br>"+txt2+"<br>"+txt3); 
});

Quelle

2016-09-04 17:17:58

-1

es Wickeln innerhalb der jQuerys-Ready-Funktion zu dokumentieren und die Funktion auslösen, wenn der Benutzer auf die Schaltfläche zum Senden klickt.

$(document).ready(function() { 

    $(".submit").on("click", function() { 

     var first=$("#first").val(); 
     var last=$("#last").val(); 
     var email=$("#email").val(); 
     var comments=$("#comments").val(); 
     var txt1="Welcome " +first+" "+last; 
     var txt2="Your Email is " +email; 
     var txt3="Your Message is "+ comments; 
     $("#targetDiv").append(txt1+"<br>"+txt2+"<br>"+txt3); 
    }); 
});

Quelle

2016-09-04 17:11:25

Dies funktioniert nur, wenn Sie '# targetDiv' auf der gleichen Seite haben, also sollten Sie' .preventDefault() 'auf dem Click-Ereignisobjekt' .on aufrufen ("click", function (ev) {ev.preventDefault(); ...}); ' – Actorclavilis

Dies sendet auch keine Daten an den Server, die möglicherweise benötigt werden. – Actorclavilis

Ihr Formular sendet tatsächlich Werte an den Server mit einer POST-Anforderung. Die Seite test.html ist jedoch eine andere Seite als die Seite mit dem Formular, sodass die <input> Elemente an diesem Punkt nicht mehr existieren.

Sie müssen serverseitigen Code schreiben, um die POST-Parameter zu verarbeiten und sie in die test.html-Seite einzufügen. Alternativ können Sie die Parameter mit einer GET Anfrage senden und die window.location.queryString Eigenschaft untersuchen, um die Werte zu analysieren.

Quelle

2016-09-04 17:12:00 Actorclavilis

Javascript oder jquery ist keine serverseitige Sprache .. Verwenden Sie ein serverseitiges Skript wie PHP, ASP.

, wenn Sie das gleiche mit Jquery verwenden Sie die folgende Methode tun wollen ..

<form name="htmlform" method="post" action="test.html"> 
    <input type="text" id="first" placeholder="First Name" required> 
    <input type="text" id="last" placeholder="Last Name" required> 
    <input type="email" id="email" placeholder="Email" required> 
    <textarea id="comments" name="comments" placeholder="Message" required></textarea> 
    <button id="button" name="send" type="button" class="submit">SEND</button> 
</form> 

<div id="targetDiv"> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 
$('#button').click(function() { 
    var first=$("#first").val(); 
    var last=$("#last").val(); 
    var email=$("#email").val(); 
    var comments=$("#comments").val(); 
    var txt1="Welcome " +first+" "+last; 
    var txt2="Your Email is " +email; 
    var txt3="Your Message is "+ comments; 
    $("#targetDiv").append(txt1+"<br>"+txt2+"<br>"+txt3); 
    }); 
</script>

Quelle

2016-09-04 17:23:09 VimalVS

Formelement sendet nicht seine Werte

Antwort

Verwandte Themen