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.

Answer 1

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> 

Answer 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> 

Answer 3

使用纯JavaScript，您可以执行JSON.stringify(yourInputValu)将任何javascript对象转换为JSON

Answer 4

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> 

Answer 5

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')
});

Answer 6

请从链接中找到答案，希望它可以解决您的问题： techiescornersite.blogspot.in