Ergreifungsformular mit jquery funktioniert nicht

Question

Ich verwende JQuery 3.2.1, um Eingabeformulare zu greifen. Das Problem ist, dass ich nichts herausbekomme, ein leeres Objekt oder eine leere Zeichenfolge. Ich versuchte mit serialisieren, serialisieren Array, Code von SO, um die Felder zu erhalten und zu json zu transformieren, nichts hat funktioniert.

Ich bin sicher, dass ich die Formular-ID korrekt geschrieben habe, weil die Subskription der Funktion erfolgreich ist.

hier sind Teil der html:

<form role="form" id="organisationform"> 
    <div class="row col-sm-offset-1"> 
     <div class="form-group col-sm-5"> 
      <label for="name" class="h4">Nom Organisation</label> 
      <input type="text" class="form-control" id="nomOrg" placeholder="Nom de l'organisation" required> 
     </div> 
     <div class="form-group col-sm-5"> 
      <label for="lastname" class="h4">Identificateur </label> 
      <input type="text" class="form-control" id="idOrg" placeholder="Entrer IDentificateur" required> 
     </div> 
    </div> 
... 
</form> 

und hier ist der JS-Code:

onSubmit('form#organisationform', function() { 
    send('http://localhost:8080/organisation/ajouter', 'form#organisationform'); 
}); 

in einer anderen Datei:

function grabForm(formId) { 
var data = {}; 
$(this).serializeArray().map(function(x){data[x.name] = x.value;}); 
return data; 
} 

function send(url, formId) { 

var data = grabForm(formId); 

$.ajax({ 
    url: url, 
    ... 
}); 
} 

function onSubmit(idform, fn) { 
$(idform).submit(function(event) { 
event.preventDefault(); 
fn(); 
}); 
} 

das Problem auf dem Grab ist Ding-Funktion gibt es ein leeres Objekt, aber vor diesem Formular war es Serialize-Funktion.

in einem anderen Test, ich Copy-Paste-Code nur aus SO:

$('#organisationform').submit(function() { 
    var $inputs = $('#organisationform :input'); 

// not sure if you wanted this, but I thought I'd add it. 
// get an associative array of just the values. 
var values = {}; 
$inputs.each(function() { 
    values[this.name] = $(this).val(); 
}); 

alert(values); 
    //Do stuff with view object here (e.g. JSON.stringify?) 
}); 

gleichem Problem.

SO wie kann ich das beheben? oder wie kann ich es tun?

Answer 1

Scheint so, als würden Sie die jQuery-Funktionen in eine Ladung Ihrer eigenen Funktionen einpacken, die eigentlich keinen Mehrwert ergeben, aber Dinge überkomplizieren, insbesondere den Umfang unsicher machen und den Kontrollfluss schwer nachvollziehbar machen .

Dies sollte einreichen ausreichend sein, die Form über Ajax: benötigen

$("form#organisationform").submit(function(event) { 
    event.preventDefault(); 
    $.ajax({ 
    url: "http://localhost:8080/organisation/ajouter", 
    data: $(this).serialize(), //serialise the form, which due to the scope can be fetched via 'this', 
    method: "POST", //assuming it's a POST, but set it to whatever is right for your server 
    success: function(data) { 
     console.log(data); //receive any response from the server 
    }, 
    error: function(jQXHR, textStatus, errorThrown) { 
     console.log(errorThrown + " " + textStatus); //log any HTTP errors encountered 
    } 
    //...etc 
    }); 
}); 

Sie können Dinge zwicken je nachdem, was genau der Server erwartet.

Answer 2

autsch! Ich habe die Eingabe mit Namensattributen statt ID geändert, jetzt kann es Dinge greifen!