JSFiddle - React, Tailwind, and code Playground

by JellyBelly

HTML

<form id="contact" method="post">
    <span class="titolo_dati">DATI DEL CLIENTE:<br/></span>

    <div>
        <p class="name">
            <input type="text" name="nome" id="nome" placeholder="Digita il tuo Nome*" style="width:98%;"
                   class="inputform"/>
        </p>
    </div>
    <div style="clear: both"></div>
    <div>
        <p class="email">
            <input type="text" name="email" id="email" placeholder="Digita la tua email*" style="width:98%;"
                   class="inputform"/>
        </p></div>
    <div style="clear: both"></div>
    <div class="domanda">
<span class="titolo_dati">
QUALIT&Agrave; DEL SERVIZIO:<br/>
</span>

        <DIV>
            <table cellspacing="0" cellpadding="10">
                <tr>
                    <td width="99 px" align="center">
                        <div class="roundedTwo">
                            <input name="servizio[]" type="checkbox" value="Servizio ottimo" id="roundedTwo">
                            <label for="roundedTwo"></label>
                        </div>
                    </td>
                    <td width="99 px" align="center">
                        <div>
                            <div class="roundedTwo2">
                                <input name="servizio[]" type="checkbox" value="Servizio pessimo" id="roundedTwo2">
                                <label for="roundedTwo2"></label>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td width="99 px" align="center">Servizio Ottimo</td>
                    <td width="99 px" align="center">Servizio Pessimo</td>
                </tr>
            </table>
        </DIV>
        <div style="clear: both"></div>

        <div class="domanda">
<span class="titolo_dati">
QUALIT&Agrave; DEL PERSONALE:<br/>
</span>

            <DIV>
                <table cellspacing="0" cellpadding="10">
                    <tr>
    ...

JavaScript

$(document).ready(function () {

    $("#bottone-contact").click(function () {

        var nome = $("#nome").val();
        var messaggio = $("#messaggio").val();
        var email = $("#email").val();

        var servizioValues = [];
        var i = 0;
        $("input[name='servizio[]']:checked").each(function () {
            servizioValues[i++] = $(this).val();
        });
        console.log(servizioValues);        
        var servizio = servizioValues.join(', ');
        console.log(servizio);

        var personaleValues = [];
        var i = 0;
        $("input[name='personale[]']:checked").each(function () {
            personaleValues[i++] = $(this).val();
        });
        var personale = personaleValues.join(', ');        
        
        var informativa = $("#informativa").attr('checked');

        var data = "nome=" + nome + "&email=" + email + "&messaggio=" + messaggio + "&servizio=" + servizio + "&personale=" + personale;
        
        console.log(data);
        
    });
});