Отправить информацию о форме и дополнительную переменную из 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

Проблема с вашим кодом состоит в том, что в опубликованном вами коде есть несколько элементов с именем geo.Либо используйте один элемент с именем geo, либо используйте разные имена, такие как geo1, geo2, geo3.getElementsByName (name) возвращает коллекцию элементов с одинаковым именем, поэтому, кроме того, необходима ссылка по индексу.Например, document.getElementsByName ('elementname') [0];

Answer 2

В вашем HTML вы должны сделать тег ввода «гео» одинарным, а также внести изменения в метод, вместо того, чтобы использовать 3, вы можете использовать один метод js и передать параметр, и это должно работать.

Пожалуйста, посмотрите фрагмент кода ниже

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

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";

}