How to Append(store) data from input field Html to a Json File

Question

I want to save ( store ) some data from HTML input forms to DB.Json file when i click Insert button from html input form !

This is what i have HTML :

<table id="datatable" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>  
<th>Birthday</th>
<th>Action</th>
</tr>
</thead>
<tr>
<td><input type="text" name="first_name" id="first_name"></td>
<td><input type="text" name="last_name" id="last_name"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="birthday" id="birthday"></td>
<td><button type="button" onclick="insert1()">Insert</button></td>
</tr>

now when i fill all fields on html index and click the insert button need to save these data's on json file

Missing info here. Do you want to submit to a backend and save it there to file or to a DB or do you simply want to collect the info on the client as JSON? If you are looking at sending it to a backend, what backend? — JGoodgive
– JGoodgive, Commented Apr 27, 2019 at 21:05

Marco Sanchez · Accepted Answer · 2019-04-27 17:29:09Z

1

First of all, place your <tr> inside <tbody> (it's always a good practice).

Now about your issue. You can't create a separate DB.json file with javascript, but you can create a JSON object and store values in that.

Then just build your Json Objectby getting balues by every input id

function insert1() {
  myJson = {
    first_name: $("#datatable").find("#first_name").val(),
    last_name: $("#datatable").find("#last_name").val(),
    age: $("#datatable").find("#age").val(),
    birthday: $("#datatable").find("#birthday").val(),
  };
  
  console.log("myJson", myJson);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="datatable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Age</th>  
      <th>Birthday</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" name="first_name" id="first_name"></td>
      <td><input type="text" name="last_name" id="last_name"></td>
      <td><input type="text" name="age" id="age"></td>
      <td><input type="text" name="birthday" id="birthday"></td>
      <td><button type="button" onclick="insert1()">Insert</button></td>
    </tr>
  </tbody>
</table>

edited Apr 27, 2019 at 17:29

answered Apr 27, 2019 at 17:20

Marco Sanchez

7887 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Phantom Fortnite Over a year ago

Thanks for your time to help me, but i want the input array to save on the DB.json File, i fill all the input forms and click the insert when i check the DB.json file the inputs didnt save ! can you help me on this

Khaled Ahmed · Accepted Answer · 2019-04-27 18:30:30Z

0

you can use axios to write in json file

simply it's an ajax wrapper

axios.post("json file path", jsonObject).then(
  res => console.log(res); /// successfully writing in file
);

answered Apr 27, 2019 at 18:30

Khaled Ahmed

1,14410 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to Append(store) data from input field Html to a Json File

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related