Konvertieren Eingabefelder zu Json in Javascript

Question

Ich möchte ein JSON-Ergebnis von meinen Eingabefeldern erhalten.

Json Ergebnis

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

Der Grund dafür ist, weil ich es will meine Klasse von

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

Ich will nicht passen die $("inputForm").serialize(); verwenden, weil ich lernen, wie man um dies manuell zu tun.

Unten ist mein Eingabeformular

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

Bitte helfen. Vielen Dank.

Answer 1

Sie Objektkonstruktoren machen können, die Ihre Backend-Code ähneln. Hier serialisiere ich die Eingänge in ein scheduleVisit Objekt.

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 2

reine Javascript verwenden Sie können JSON.stringify(yourInputValu) tun, um jede javascript Objekt JSON

Answer 3

zu konvertieren Wenn Ihr Eingabeformular so einfach ist und Sie keine generische Lösung wollen, können Sie es tun ziemlich leicht mit:

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

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

Answer 4

können Sie iterieren <form>.elements, jede .name und .value als Eigentum und Werte eines FormData() Objekts festgelegt, die an den Server gesendet werden können fetch() oder 0 mit manuell, oder legen Sie die Eigenschaften und Werte in einem JavaScript-Objekt, das werden, können JSON.stringify() geben

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 5

Sie können den Wert Ihrer Eingaben zu einem Objekt zuweisen. Siehe Beispiel unten. Sie können das Objekt dann in eine JSON-formatierte Zeichenfolge serialisieren.

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 6

Sie bitte Ihre Antwort aus dem Link finden hofft, es löst Ihr Problem. „Ich mag ein json Ergebnis von meinen Eingabefeldern bekommen“ techiescornersite.blogspot.in