发布具有许多字段和JS var的表单

时间:2018-11-29 07:19:55

标签: javascript php jquery ajax

我想通过ajax将表单发布到php,然后从输入中获取值(我做到了,它可以正常工作),但我也想在一个ajax中发布一个JS变量。

有我的FORM部分。

<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>

有我的剧本

<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>

我正在使用tagsManager创建ID为hiddenTagListA的隐藏输入 我正在尝试将hiddenTagListA的所有值都放入var test,并且可以正常工作。 但是现在我想将此变量也发布到我的php中,因为我想将其放入数据库中。从炒锅中获取所有值,但我还必须发布test变量。

在我的控制台中,我从测试中获得了价值,例如:something, something2, something3...(标记以逗号分隔)它可以只是字符串

2 个答案:

答案 0 :(得分:1)

如果您在test中得到了值,只需将其放入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: ");
        },
    });
});

答案 1 :(得分:1)

如果使用.serialize,则需要首先解析字符串以使用AJAX获取发布的数据。 PHP函数parse_str读取字符串并将其转换为数组。

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

您可以使用.serializeArray函数而不是.serialize函数,以确保以数组格式提供数据,这在PHP中可以使用$ _POST变量轻松检索。

JS代码

$(".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: ");
        },
    });
});