JSFiddle - React, Tailwind, and code Playground

by Alex Baumgertner

HTML

<form action="#" method="post" class="demo-form">
    <input type="checkbox" name="vendor[]" value="Baxter of California" id="checkbox-brand1" checked="">
    <label for="checkbox-brand1">Baxter of California</label>
    <input type="checkbox" name="vendor[]" value="Mr Natty" id="checkbox-brand2">
    <label for="checkbox-brand2">Mr Natty</label>
    <input type="checkbox" name="vendor[]" value="Suavecito" id="checkbox-brand3" checked="">
    <label for="checkbox-brand3">Suavecito</label>
    <input type="checkbox" name="vendor[]" value="Malin+Goetz" id="checkbox-brand4">
    <label for="checkbox-brand4">Malin+Goetz</label>
    <input type="checkbox" name="vendor[]" value="Murray's" id="checkbox-brand5">
    <label for="checkbox-brand5">Murray's</label>
    <input type="checkbox" name="vendor[]" value="American Crew" id="checkbox-brand6" checked="">
    <label for="checkbox-brand6">American Crew</label>
    <button type="submit">Отправить форму</button>
</form>
<div class="form-out" style="margin: 20px 0 0 0; border: 2px dashed lightgrey;">form-out</div>

JavaScript

var formOutput = $('.form-out');

$('.demo-form').on('submit', function (event) {
    event.preventDefault();
    var data = $(this).serializeArray();

    //console.log(data);

    formOutput.text(JSON.stringify(data));
});