Как напечатать опцию выбора на консоли при отправке формы?

Question

У меня есть form, в котором есть элементы input и select и кнопка отправки.Когда форма отправлена, я хочу знать, какой вариант раскрывающегося списка выбран.

Я добился этого с помощью метода изменения jQuery, но я хочу добиться этого при отправке формы, потому что мне нужно сделать два AJAXзвонки;от одного до POST значения и от одного до GET значения.Делая это с change, он выполняет вызов 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 submit:

$("#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")[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>

Answer 2

Это можно сделать, обратившись к значению выбранного параметра в форме отправки.Попробуйте это:

$("#formId").submit(function(event) {
var value = $("#myselect option:selected").val();
     ..... // your code goes here 
}

Answer 3

Вы можете получить выбранную опцию, используя приведенный ниже фрагмент кода.

$('select').change(function(){
    var selectedOption = $(this).children("option:selected").val();
})

В противном случае вы можете сделать это как $('select').val();, но убедитесь, что ваши опции имеют значения.

РЕДАКТИРОВАНИЕ:

Если у вас есть массив значений var arr = ["option1","option2","option3"] Затем вы можете добавить параметры к select

for(let i=0; i< arr.length;i++){
$('select').append('<option value="'+arr[i]+'"></option>');
}

Здесь вы назначаете данные в массиве в качестве значенийварианты также.Попробуйте это.

Answer 4

Просто добавьте эту строку кода:

console.log(document.getElementById("mySelect").value);

Или, если вы предпочитаете использовать jQuery:

console.log($("#mySelect").val());

Она запишет значение выбранного элемента (выбранный параметр) вконсоль.