javascript - 如何在提交表单时在控制台上打印选择选项？

Question

我有一个form其中有一些input和select元素和提交按钮。提交表单后，我想知道选择了哪个下拉选项。

我已经通过使用更改 jQuery 方法实现了这一点，但我想在表单提交上实现这一点，因为我必须进行两次 AJAX 调用；一到POST值加一为 GET值(value)。通过使用change来做到这一点它在更改时进行 AJAX 调用，并在单击提交按钮后进行一次 AJAX 调用。我想通过仅提交表单来实现这一点。

此外，我无法使用 value我的 <option> 上的属性标签作为下拉列表在后端创建

<form id="formId" method="get">
  <div class="container">
    <h4>Start Date:</h4>
    <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required onchange="checkDate()" />
    <h4>End Date:</h4>
    <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required onchange="checkDate()" />
    <h4>Outlets:</h4>
    <select name="outlet" id="myselect">
      <option>--------------------------------------</option>
      <option>ALL</option>
    </select>
    <div><br>
    </div>
    <div>
      <br>
      <button id="button" class="btn btn-default" type="submit">Search</button>
    </div>
  </div>
</form>
<div class="loader"></div>
<div class="overlay"></div>
<div id="tbl"></div>

$(document).ready(function() {
  $("#myselect").on("change", function() {
    currentlyClickedOutlet = $(this).val();
    $.ajax({
      url: "DateWiseOlWiseSales",
      method: "POST",
      data: {
        Outlet: currentlyClickedOutlet,
      },
    });
  });

  $("#formId").submit(function(event) {
    event.preventDefault();
    $.ajax({
      url: "DateWiseOlWiseSales",
      method: "GET",
      dataType: "json",
      contentType: "application/json; charset=utf-8",
      data: {
        fromdate: $("#startdate").val(),
        todate: $("#enddate").val(),
        outlet: $("#all").val()
      },
      success: function(data) {
        //console.log("test",tableValue);
        $("#formId").hide();
        let formatedData = formatData(data);
        renderTable(formatedData);
        $('.loader').hide();
        $('.overlay').hide();
        $("#export").show();
      }
    });

Answer 1

您需要提供您的<option>标签 value属性并将其设置为您希望在单击提交时记录的内容。

然后您可以使用 .submit()表单上的方法来监听提交事件，并使用 e.preventDefault()防止表单采取默认操作并提交。然后您可以使用以下方法获取选定的下拉项:

$("#myselect").val();

然后您可以注销该值以在控制台中查看它。

参见下面的示例:

$("#formId").submit(function(e) {
  e.preventDefault(); // Stop the form from submitting
  const dp_value = $("#myselect").val();
  console.log(dp_value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<form id="formId" method="get">
  <div class="container">
    <h4>Start Date:</h4>
    <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>End Date:</h4>
    <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>Outlets:</h4>
    <select name="outlet" id="myselect">
      <option value="none">--------------------------------------</option>
      <option value="all">ALL</option>
    </select>
    <div><br>
    </div>
    <div>
      <br>
      <button id="button" class="btn btn-default" type="submit">Search</button>
    </div>
  </div>
</form>

但是，如果您打算 POST使用ajax的所有数据我建议您使用 .serializeArray()将所有表单输入转换为数组。然后使用这个数组，可以使用.reduce将其转换为与您通过提交 POST 方法收到的对象相同的对象:

$("#formId").submit(function(e) {
  e.preventDefault(); // Stop the form from submitting
  const data = $(this).serializeArray();
  const post_data = data.reduce((acc, {name, value}) => ({...acc, [name]: value}), {});
  console.log(post_data);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<form id="formId" method="get">
  <div class="container">
    <h4>Start Date:</h4>
    <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>End Date:</h4>
    <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>Outlets:</h4>
    <select name="outlet" id="myselect">
      <option value="none">--------------------------------------</option>
      <option value="all">ALL</option>
    </select>
    <div><br>
    </div>
    <div>
      <br>
      <button id="button" class="btn btn-default" type="submit">Search</button>
    </div>
  </div>
</form>

如果您无法使用value属性，我建议您使用.find(':selected')获取选择 option ，然后使用.textContent获取 option 中的文本:

$("#formId").submit(function(e) {
  e.preventDefault(); // Stop the form from submitting
  const dp_value = $("#myselect").find(":selected").get(0).textContent;
  console.log(dp_value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<form id="formId" method="get">
  <div class="container">
    <h4>Start Date:</h4>
    <input type="text" id="startdate" name="fromdate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>End Date:</h4>
    <input type="text" id="enddate" name="todate" width="276" placeholder="dd/mm/yyyy" required />
    <h4>Outlets:</h4>
    <select name="outlet" id="myselect">
      <option>--------------------------------------</option>
      <option>ALL</option>
    </select>
    <div><br>
    </div>
    <div>
      <br>
      <button id="button" class="btn btn-default" type="submit">Search</button>
    </div>
  </div>
</form>