append Wert zu bilden

Question

Ich versuche, Werte von Form zu erhalten und es zu einem Formular anhängen und dann diesen Wert als Parameter übergeben

Script

$(document).ready(function() { 
$('#buttonClick').on('click', 'button',function firstCall(){ 

var form = new FormData(); 
form.append("name", "test"); 
form.append("phone", "2245201905"); 
form.append("url", "this_url"); 
var settings = { 
    "async": true, 
    "crossDomain": true, 
    "url": "url_path", 
    "method": "POST", 
    "processData": false, 
    "contentType": false, 
    "mimeType": "multipart/form-data", 
    "data": form 
} 

$.ajax(settings).done(function (response) { 
    console.log(response); 
});}); 
}); 

HTML

<form method="post" id="formSample"> 
<div class="form-group"> 
     <label for="name">Name</label> 
     <input type="text" id="name" placeholder="Fullname"> 
</div> 
<div class="form-group"> 
     <label for="phone">phone</label> 
     <input type="number" name="phone" placeholder="number"> 
</div> 
<div id="buttonClick"> 
<button >Submit</button></div> 

In meinem Skript habe ich den Wert von Name, Telefon und URL festgeschrieben und es funktioniert von Ich kann nicht appen d der Wert von Form .. so ich suche

form.append("name", "(document.getElementById('name').value"); 

auch auf die Schaltfläche klicken ich nicht in der Lage bin Daten zu übergeben, wie ich Alarm gesetzt haben, aber ich nicht meinen Code eingeben Funktion

HINWEIS: I habe noch nicht an url Teil

Answer 1

Um eine Formdata mit Wert aus dem eigentlichen HTML erstellen Sie diese Form passieren können Daten zu bilden

Parameter

<form id="myForm"> 
    <input type="text" id="name" name="name" placeholder="Fullname"> 
    <input type="text" id="phone" name="phone" placeholder="Phone"> 
</form> 
<script> 
var myform = document.getElementById('myForm'); 
var form = FormData(myform); 
// form will have name and phone 
form.append("url", window.location.href); 

$.ajax(settings).done(function (response) { 
    if (response.success) { 
     // Only do something if the response data has success key. 
    } 
});}); 
</script> 

Answer 2

form.append("name", "(document.getElementById('name').value"); 

gearbeitet, die Sie hier eine Zeichenfolge anhängen. Entfernen Sie einfach die "

form.append("name", document.getElementById('name').value); 

Auch möchten Sie vielleicht einen genaueren Blick auf anonyme functions und data types in Javascript nehmen

Answer 3

Eigentlich kann man es tut viel einfacher, indem nur die ganze Form bekommen und es zu FormData constructor passieren. Sie sollten für Ihre Eingaben gesetzt Namen obwohl

function firstCall(e) { 
 
     e.preventDefault(); 
 

 
     var htmlForm = document.getElementById('formSample'); 
 
     var form = new FormData(htmlForm); 
 
     form.append("url", "this_url"); 
 
     
 
     // perform the ajax request 
 
     form.forEach((e, i) => { console.log(i, e); }); 
 
} 
 

 
$(document).ready(function() { 
 
    // You can use named function if you need to reuse it elsewhere 
 
    $('#buttonClick').on('click', 'button', firstCall); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post" id="formSample"> 
 
<div class="form-group"> 
 
     <label for="name">Name</label> 
 
     <input type="text" name="name" id="name" placeholder="Fullname"> 
 
</div> 
 
<div class="form-group"> 
 
     <label for="phone">phone</label> 
 
     <input type="number" id="phone" name="phone" placeholder="number"> 
 
</div> 
 
<div id="buttonClick"> 
 
<button >Submit</button></div>