post a form with many fields and JS var

Question

I want to post my form by ajax to php then get values from inputs ( I did it and it works fine ) but I also want to post a JS variable i one ajax.

There is my FORM section.

<form action="new_alias.php" method="post" id="theForm">
                <div class="form-group">
                    <label for="exampleInputEmail1">Wpisz nazwę aliasu</label>
                    <input type="text" name="alias" id="alias" class="form-control" id="exampleInputEmail1"
                        aria-describedby="emailHelp" placeholder="Nazwa aliasu">
                </div>
                <div class="form-group">
                    <label class="col-form-label">Wybierz domenę</label>
                    <?php
                                    if ($resultt->num_rows > 0) {
                                    echo '<select name="name" class="custom-select">';
                                        // output data of each row
                                        while ($row = $resultt->fetch_assoc()) {
                                        echo "<option value='$row[name],$row[id]'>$row[name]</option>";
                                        }

                                        echo '</select>';
                                    } else {
                                    echo "0 results";
                                    }
                                    ?>
                </div>

                <div class="form-group">
                    <label for="exampleInputEmail1">Wpisz adresy docelowe</label>
                    <input type="text" name="source" id="source" placeholder="Adresy mailowe" autocomplete="nope"
                        autocomplete="off" class="typeahead tm-input form-control tm-input-info" />
                </div>

                <button type="submit" name="add" id="add" class="btn btn-primary mt-4 pr-4 pl-4">Utwórz</button>
            </form>

and there is my script

<script>
        $(document).ready(function () {
            var tagApi = $(".tm-input").tagsManager({
                hiddenTagListName: 'hiddenTagListA'
            });
            var x = '';
            var test = '';


            jQuery(".typeahead").typeahead({
                name: 'source',
                displayKey: 'source',
                source: function (query, process) {
                    return $.get('ajaxpro.php', {
                        query: query
                    }, function (data) {
                        data = $.parseJSON(data);
                        console.log(data);
                        return process(data);
                    });
                },
                afterSelect: function (item) {
                    tagApi.tagsManager("pushTag", item);
                    x = document.getElementsByName("hiddenTagListA");
                    test = x[0].value;
                    console.log('to jest z afterSlect: ', test);
                }

            });
            $(".btn").click(function (e) {
                e.preventDefault();
                $.ajax({
                    type: "post",
                    url: 'new_alias.php',
                    data: {
                        $("#theForm").serialize()
                    },
                    success: function () {
                        alert("Form Submitted: ");
                    },
                });
            });
        }); 
    </script>

I am using tagsManager which created hidden input with ID hiddenTagListA I am trying to put all values from hiddenTagListA to var testand it works. But now I want to post this variable also to my php because I want to put it into my DB. Taking all values from form woks but I must also post test variable.

In my console I am getting value from test like: something, something2, something3... ( tags separated by comma) It can be just string

Answer 1

if you got the value in test, just put it in ajax

$(".btn").click(function (e) {
    e.preventDefault();
    $.ajax({
        type: "post",
        url: 'new_alias.php',
        data: {
            form: $("#theForm").serialize(),
            hiddenTagListA: test
        },
        success: function () {
            alert("Form Submitted: ");
        },
    });
});

Answer 2

If you use .serialize then you need to parse the string first to get posted data using AJAX. PHP function parse_str reads string & convert that into array.

Refer: http://php.net/manual/en/function.parse-str.php

You can use .serializeArray function instead of .serialize which make sure to give data in array format, which is easily retrievable in PHP using $_POST variable.

JS CODE

$(".btn").click(function (e) {
    e.preventDefault();
    var inputData = $("#theForm").serializeArray(); // .serializeArray gives data in array format instead of string format.
    // you can insert new variables like below
    inputData.push({"name":"hiddenTagListA", "value": document.getElementsByName("hiddenTagListA")[0].value});
    $.ajax({
        type: "post",
        url: 'new_alias.php',
        data: inputData,
        success: function () {
            alert("Form Submitted: ");
        },
    });
});