javascript - 在 Bootstrap 4 表单中通过 AJAX 进行 PHP POST 的问题

Question

我正在为客户开发一个网站，该网站建立在名为“代理”的免费 Bootsrap 4 模板之上。他们还使用标准引导表单提供了一个简单的联系表单，该表单将数据发送到 .js 文件进行预处理，然后将消息发布(通过 AJAX 调用)到实际发送邮件的服务器 PHP 脚本。

我的问题是:除了 Dropdown 元素中的条目外，所有表单数据都已发送。

一个下拉示例:

 <label for="adults">Erwachsene</label>
 <select name="adults" class="form-control" id="adults">
    <option value="keine">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
 </select>

1. 表单没有任何操作 - 作为 js。当我按下提交时调用脚本(默认行为被阻止)
2. 表单的值不是序列化的，它们都是用$(select#inputID).val()一个一个地收集的
3. 使用 document.getElementById(#inputID).value 或任何其他调用都没有关系
4. 数据在标准调用中传输:

  $.ajax({
                url: "././mail/contact_me.php",
                type: "POST",
                dataType: "json",
                data: {
                    "name": name,
                    "email": email,
                    "street": street,
                    "number": number,
                    "place": place,
                    "postal": postal,
                    "phone": phone,
                    "adults": adults,
                    "children": children,
                    "flat": flat,
                    "startDate": startDate,
                    "endDate": endDate,
                    "dog": dog,
                    "sheets": sheets,
                    "towels": towels,
                    "message": message
                },
                cache: false,
                success: function () {
                    // Success message
                    $('#success')
                        .html("<div class='alert alert-success'>" +
                            "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'></button>" +
                            "<strong>Vielen Dank, Ihre Anfrage wurde verschickt.</strong>" +
                            "</div>");
                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
                error: function () {
                    // Fail message
                    $('#success').html("<div class='alert alert-danger'>" +
                        "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'></button>" +
                        "<strong>Sorry, deine Mail konnte nicht versandt werden</strong>" +
                        "</div>");
                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
                complete: function () {
                    setTimeout(function () {
                        $this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
                    }, 1000);
                }
            });

1. php 文件只做:$name = htmlspecialchars($_POST["name"]); 并将其放入邮件正文
2. 我收到邮件，所有“非下拉”元素都在那里
3. console.log() 和下拉值的浏览器访问就像一个魅力，所以不应该有愚蠢的语法错误或任何东西(也尝试 .toString()ajax 调用之前的每个字段)

所以我不确定错误发生在哪里以及问题是什么，也许有人遇到过类似情况并给我提示。

提前致谢!

评论中推荐的解决方案:使用 getElementById()。我刚刚创建了一个获取下拉值的函数:

function getDDValue(id) {
  let dropdown = document.getElementById(id);
  return dropdown ? dropdown.options[dropdown.selectedIndex].value : id + " nicht gefunden!";
}

// the call
let adults_value = getDDValue('adults');
```

Answer 1

要获取所选值，您应该从选项中选择它。

// get select box object
var adultsSelectBox = document.getElementById("adults");

// get selected option value
var adults = adultsSelectBox.options[adultsSelectBox.selectedIndex].value;

// get selected option text
var adultsText = adultsSelectBox.options[adultsSelectBox.selectedIndex].text;


console.log(adults);

// ...
// then ajax request etc..