Convert input fields to Json in javascript

Question

I would like to get a json result from my input fields.

Json Result

[{ScheduledVisit: "09/06/2017 12:00 AM", Company: "ABC Corp.", ContactPerson: "Someone"}]

The reason for that is because I want it to fit my class of

public class ScheduleVisit
{
    [Required(ErrorMessage = "* Required")]
    public DateTime ScheduledVisit { get; set; }
    public string Company { get; set; }
    public string ContactPerson{ get; set; } 
}

I do not want to use the $("inputForm").serialize(); because I want to learn how to do this manually.

Below is my input form

<div class="col_half">
    <input type="text" name="ScheduledVisit" placeholder="Scheduled Visit" class="sm-form-control border-form-control datetimepicker" id="ScheduledVisit" />
</div>

<div class="col_half col_last">
    <input type="text" name="company" class="sm-form-control border-form-control" placeholder="company" id="company" />
</div>

<div class="col_two_third">
    <input type="text" name="contactPerson" placeholder="Contact Person" class="sm-form-control border-form-control" id="contact" /> 
</div>

Please help. Thank you.

"I would like to get a json result from my input fields." Is requirement to create valid JSON from <input> .name and .values, or is requirement to create a JavaScript object? — guest271314
– guest271314, Commented Aug 11, 2017 at 4:25

guest271314 · Accepted Answer · 2017-08-11 04:10:43Z

3

You can iterate <form> .elements, set each .name and .value as property and values of a FormData() object which can be submitted to server using fetch() or XMLHttpRequest(), or set properties and values at a JavaScript object which can be passed to JSON.stringify()

const form = document.forms[0];

form.onsubmit = e => {
  e.preventDefault();
  const fd = new FormData();
  const props = {};
  for (let element of form.elements) {
    if (element.type !== "submit") {
      props[element.name] = element.value;
      fd.append(element.name, element.value);
    }
  }
  
  for (let [key, prop] of fd) {
    console.log(key, prop)
  }
  
  const json = JSON.stringify(props);
  console.log(json);
}

<form>
  <div class="col_half">
    <input type="text" name="ScheduledVisit" placeholder="Scheduled Visit" class="sm-form-control border-form-control datetimepicker" id="ScheduledVisit" />
  </div>

  <div class="col_half col_last">
    <input type="text" name="company" class="sm-form-control border-form-control" placeholder="company" id="company" />
  </div>

  <div class="col_two_third">
    <input type="text" name="contactPerson" placeholder="Contact Person" class="sm-form-control border-form-control" id="contact" />
  </div>
  <input type="submit">
</form>

answered Aug 11, 2017 at 4:10

guest271314

1

Sign up to request clarification or add additional context in comments.

2 Comments

Ibanez1408 Over a year ago

I am new to website dev. Your solution runs on snippet well but when I copy paste the code to my code in asp, the const and let is not accepted.

guest271314 Over a year ago

@Ibanez1408 Substitute var for const and let

Namaskar · Accepted Answer · 2017-08-11 04:30:11Z

2

You can make object constructors that resemble your backend code. Here, I am serializing the inputs into a scheduleVisit object.

function scheduleVisit(obj) {
  this.scheduledVisit = obj.scheduledVisit;
  this.company = obj.company;
  this.contactPerson = obj.contactPerson;
}

document.getElementById('button').addEventListener('click', function() {
  var scheduledVisit = document.getElementById('ScheduledVisit').value;
  var company = document.getElementById('company').value;
  var contactPerson = document.getElementById('contact').value
  var visit = new scheduleVisit({
    scheduledVisit: scheduledVisit,
    company: company,
    contactPerson: contactPerson
  });

  console.log(JSON.stringify(visit));
});

<div class="col_half">
  <input type="text" name="ScheduledVisit" placeholder="Scheduled Visit" class="sm-form-control border-form-control datetimepicker" id="ScheduledVisit" />
</div>

<div class="col_half col_last">
  <input type="text" name="company" class="sm-form-control border-form-control" placeholder="company" id="company" />
</div>

<div class="col_two_third">
  <input type="text" name="contactPerson" placeholder="Contact Person" class="sm-form-control border-form-control" id="contact" />
</div>

<button id=button>Submit</button>

edited Aug 11, 2017 at 4:30

answered Aug 11, 2017 at 4:14

Namaskar

2,1071 gold badge16 silver badges29 bronze badges

3 Comments

Namaskar Over a year ago

I made a javascript object. What else do you want, yo?

guest271314 Over a year ago

"I would like to get a json result from my input fields." A JavaScript object is not JSON

Namaskar Over a year ago

Please refer to my latest update (the best update). I now realize that JSON is not A JavaScript object. I tried to fix the code, but I have not ran any unit tests.

samAlvin · Accepted Answer · 2017-08-11 04:11:05Z

You can assign the value of your inputs to an object manually. See below snippet for example. You can then serialize the object into a JSON formatted string.

let obj = {};
obj.ScheduledVisit = document.getElementById("ScheduledVisit").value;
obj.Company = document.getElementById("company").value;
obj.Contact = document.getElementById("contact").value;
console.log(obj);
let jsonStringObj = JSON.stringify(obj);
console.log(jsonStringObj);

<div class="col_half">
    <input type="text" name="ScheduledVisit" placeholder="Scheduled Visit" class="sm-form-control border-form-control datetimepicker" value="testVisit" id="ScheduledVisit" />
</div>

<div class="col_half col_last">
    <input type="text" name="company" class="sm-form-control border-form-control" placeholder="company" value="testCompany" id="company" />
</div>

<div class="col_two_third">
    <input type="text" name="contactPerson" placeholder="Contact Person" class="sm-form-control border-form-control" value="testContact" id="contact" /> 
</div>

Jorawar Singh · Accepted Answer · 2017-08-11 04:07:36Z

1

Using pure javascript you can do JSON.stringify(yourInputValu) to convert any javascript object to JSON

answered Aug 11, 2017 at 4:07

Jorawar Singh

7,6414 gold badges29 silver badges40 bronze badges

2 Comments

Ibanez1408 Over a year ago

How do I go about it, using the JSON.stringify()?

Jorawar Singh Over a year ago

Simply get the value using dom api and just pass it to JSON.stringify e.g document.getElementById('urInput').value

Michael Geary · Accepted Answer · 2017-08-11 04:10:26Z

0

If your input form is that simple and you don't want a more generic solution, you could do it pretty easily with:

function get( id ) { return document.getElementById(id).value; }

var json = JSON.stringify({
    ScheduledVisit: get('ScheduledVisit'),
    Company: get('company'),
    Contact: get('contact')
});

answered Aug 11, 2017 at 4:10

Michael Geary

29k9 gold badges67 silver badges77 bronze badges

Collectives™ on Stack Overflow

Convert input fields to Json in javascript

5 Answers 5

2 Comments

3 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related