将html表单输入保存为json文件 [英] Save html form input to json file

问题描述

 < div class =email> 
< section class =subscribe> 
< div class =subscribe-pitch> 
< / div> 
< form action =＃method =postclass =subscribe-formid =emails_form> 
< input type =emailclass =subscribe-inputplaceholder =输入电子邮件通讯> 
< button id =email_submittype =submitvalue =sendclass =subscribe-submit>< i class =fa fa-chevron-right>< / i> ;< /按钮> 
< / form> 
  

我需要将输入数据从简单的电子邮件表单保存到json文件中。用JavaScript。有人可以帮助一步一步吗？我是新手

解决方案

使用序列化我们可以将输入的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，
 $ b}）; 
 e.preventDefault（）; 
}）; 
}）; 
< / script> 
  

HTML

 < div id =header> 
以JSON形式发送表单的数据
< / div> 
 
< form id =myformtype =post> 
< fieldset> 
< legend> Ajax表格< / legend> 
< p>我们很乐意听取您的意见。请填写此表格< / p> 
< div class =elements> 
< label for =name>名称：< / label> 
< input required =requiredtype =textvalue =Girish Kumar Santhuname =fnamesize =20/> 
< / div> 
< div class =elements> 
< label for =年龄>年龄：< / label> 
< input required =requiredtype =numbervalue =32id =agename =agesize =10/> 
< / div> 
< div class =elements> 
< label for =pro>职业：< / label> 
< select name =pro> 
< option value =学生>学生< / option> 
< option value =Engineerselected =selected> Engineer< / option> 
< / select> 
< / div> 
< div class =elements> 
< label for =性别>性别：< / label> 
< input type =radioname =gendervalue =Malechecked =checkedid =r1>男性
< input type =radioname =gendervalue =女性id =r2>女
< / div> 
< div class =elements> 
< label for =hobby>嗜好：< / label> 
< input type =checkboxname =hobby []value =Sportsid =ch1checked =checked> Sports 
< input type =checkboxname =hobby []value =Codingid =ch2>编码
< / div> 
 
< div class =submit> 
< input type =submitid =btnname =btnclass =btnvalue =Submit/> 
< / div> 
< span class =elements>按下Ctrl + Shift + J在控制台中查看发送的JSON：< span> 
< / fieldset> 
< / form> 
  

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

I need to save the input data from a simple email form to a json file.I think I do that with javascript. Can someone help step by step please? I am novice

解决方案

DEMO

Using Serializing we can save input html form to JSON output

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

这篇关于将html表单输入保存为json文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！