如何使用 js/jquery 以表单形式发送数据

Question

我正在寻找如何在用户提交表单时发送我的所有数据（复选框、输入文本、按钮值..），以便开发人员后端 (php) 可以在他身边获取它。

我不知道在表单标签中添加 method="GET" 是否足够

PS: js不是表单的，它只是一个递增数字的代码。

var selectAllItems = "#select-all";
var selectAllItems_perGroup = ".select-per-group :checkbox";
var checkboxItem = ":checkbox";

$(selectAllItems).click(function () {
  if (this.checked) {
    $(checkboxItem).each(function () {
      this.checked = true;
    });
  } else {
    $(checkboxItem).each(function () {
      this.checked = false;
    });
  }
});

$(selectAllItems_perGroup).click(function () {
  if (this.checked) {
    $(
      ".checkbox-group__list .cbox-box:not('.select-per-group') :checkbox"
    ).each(function () {
      this.checked = true;
    });
  } else {
    $(
      ".checkbox-group__list .cbox-box:not('.select-per-group') :checkbox"
    ).each(function () {
      this.checked = false;
    });
  }
});

// increment num (Voyageurs)
$(".voyageurs-content__item-right :disabled").before(
  '<button type="button" class="dec button-inc-dec"><span>-</span></button>'
);
$(".voyageurs-content__item-right :disabled").after(
  '<button type="button" class="inc button-inc-dec"><span>+</span></button>'
);

$(".button-inc-dec").on("click", function () {
  var $button = $(this);
  var oldValue = $button.parent().find("input").val();

    if ($button.text() == "+") {
      var newVal = parseFloat(oldValue) + 1;
      $(".button-inc-dec.dec").removeClass("nb-underZero");
      $(".button-inc-dec.dec").removeAttr("disabled");
    }
    if (newVal > 0) {
    } else {
      // Don't allow decrementing below zero
      if (oldValue > 0) {
        var newVal = parseFloat(oldValue) - 1;
      }
      if (newVal == 0) {
        $button.addClass("nb-underZero");
        $button.attr("disabled", true);
        newVal = 0;
      }
    }

  $button.parent().find("input").val(newVal);
  var id = $button.attr("id");
  $.ajax({
    type: "POST",
    url: "dosomething.php?id=" + id + "&newvalue=" + newVal,
    success: function () {
      $button.parent().find("input").val(newVal);
    },
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bandeau-centred">
<form
        class="search-box" method="GET" action="/">
        
        <div class="search-box__destinations">
            <p class="search-box__label">Destinations</p>
            <div class="search-box__flex-bulle">
                <div class="search-box__where">
                    <button type="button">
                        Où allez-vous ?
                    </button>
                    <div class="destination-content radius-box">
                        <div class="destination-content__header inline-check">
                            <label class="cbox-box">
                                Toutes les destinations
                                <input type="checkbox" id="select-all">
                                <span class="checkmark"></span>
                            </label>
                        </div>
                        <div class="destination-content__body">
                            <div class="checkbox-group">
                                <div class="checkbox-group__list">
    
                                    <label class="cbox-box select-per-group">
                                        Alpes
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>
    
                                    <label class="cbox-box">
                                        Select 1
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>
    
                                    <label class="cbox-box">
                                        Select 2
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>
    
                                    <label class="cbox-box">
                                        Select 3
                                        <input type="checkbox">
                                        <span class="checkmark"></span>
                                    </label>
    
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
    
                <span class="search-box__or">ou</span>
    
                <div class="search-box__envies">
                    <button type="button">
                        Vos envies</button>
                    <div class="envies-content radius-box">
                        <div class="envies-content__header">
                            <p>Qu’est-ce qui vous fait envie ?</p>
                        </div>
                        <div class="envies-content__body">
                            <div class="envies-content__item">
                                <label class="cbox-box">
                                    Mer
                                    <input type="checkbox">
                                    <span class="checkmark"></span>
                                    <div class="envies-content__item-img">
                                        <img src="https://media.azureva-vacances.com/ressources/images/promotions/BONPLAN820X560_16.jpg" alt="">
                                    </div>
                                </label>
                            </div>
    
                            <div class="envies-content__item">
                                <label class="cbox-box">
                                    Mer
                                    <input type="checkbox">
                                    <span class="checkmark"></span>
                                    <div class="envies-content__item-img">
                                        <img src="https://media.azureva-vacances.com/ressources/images/promotions/BONPLAN820X560_16.jpg" alt="">
                                    </div>
                                </label>
                            </div>
    
                            <div class="envies-content__item">
                                <label class="cbox-box">
                                    Mer
                                    <input type="checkbox">
                                    <span class="checkmark"></span>
                                    <div class="envies-content__item-img">
                                        <img src="https://media.azureva-vacances.com/ressources/images/promotions/BONPLAN820X560_16.jpg" alt="">
                                    </div>
                                </label>
                            </div>
    
                            <div class="envies-content__item">
                                <label class="cbox-box">
                                    Mer
                                    <input type="checkbox">
                                    <span class="checkmark"></span>
                                    <div class="envies-content__item-img">
                                        <img src="https://media.azureva-vacances.com/ressources/images/promotions/BONPLAN820X560_16.jpg" alt="">
                                    </div>
                                </label>
                            </div>
    
                            <div class="envies-content__item">
                                <label class="cbox-box">
                                    Mer
                                    <input type="checkbox">
                                    <span class="checkmark"></span>
                                    <div class="envies-content__item-img">
                                        <img src="https://media.azureva-vacances.com/ressources/images/promotions/BONPLAN820X560_16.jpg" alt="">
                                    </div>
                                </label>
                            </div>
    
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
    
        <div class="search-box__dates">
            <p class="search-box__label">Dates</p>
            <div class="search-box__flex-bulle">
                <div class="search-box__arriveeDepart">
                    <button type="button">
                        <span>
                            Arrivée
                        </span>
                        <span>
                            Départ
                        </span>
                    </button>
                </div>
    
            </div>
        </div>
    
    
        <div class="search-box__voyageurs">
            <p class="search-box__label">Nombre de voyageurs</p>
            <div class="search-box__voyageurs-btn">
                <button type="button">
                    Voyageurs
                </button>
            </div>
            <div class="voyageurs-content radius-box">
                <div class="voyageurs-content__item">
                    <div class="voyageurs-content__item-left">
                        <p>Adultes</p>
                        <span>à partir de 12 ans</span>
                    </div>
                    <div class="voyageurs-content__item-right">
                    
                    <input
                        type="text" disabled name="voyageur-adultes" id="voyageur-adultes" value="0"> {# </div> #}
                    </div>
                </div>
                <div class="voyageurs-content__item">
                    <div class="voyageurs-content__item-left">
                        <p>Adultes</p>
                        <span>à partir de 12 ans</span>
                    </div>
                    <div class="voyageurs-content__item-right">
                    
                        type="text" disabled name="voyageur-enfants" id="voyageur-enfants" value="0"> 
                    </div>
                </div>
                <div class="voyageurs-content__item">
                    <div class="voyageurs-content__item-left">
                        <p>Adultes</p>
                        <span>à partir de 12 ans</span>
                    </div>
                    <div class="voyageurs-content__item-right">
                    
                    <input
                        type="text" disabled name="voyageur-bebes" id="voyageur-bebes" value="0"> 
                    </div>
                </div>
            </div>
        </div>
    
        <div class="search-box__btn">
            <button type="submit">Chercher
            </button>
        </div>
    </form>
    </div>

Answer 1

如果您在服务器端使用 php，则密钥在 action 上。您应该将 PHP 文件路径放在表单操作中。提交表单时，它将执行 PHP 文件。

您可以在 PHP 文件中通过 $_GET["<your_input_name>"] 检索表单值。如果您在这种情况下使用 get 方法。但是 post 方法更适合表单提交。所以它将是 $_POST["<your_input_name>"]

在你的表单中，你还应该给你的输入一个name。

一个简单的例子：

<form method="POST" action="form.php">
  <input type="text" name="first-name" />
  <button type="submit" name="submit" />
</form>

form.php

<?php
 
if (isset($_POST["submit"]) {
  $first_name = $_POST["first-name"]
  ...
}

?>

如何使用 js/jquery 以表单形式发送数据

How to send data in form using js/jquery

javascript

forms

jquery

一个简单的例子：