Send form information and an additional variable from HTML to PHP using a hidden input

Question

I have a form in HTML and I send their variables correctly to a PHP file. I have different containers with several options related to the geography. That means, the user can choose between show data at country/region/economic level. For knowing in the PHP which way of representation is filtering the user, I want to use an additional hidden input which value is 1,2 or 3 depending on the chosen way. I don't achive to change this hidden input value.

I use the following code:

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

The functions are defined in javascript as:

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

Does anyone know how to solve this problem? Thanks in advance!

When I do an echo of geo variable in PHP the variable is undefined. I want to change that variable's value depending on where the user clicks — Roberta Gimenez
– Roberta Gimenez, Commented Jun 12, 2018 at 7:59
If you add id on inputs as geo than you can select the elements. But, id should be unique. — AA Shakil
– AA Shakil, Commented Jun 12, 2018 at 8:04
So, you want that when user click on any geo this input will be changed? Not other geo? — AA Shakil
– AA Shakil, Commented Jun 12, 2018 at 8:16

SynapseIndia · Accepted Answer · 2018-06-12 07:58:59Z

3

The issue with your code is that there are multiple elements with name geo in the code that you posted. Either use a single element with name geo or use different names like geo1, geo2, geo3. getElementsByName(name) returns a collection of elements with the same name, so that furthermore, the reference by index is necessary. Like document.getElementsByName( 'elementname')[0];

answered Jun 12, 2018 at 7:58

SynapseIndia

4502 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roberta Gimenez Over a year ago

It's the same name because I want to change that element value depending on where I do click. I mean, I named the three geo but the goal is to change geo to 1,2 or 3 depending on if you click on country, region or country classificaiton. If I use the same element I cannot difference if I had to change it to 1,2 or 3 no?

SynapseIndia Over a year ago

I recommend keeping one hidden variable, lets say geo and in function call pass value based on location setGeo(1), setGeo(2) and setGeo(3).

Guillaume Georges · Accepted Answer · 2018-06-12 09:48:16Z

1

In your HTML you have to make "geo" input tag single also make change in the method instead of using 3 you can use single js method and pass parameter and this should work.

Please see the code snippet below

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

edited Jun 12, 2018 at 9:48

Guillaume Georges

4,0204 gold badges17 silver badges34 bronze badges

answered Jun 12, 2018 at 8:15

Nikhil Joshi

3863 silver badges18 bronze badges

4 Comments

Roberta Gimenez Over a year ago

I tried but if I don't define a value in: <input type="hidden" id="geodata" name="geo"> It doesn't return anything when I read it in the PHP. If I put an initial value =0 when I define the hidden input, it doesn't change, so it's like if it doesn't enter in the setGeo() function

Guillaume Georges Over a year ago

You can add the name attribute to your HTML input element. You will just use the id to manipulate your field with JavaScript and the name attribute to ensure PHP receives the value of the field.

Nikhil Joshi Over a year ago

In your html if the "geo" value is not set then the element will not be found in php as it is not set or sent using post. So passing default value may help or In your php you can check if value is set using isset() method to validate it.

Roberta Gimenez Over a year ago

I set a default value =0 and my PHP read the 0 value, so the function setGeo() is not executed

Himanshu Upadhyay · Accepted Answer · 2018-06-12 10:00:43Z

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

}

edited Jun 12, 2018 at 10:00

answered Jun 12, 2018 at 7:53

Himanshu Upadhyay

6,5571 gold badge23 silver badges34 bronze badges

4 Comments

Roberta Gimenez Over a year ago

When I do: $geo= htmlspecialchars($_POST["geo"]); echo "$geo"; in the PHP I get undefined variable, so the value doesn't change when I click

Himanshu Upadhyay Over a year ago

yes, but you should remove multiple inputs with the name geo. So with our JS code, it will set for the first element only. And rest of the others will be having empty values and so you are not getting it in PHP code.

Roberta Gimenez Over a year ago

I did it. I'm trying to replicate this part of my code in jsfiddle. The code would have to return the value of geo when I click on submit, but I get an error. Here is the code: jsfiddle.net/ac320qrw/7

Guillaume Georges Over a year ago

document.getElementByName is not a function. If it's a typo, document.getElementsByName returns an array. That code won't work.

Collectives™ on Stack Overflow

Send form information and an additional variable from HTML to PHP using a hidden input

3 Answers 3

2 Comments

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related