Envoyer les informations du formulaire et une variable supplémentaire de HTML à PHP en utilisant une entrée cachée.

Question

J'ai un formulaire en HTML et j'envoie leurs variables correctement à un fichier PHP. J'ai différents conteneurs avec plusieurs options liées à la géographie. En d'autres termes, l'utilisateur peut choisir d'afficher les données au niveau du pays, de la région ou de l'économie. Pour savoir dans le PHP quel mode de représentation filtre l'utilisateur, je veux utiliser une entrée cachée supplémentaire dont la valeur est 1, 2 ou 3 selon le mode choisi. Je n'arrive pas à modifier la valeur de cette entrée cachée.

J'utilise le code suivant :

<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>
...

Les fonctions sont définies en javascript comme :

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

Quelqu'un sait-il comment résoudre ce problème ? Merci d'avance !

Answer 1

Le problème avec votre code est qu'il y a plusieurs éléments avec le nom geo dans le code que vous avez posté. Il faut soit utiliser un seul élément avec le nom geo, soit utiliser des noms différents comme geo1, geo2, geo3. getElementsByName(name) renvoie une collection d'éléments portant le même nom, de sorte qu'en outre, la référence par index est nécessaire. Comme document.getElementsByName( 'elementname')[0] ;

Answer 2

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 3

Dans votre HTML, vous devez rendre la balise d'entrée "geo" unique et modifier la méthode. Au lieu d'utiliser 3 méthodes, vous pouvez utiliser une seule méthode js et passer un paramètre.

Veuillez consulter l'extrait de code ci-dessous

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> ...