Zugriff auf Formular-Elemente mit Hilfe von jquery und DOM

Hier ist die form

<form method="post">

    <input type="hidden" name="resulttype" value="Create">              
    <table>
        <tr>
            <td>Name</td>           
            <td><input type="text" id="name" value="Abhishek"/></td>
        </tr>
        <tr>
            <td>User Name</td>
            <td><input type="text" id="username" name="username" value="AbhishekSimion"></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input type="text" id="email" name="email" value="[email protected]"></td>
        </tr>
        <tr>
            <td>Department</td>
            <td><input type="text" id="department" name="department"></td>
        </tr>
        <tr><td colspan="2"><input type="button" id="button" value="Done!"></td></tr>
    </table>
</form>

hier ist der Javascript-Teil

var x = document.getElementById("name");
var email = $("input#email").val();  

var dataString = 'name='+ x + '&email=' + email;
$(function() {
$("#button").click(function() {
    callme();
    });
  });
function callme()
{
    alert(dataString);
    var msg = $.ajax({
        type: "POST",
        url: "/temp/AjaxPostSend",
        data: dataString,
        async: false,
        success: function(html){
          alert( "Data Saved: " + msg );
        }
     }).responseText;

}

Warum erhalte ich die Meldung "name=null&email=undefined" in meiner alert-box? Was ist hier falsch?

Hinweis: ich bin mit JQuery v1.5.2

Es ist möglich, zu serialisieren ein Formular aus und senden Sie es mit ajax, statt der Verkettung alle Werte von hand.

InformationsquelleAutor abi1964 | 2011-05-05

3

~~zumindest die email Wert sollte funktionieren...~~

In jedem Fall nicht erstellen Sie die Zeichenfolge manuell. Set data auf ein Objekt mit den Werten:
```
data: {name: $('#name').val(), email: $('#email').val()},
//or
data: $('#yourformID').serialize(),
```
Diese Weise, jQuery wird sich darum kümmern die richtige Flucht.

Beachten Sie auch, dass die IDs eindeutig sein müssen. Wenn Sie andere Elemente mit den gleichen IDs weiter auf die Seite, funktioniert es nicht. Änderungen der IDs.

Update:

Den Fluss der code ist nicht korrekt. Dieser Artikel:
```
var x = document.getElementById("name");
var email = $("input#email").val();  

var dataString = 'name='+ x + '&email=' + email;
```
ausgeführt werden , bevor die Seite fertig geladen. Das bedeutet, dass (a) die Elemente sind noch nicht verfügbar und b) selbst wenn Sie es wären, würde der Benutzer nicht in der Lage gewesen, um Informationen einzugeben.

Lesen Sie die Werte an der Zeit, die Sie wollen, um das Formular abgeschickt:
```
$(function() {
    $("#button").click(callme);

    function callme() {      
        $.ajax({
            type: "POST",
            url: "/temp/AjaxPostSend",
            data: {name: $('#name').val(), email: $('#email').val()},
            success: function(msg){
                alert( "Data Saved: " + msg );
            }
         });
    }

});
```
Beachten Sie auch, dass
```
var msg = $.ajax({...}).responseText;
```
wird nicht funktionieren, da der Ajax-request ist asynchrone. Das bedeutet, dass callme() zurückkehren wird, bevor der Ajax-response zur Verfügung. Der Antwort-text ist verfügbar als argument der success Rückruf.

Korrektur: ich sah die async: false , aber es schien, ich hatte einen kleinen Fehler in meinem Gehirn ;), In diesem Fall die obige Anweisung würde funktionieren, ja. Aber Sie sollten es vermeiden synchrone Ajax (sollte aufgerufen werden, Sjax dann) fordert auf, es blockiert den client.
- +1 für serialize()
- Super, Danke 🙂
InformationsquelleAutor Felix Kling
1

Um den Wert eines Eingangs mit einfachen JavaScript, müssen Sie den Zugriff auf die variable namens value.
```
var x = document.getElementById("name").value;
```
Ihre zweite variable sollte funktionieren wie erwartet, allerdings ist es möglich das weglassen der Eingang von der Auswahl, da die IDs sind immer eindeutig, und es spart ein paar bytes.
```
var email = $("#email").val();
```
Auch, es ist ein einfacher Weg, um senden ein Formular mit ajax. Serialisieren Sie das Formular. Beachten Sie data: ...
```
var msg = $.ajax({
        type: "POST",
        url: "/temp/AjaxPostSend",
        data: $("form").serialize(),
        async: false,
        success: function(html){
          alert( "Data Saved: " + msg );
        }
     }).responseText;
```
InformationsquelleAutor Andre Backlund
1

versuchen, diese
```
var myname = $('#name').val()
var mymail = $('#email').val();
```
DEMO

außerdem können Sie wie unten

Daten: { name: MeinName, E-Mail: mymail }
```
var msg = $.ajax({
        type: "POST",      
        url: "/temp/AjaxPostSend",
        data: { name: myname, email: mymail }
        async: false,
        success: function(html){
          alert( "Data Saved: " + msg );
        }
     }).responseText;
```
UPDATE

versuchen mit

<input type="text" id="myname" name="myname" value="Abhishek"/> und dann

var myname = $('#myname').val()

für das senden von Datum über POST verwenden
```
 data: $('#yourformID').serialize(),
```
- Ich bekomme diese "name=undefined&email= "undefined"
- wie ist es möglich?? sehen Sie die DEMO...und noch eins für die gute Praxis nie id=name..es zu Verwirrung führen..noch was anderes einstellen
- Auch ich habe versucht, auf JSFiddle.net hier jsfiddle.net/abhisheksimion/AE9eB/2 die E-Mail-arbeitet
- Es funktioniert in jsFiddle aber weiß nicht was falsch in meinem Rechner? Das ist der Grund, warum ich diese Frage hier
- warum u mischen javascript-Methode document.getElementById(); - und jQuery-Methode val();. verwenden Sie alle mit jQuery.. und siehe die Antwort von FlexiKling
- Ich mmixed Sie nur für den Zweck, zu zeigen, dass ich versuchte beide Methoden. Eine weitere Sache was macht diese data: $('#yourformID').serialize(), tun? auch ist success: function(html){ alert( "Data Saved: " + msg ); } nur aufgerufen, nachdem der server die Annahme abgeschlossen ist?
- Finden Sie in der Dokumentation: api.jquery.com/serialize und api.jquery.com/ajax success wird aufgerufen, wenn die Anfrage wurde erfolgreich (dh. die Antwort ist nicht 404 oder 500 oder so ähnlich). complete wird aufgerufen, wenn die Anforderung abgeschlossen ist.
- Kling: vielen Dank nochmal
- Kling: Dann wahrscheinlich für meine Zwecke will ich etwas tun, nur nach meiner Anfrage abgeschlossen ist. Also werde ich gehen für complete statt success
- Das hängt davon ab. Die meisten der Zeit, erhalten Sie nur eine nützliche Antwort, wenn die Anfrage erfolgreich war. success wird häufiger verwendet als complete. Aber probieren Sie es einfach.
- Ich habe versucht, und mein server-Seite empfängt die Daten, sondern der Alarm wird nur angezeigt object object. Ich habe eine situation, wo ich gerne eine andere Funktion aufrufen, erst nachdem der server die Anfrage abgeschlossen ist. wie kann ich es erreichen? auch die Anzeige der Antwortdaten vom server dazwischen (wahrscheinlich nach der kompletten server-Anfrage und ich bekomme Antwort von der server-Seite)
- Ich habe versucht async:false, complete: function(msg){ alert( "Data Saved: " + msg ); } und es funktioniert, ist das gut? oder haben Sie anyother option für mich?
- Die Herstellung der Ajax-Aufruf asynchron Niederlagen der Zweck des habens ein Ajax-call imo. Wenn die Warnung zeigt [object Object] dann bedeutet dies einfach, die Daten aus einem array. Wenn Sie mit Chrome oder Firebug verwenden console.dir(data) prüfen Sie das element. Nur rufen die andere Funktion in der callback.
- Kling: Danke für die info, ich werde versuchen, dass, auch können Sie sich anschauen, 1 andere Frage für mich? stackoverflow.com/questions/5881230/... hier ist der Ort für JSFiddle jsfiddle.net/abhisheksimion/w5VzV/8
- Kling: In jsfiddle.net/abhisheksimion/w5VzV/9 nach der spry-Daten geladen ich möchte die 1. Zeile.
InformationsquelleAutor diEcho

ändern

var x = document.getElementById("name");
var email = $("input#email").val();

var x = $("#name");
var email = $("#email").val();

auch dieser Teil:

var x = $("#name");
var email = $("#email").val();  
var dataString = 'name='+ x + '&email=' + email;

gehen muss, bevor Sie den callme () - Funktion aufrufen wie diesem:

var dataString;
$(function() {
$("#button").click(function() {
    var x = $("#name");
    var email = $("#email").val();  
    dataString = 'name='+ x + '&email=' + email;
    callme();
    });
  });

Ich get "name=[object object]&email= "undefined"

InformationsquelleAutor Nathan

0

Da,

den Wert in 'x' ist ein Objekt und kein string, und ich denke, die syntax von " $("input#email")' ist falsch. Versuchen $(":input[id='email']").val()
- Ich bekomme diese "name=undefined&email= "undefined"
- versuchen Sie es hier jsfiddle.net/abhisheksimion/AE9eB/2 nur E-Mail funktioniert das auch nicht seine Arbeit in meinem Projekt, d.h., auf meinem Rechner
- Wenn Sie die Meldung zum ersten mal und ist natürlich null. Die Sache ist die Bindung dieses Ereignis wird ausgeführt, bevor die bowser aufgerufen hatte die ganze Seite. Eine einfachere Methode, die zeigt nur eine Warnung ausgeführt, bei event-Dokument.bereit.
- Ich bekam auch die Meldung 'name=[object object]&email=undefined'. Was ich sait ist, die Methode 'getElemntsById()' gibt ein Objekt, kein string. Was Sie wollen, ist 'x.Wert'.
- siehe @Felix Kling Antwort, Es ist eine gute Antwort für diese Frage
InformationsquelleAutor reporter
0

Nicht sicher, warum E-Mail geben Sie nicht definierte Wert, aber für Namen, es sollte wie das folgende:
```
var x = document.getElementById("name").value;
```
ODER
```
var x = $('#name').val();
```
InformationsquelleAutor Bat_Programmer

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

DEMO