使用隐藏输入将表单信息和附加变量从 HTML 发送到 PHP

Question

我有一个 HTML 表单，我将它们的变量正确发送到 PHP 文件。我有不同的容器，有几个与地理相关的选项。这意味着，用户可以在国家/地区/经济级别的显示数据之间进行选择。为了在 PHP 中了解哪种表示方式正在过滤用户，我想使用一个额外的隐藏输入，其值为 1,2 或 3，具体取决于所选方式。我无法更改这个隐藏的输入值。

我使用以下代码：

<div class="popcountry">
        <div class="funcion" onclick="country_function();setGeo()">
        <h2 class="geography" style="text-align:center;" id="geoselect">Country
        <input type="hidden" name="geo">
        </h2>
        </div>
        <span class="popmenu"  id="countrypopmenu">
        <br>

        <label class="container" style="text-align:center" id="selectControlcountry"> <b>Clear</b>
            <input type="checkbox" id="selectall" />
            <span class="checkmark2" style="background-color:#F0FFF0"></span>
        </label>
        <div class="scrollbox2">
        <label class="container">Afghanistan
            <input type="checkbox" id="Afghanistan" name="country[]" value="Afghanistan" checked="checked">
            <span class="checkmark"></span>
        </label>
        <label class="container">Albania
            <input type="checkbox" id="Albania" name="country[]" value="Albania" checked="checked">
            <span class="checkmark"></span>
        </label>
...

    <div class="popregion">
    <div class="funcion"  onclick="region_function();setGeo2()">
    <h2 class="geography" style="text-align:center" id="geoselect">Region
    <input  type="hidden" name="geo">
    </h2>
    </div>
    <span class="popmenu"  id="regionpopmenu">
    <br>

    <label class="container" style="text-align:center" id="selectControlregion"> <b>Clear</b>
        <input type="checkbox"  id="selectall" />
        <span class="checkmark2" style="background-color:#F0FFF0"></span>
    </label>
    <label class="container">Africa
        <input type="checkbox" id="Africa" name="region[]" value="Africa" checked="checked">
        <span class="checkmark"></span>
    </label>
    <label class="container">Americas
        <input type="checkbox" id="Americas" name="region[]" value="Americas" checked="checked">
        <span class="checkmark"></span>
    </label>
...
    <div class="popclass">
    <div class="funcion" onclick="class_function();setGeo3()">
    <h2 class="geography" style="text-align:center" id="geoselect">Country Classification
    <input  type="hidden" name="geo">
    </h2>
    </div>
    <span class="popmenu"  id="classpopmenu">
    <br>

    <label class="container">Developed
        <input type="checkbox" id="Developed" name="classification[]" value="Developed" checked="checked">
        <span class="checkmark"></span>
    </label>
    <label class="container">Economies in transition
        <input type="checkbox" id="Economies in transition" name="classification[]" value="Economies in transition" checked="checked">
        <span class="checkmark"></span>
    </label>
...

这些函数在javascript中定义为：

function setGeo(){
        var geo =getElementByName("geo");
        geo.value= "1";
    }
    function setGeo2(){
        var geo =getElementByName("geo");
        geo.value = "2";
    }
    function setGeo3(){
        var geo =getElementByName("geo");
        geo.value = "3";
    }

有谁知道如何解决这个问题？提前致谢！

Answer 1

function setGeo(){
    var geo = document.getElementsByName("geo")[0];
    geo.value= "1";
}
function setGeo2(){
    var geo = document.getElementsByName("geo")[0];
    geo.value = "2";
}
function setGeo3(){
    var geo = document.getElementsByName("geo")[0];
    geo.value = "3";

}

Answer 2

在您的 HTML 中，您必须将“geo”输入标记设为单个，并且在方法中进行更改而不是使用 3，您可以使用单个 js 方法并传递参数，这应该可以工作。

请看下面的代码sn-p

function setGeo(geoVal) {

  document.getElementById('geodata').value = geoVal;
  console.log(document.getElementById('geodata').value);
}

/* blank functions, defined in order to repair the snippet */
function country_function() { }
function class_function() { }
function region_function() { }

<input type="hidden" id="geodata" name="geo">
<div class="popcountry">
  <div class="funcion" onclick="country_function();setGeo(1)">
    <h2 class="geography" style="text-align:center;" id="geoselect">Country

    </h2>
  </div>
  <span class="popmenu" id="countrypopmenu">
        <br>

        <label class="container" style="text-align:center" id="selectControlcountry"> <b>Clear</b>
            <input type="checkbox" id="selectall" />
            <span class="checkmark2" style="background-color:#F0FFF0"></span>
  </label>
  <div class="scrollbox2">
    <label class="container">Afghanistan
            <input type="checkbox" id="Afghanistan" name="country[]" value="Afghanistan" checked="checked">
            <span class="checkmark"></span>
        </label>
    <label class="container">Albania
            <input type="checkbox" id="Albania" name="country[]" value="Albania" checked="checked">
            <span class="checkmark"></span>
        </label> ...

    <div class="popregion">
      <div class="funcion" onclick="region_function();setGeo(2)">
        <h2 class="geography" style="text-align:center" id="geoselect">Region

        </h2>
      </div>
      <span class="popmenu" id="regionpopmenu">
    <br>

    <label class="container" style="text-align:center" id="selectControlregion"> <b>Clear</b>
        <input type="checkbox"  id="selectall" />
        <span class="checkmark2" style="background-color:#F0FFF0"></span>
      </label>
      <label class="container">Africa
        <input type="checkbox" id="Africa" name="region[]" value="Africa" checked="checked">
        <span class="checkmark"></span>
    </label>
      <label class="container">Americas
        <input type="checkbox" id="Americas" name="region[]" value="Americas" checked="checked">
        <span class="checkmark"></span>
    </label> ...
      <div class="popclass">
        <div class="funcion" onclick="class_function();setGeo(3)">
          <h2 class="geography" style="text-align:center" id="geoselect">Country Classification
          </h2>
        </div>
        <span class="popmenu" id="classpopmenu">
    <br>

    <label class="container">Developed
        <input type="checkbox" id="Developed" name="classification[]" value="Developed" checked="checked">
        <span class="checkmark"></span>
        </label>
        <label class="container">Economies in transition
        <input type="checkbox" id="Economies in transition" name="classification[]" value="Economies in transition" checked="checked">
        <span class="checkmark"></span>
    </label> ...

Answer 3

您的代码的问题是您发布的代码中有多个名称为 geo 的元素。要么使用名称为 geo 的单个元素，要么使用不同的名称，例如 geo1、geo2、geo3。 getElementsByName(name) 返回具有相同名称的元素的集合，因此需要通过索引进行引用。像 document.getElementsByName('elementname')[0];