將html格式輸入保存爲json文件

Question

<div class="email"> 
<section class="subscribe"> 
<div class="subscribe-pitch"> 
</div> 
<form action="#" method="post" class="subscribe-form" id="emails_form"> 
<input type="email" class="subscribe-input" placeholder="Enter email for newsletter" > 
<button id="email_submit" type="submit" value="send" class="subscribe-submit"><i class="fa fa-chevron-right"></i></button> 
</form> 

我需要將輸入數據從簡單的電子郵件表單保存到json文件中。我想我會用javascript來做到這一點。有人可以幫助一步一步嗎？我是新手

Answer 1

使用jQuery，這是相當簡單：

var formData = JSON.stringify($("#emails_form").serializeArray()); 

如果你想存儲formData在一個JSON文件，你需要將它發佈到服務器（例如每AJAX）並保存。但在這種情況下，您可以簡單地發佈表單並將其轉換爲服務器本身的JSON。

請參閱this answer。

Answer 2

DEMO

使用序列化，我們可以輸入HTML表單保存到JSON輸出

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#btn").click(function(e){ 
    var jsonData = {}; 

    var formData = $("#myform").serializeArray(); 
    // console.log(formData); 

    $.each(formData, function() { 
     if (jsonData[this.name]) { 
      if (!jsonData[this.name].push) { 
       jsonData[this.name] = [jsonData[this.name]]; 
      } 
      jsonData[this.name].push(this.value || ''); 
     } else { 
      jsonData[this.name] = this.value || ''; 
     } 


    }); 
    console.log(jsonData); 
    $.ajax(
    { 
     url : "action.php", 
     type: "POST", 
     data : jsonData, 

    }); 
    e.preventDefault(); 
}); 
}); 
</script> 

HTML

<div id="header"> 
Send Form's data as JSON 
</div> 

<form id="myform" type="post"> 
    <fieldset> 
    <legend>Ajax Form </legend> 
    <p>We would love to hear from you. Please fill out this form</p> 
    <div class="elements"> 
     <label for="name">Name :</label> 
     <input required="required" type="text" value="Girish Kumar Santhu" name="fname" size="20" /> 
    </div> 
    <div class="elements"> 
     <label for="Age">Age :</label> 
     <input required="required" type="number" value="32" id="age" name="age" size="10" /> 
    </div> 
    <div class="elements"> 
     <label for="pro"> Profession :</label> 
     <select name="pro"> 
    <option value="Student">Student</option> 
    <option value="Engineer" selected="selected">Engineer</option> 
    </select> 
    </div>  
    <div class="elements"> 
    <label for="Gender">Gender: </label> 
     <input type="radio" name="gender" value="Male" checked="checked" id="r1"> Male 
    <input type="radio" name="gender" value="Female" id="r2"> Female 
</div> 
    <div class="elements"> 
     <label for="hobby">Hobby :</label> 
     <input type="checkbox" name="hobby[]" value="Sports" id="ch1" checked="checked"> Sports 
    <input type="checkbox" name="hobby[]" value="Coding" id="ch2"> Coding 
    </div> 

    <div class="submit"> 
     <input type="submit" id="btn" name="btn" class="btn" value="Submit" /> 
    </div> 
    <span class="elements">Press "Ctrl + Shift + J" to see sent JSON in console: <span> 
    </fieldset> 
</form>