append value to form

Question

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

Solution 1

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>

Solution 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

Comments

[raulxbox]

yep thanks.. this worked.. I also have another doubt when I am making API response I want to display this for only when response is true.. any guidance?

[James]

@raulxbox No need to thanks me. Just upvote and accept please :D

[raulxbox]

I did but they say you can upvote answer after 2 minutes.. I will do that. also how do I pass current page url to form

[James]

current page url = window.location.href

[raulxbox]

thanks again I only want to display this form when response = true so I know I can display none and then display block but is that a good practice?

[James]

Yes, you can show hide the form as much as you want

[raulxbox]

yeah this is really simpler.. But where are you making ajax call? instead of console.log right?

[smarber]

You can keep the part you did

[raulxbox]

what do you mean by this // Don't use named function here

[smarber]

.on third argument is a callback, in your case you can use an anonymous function instead of a named one (you didn't need to give it firstCall as name)

[raulxbox]

ok but I do have anothor API Call so I guess I have to use a function name here

[Ali]

var form = FormData(myform); has to be var form = new FormData(myform); right?