javascript - append value to form - Stack Overflow

admin管理员组

文章数量:1336340

I am trying to get values from form and append it to a form and then pass that value as parameter

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 my script I have hardcoded the value of name, phone and url and it is working by I am not able to append the value from form.. so I am looking for

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

Also on button click I am not able to pass data as I have placed alert but I dont my code enter function

NOTE: I haven't worked on url part yet

I am trying to get values from form and append it to a form and then pass that value as parameter

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 my script I have hardcoded the value of name, phone and url and it is working by I am not able to append the value from form.. so I am looking for

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

Also on button click I am not able to pass data as I have placed alert but I dont my code enter function

NOTE: I haven't worked on url part yet

• javascript
• jquery
• forms

Share Improve this question Follow edited Aug 18, 2017 at 0:59 smarber 5,08477 gold badges4040 silver badges8383 bronze badges asked Aug 17, 2017 at 20:42 raulxboxraulxbox 6311 gold badge11 silver badge88 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

you are appending a string here. Just remove the "

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

Also you may want to take a closer look at anonymous functions and data types in javascript

To create a FormData with valued from the actual HTML you can pass that form to form data as 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 = new 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>

Actually you can do it much simpler by getting only the whole form and pass it to FormData constructor. You should set name for your inputs though

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./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>

本文标签： javascriptappend value to formStack Overflow