I've never done this before and I'm not too experienced with Ajax. WHat I want to do, I believe is fairly simple.

I want to take the data from this form:

 <form action="/comics.json" method="post" class="admin__add">
        <label for="admin__id">ID</label>
        <input type="text" class="admin__id">
        <label for="admin__price">Price</label>
        <input type="number" class="admin__price">
        <label for="admin__url">URL</label>
        <input type="text" class="admin__url">
        <label for="admin__data-item-description">Data-item-descriptin</label>
        <input type="text" class="admin__data-item-description">
        <label for="admin__data-item-name">data-item-name</label>
        <input type="text" class="admin__data-item-name">
        <label for="admin__year">year</label>
        <input type="number" class="admin__year">
        <label for="admin__issue">issue</label>
        <input type="text" class="admin__issue">
        <label for="admin__series">series</label>
        <input type="text" class="admin__series">
        <label for="admin__type">type</label>
        <input type="text" class="admin__type">
        <label for="admin__label">label</label>
        <input type="text" class="admin__label">
        <label for="admin__sale-price">sale-price</label>
        <input type="number" class="admin__sale-price">
        <label for="admin__publisher">publisher</label>
        <input type="text" class="admin__publisher">
        <label for="admin__extra">extra</label>
        <input type="text" class="admin__extra">
        <label for="admin__run">run?</label>
        <input type="text" class="admin__run">
        <label for="admin__weight">weight</label>
        <input type="number" class="admin__weight">
        <label for="admin__stock">stock</label>
        <input type="number" class="admin__stock">
        <label for="admin__allowOutOfStockPurchases">allowOutOfStockPurchases</label>
        <input type="text" class="admin__allowOutOfStockPurchases">
        <button class="admin__submit">SUBMIT</button>
    </form>

And add it into my Json file which is structured like this:

{
    "id" : "crossedonehundred9",
    "price" : "2.99",
    "url" : "/",
    "data-item-description" : "Crossed One Hundred run (32 books)",
    "data-item-image" : "/thumbnails/Fantasy Road new and preowned comic book sales - pressing and cleaning service at fantasy road - Crossed One Hundred 9.jpg",
    "data-item-name" : "Crossed One Hundred full run",
    "year" : "2012",
    "issue" : "9",
    "series" : "Crossed One Hundred",
    "type" : "",
    "label" : "",
    "sale-price" : "",
    "publisher" : "Avatar",
    "extra" : "",
    "enlarge" : "/img/Fantasy Road new and preowned comic book sales - pressing and cleaning service at fantasy road - Crossed One Hundred 9.jpeg",
    "run" : "",
    "dimensions" : {
        "weight" : "100"
    },
    "stock" : 1,
    "allowOutOfStockPurchases" : false
}

So far I've got this code, but I have 0 idea what I'm doing and I know its completely wrong.

$("admin__submit").click(function(){
var id = $('.admin__id');
var price = $('.admin__price');
var url = $('.admin__url');
var data1 = $('.admin__data-item-description');
var data2 = $('.admin__data-item-name');
var year = $('.admin__year');
var issue = $('.admin__issue');
var series = $('.admin__series');
var type = $('.admin__type');
var label = $('.admin__label');
var price = $('.admin__sale-price');
var publisher = $('.admin__publisher');
var extra = $('.admin__extra');
var run = $('.admin__run');
var weight = $('.admin__weight');
var stock = $('.admin__stock');
var allowOutOfStockPurchases = $('.admin__allowOutOfStockPurchases');


$.post("comics.json",
{
    "id" : '"'   id   '"',
    "price" : '"'   price   '"',
    "url" : "/",
    "data-item-description" : '"'   data1   '"',
    "data-item-image" : '"'   url   '"',
    "data-item-name" : '"'   data2   '"',
    "year" : '"'   year   '"',
    "issue" : '"'   issue   '"',
    "series" : '"'   series   '"',
    "type" : '"'   type   '"',
    "label" : '"'   label   '"',
    "sale-price" : '"'   sale-price   '"',
    "publisher" : '"'   publisher   '"',
    "extra" : '"'   extra   '"',
    "run" : '"'   run   '"',
    "dimensions" : {
        "weight" : '"'   weight   '"'
    },
    "stock" : stock,
    "allowOutOfStockPurchases" : allowOutOfStockPurchases
},
function(data, status){
  alert("Data: "   data   "\nStatus: "   status);
});

});

CodePudding user response：

Just add .val() for each of your inputs.

var price = $('.admin__price');

Here you made a reference to your input and saved it in variable price. So whenever you need to get its value you will call .val() on it

$.post("comics.json",
{
    "id" :  id.val() ,
    "price" :  price.val(),

This should do the trick