javascriptの入力フィールドをJsonに変換する

Question

入力フィールドからjson結果を取得したいと考えています。

JSON結果

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

その理由は、私はそれが

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

の私のクラスに合うようにしたいので、私はどのように勉強したいので、私は$("inputForm").serialize();を使用したくないですこれを手動で行います。以下は

助けてください、私の入力フォーム

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

です。ありがとうございました。

Answer 1

あなたはバックエンドのコードに似ているオブジェクトのコンストラクタを作ることができます。ここでは、入力をscheduleVisitオブジェクトにシリアル化しています。

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

ご入力フォームは、そのシンプルである場合は、JSON

Answer 3

に任意のjavascriptオブジェクトを変換するJSON.stringify(yourInputValu)を行うことができ、純粋なJavaScriptを使用して、より一般的な解決策を望んでいない、あなたがかなり簡単にそれを行うことができます：

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

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

Answer 4

、プロパティおよびfetch()または0を使用してサーバーに送信することができるFormData()オブジェクトの値としてそれぞれ.nameと.valueを設定し、<form>.elementsを繰り返すことができます、または手動でオブジェクトにご入力の値を割り当てることができます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 5

に渡すことができるJavaScriptオブジェクトでプロパティと値を設定します。たとえば、以下のスニペットを参照してください。その後、オブジェクトをJSON形式の文字列にシリアル化できます。

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

リンクからあなたの答えを見つけてください、それはあなたの問題を解決を願って： techiescornersite.blogspot.in