PHP: using $_GET to retrieve value from javascript

Question

I'm making travel package website and I want to retrieve data using either GET, POST , REQUEST in php. but I get an error message saying "Array ( ) no Notice: Undefined index:"

Javascript function:

calculate total by simply multiplying the values from "package" and "# of person"

below is my code

<script type="text/javascript">

function totalPrice(){

document.getElementById("total").value= "CAD "+ 
(document.getElementById("package").value * document.getElementById("person").value);}   
</script>

<!-- package selection -->

<form action="test.php" method="get">


<select id="package" onchange="totalPrice();" >
      <option value="2300">Wild West (Banff, Jasper)</option>
      <option value="3300">East Coast(St.Johns)</option>
      <option value="1300">Winery Tour(Kelowna, Penticton)</option>
      <option value="2600">Northern Light(Yellowknife)</option>
 </select>

 <select id="person" onchange="totalPrice();">
          <option value="1">1 person</option>
          <option value="2">2 persons</option>
          <option value="3">3 persons</option>
          <option value="4">4 persons</option>
          <option value="5">5 persons</option>
          <option value="6">6 persons</option>
          <option value="7">7 persons</option>
          <option value="8">8 persons</option>

  </select>
  <input type="submit">

  </form>
  <!-- total Amount -->
  <label class="form" >Total Amount</label>
  <input size =40 type="text" name="total" id="total" disabled>

"test.php"

<h1>payment total</h1>

<?php

print_r($_GET);
if(!isset($_GET['total'])){
  echo "no";
}
echo $_GET['total'];
 ?>

There's no input with the name `total` in your form. (There's one outside your form.) — David, Mar 17 '19 at 03:07
You have to submit the data to PHP, either by submitting your form or doing an AJAX request with Javascript. — Cfreak, Mar 17 '19 at 03:09
Whilst I can understand why members want to close this question, I do not understand how it can be considered 'off topic' ? — ProEvilz, Mar 17 '19 at 03:15

James Anderbard · Answer 1 · 2019-03-17T03:18:49.507

In order for the field "total" to be included in what is sent to the test.php server you need to move the "total" input field inside of the form tag. Anything outside of the form tag will not be included.

Edit adding example:

<script type="text/javascript">

function totalPrice(){

document.getElementById("total").value= "CAD "+ 
(document.getElementById("package").value * document.getElementById("person").value);}   
</script>

<!-- package selection -->

<form action="test.php" method="get">


<select id="package" onchange="totalPrice();" >
      <option value="2300">Wild West (Banff, Jasper)</option>
      <option value="3300">East Coast(St.Johns)</option>
      <option value="1300">Winery Tour(Kelowna, Penticton)</option>
      <option value="2600">Northern Light(Yellowknife)</option>
 </select>

 <select id="person" onchange="totalPrice();">
          <option value="1">1 person</option>
          <option value="2">2 persons</option>
          <option value="3">3 persons</option>
          <option value="4">4 persons</option>
          <option value="5">5 persons</option>
          <option value="6">6 persons</option>
          <option value="7">7 persons</option>
          <option value="8">8 persons</option>

  </select>
  <input type="submit">

  <!-- total Amount -->
  <label class="form" >Total Amount</label>
  <input size =40 type="text" name="total" id="total" disabled>

  </form>

@Quasimodo'sclone Ah I missed including the example. Added :) — James Anderbard, Mar 17 '19 at 03:19
pro-tip to be even more precise: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-form — Pinke Helga, Mar 17 '19 at 03:26
thank you for your suggestion. even though I could not find your solution, and I tried putting tag after "total amount", still it didn't get $_GET value.. — M.K. Kim, Mar 17 '19 at 04:59

ProEvilz · Accepted Answer · 2019-03-17T05:09:11.157

You need to make sure that any data you want to be transmitted on submission is within the <form> </form> tags. If you leave it out, the data won't be passed over...

For example, lets imagine you had two form tags (A and B), both with a submit button. If you left out <input size =40 type="text" name="total" id="total" disabled> from both forms, when you pressed submit on either of them, which form would the total be sent within?

Definition of a <form> tag:

The HTML element represents a document section that contains interactive controls for submitting information to a web server. (contains being the key word here)

I have moved the input into the correct place below:

function totalPrice(){

document.getElementById("total").value= "CAD "+ 
(document.getElementById("package").value * document.getElementById("person").value);}   
</script>

<!-- package selection -->

<form action="test.php" method="get">


<select id="package" onchange="totalPrice();" >
      <option value="2300">Wild West (Banff, Jasper)</option>
      <option value="3300">East Coast(St.Johns)</option>
      <option value="1300">Winery Tour(Kelowna, Penticton)</option>
      <option value="2600">Northern Light(Yellowknife)</option>
 </select>

 <select id="person" onchange="totalPrice();">
          <option value="1">1 person</option>
          <option value="2">2 persons</option>
          <option value="3">3 persons</option>
          <option value="4">4 persons</option>
          <option value="5">5 persons</option>
          <option value="6">6 persons</option>
          <option value="7">7 persons</option>
          <option value="8">8 persons</option>

  </select>

  <!-- total Amount -->
  <label class="form" >Total Amount</label>
  <input size =40 type="text" name="total" id="total" disabled>

  <input type="submit">

  </form> <-- END OF FORM -->

Also, here is a better way to handle things on the PHP side because whilst you may be checking if the total is set, if it is not, it will still error out in the way you have it.

<?php

print_r($_GET);

if(isset($_GET['total'])){
  echo $_GET['total'];
} else {
  echo 'No total';
}
?>

EDIT

You also need to make the input not disabled as disabled inputs wont be submitted. If you want to make the user unable to edit the input the change:

<input size =40 type="text" name="total" id="total" disabled>

to

<input size =40 type="hidden" name="total" id="total">

This will hide it from the page too. If you still want it visible, you can set it like this:

<input size =40 type="text" name="total" id="total" readonly="readonly">

thank you for your advice. however, even though I put the after "total amount" as you suggested, still got the error saying "No total".. — M.K. Kim, Mar 17 '19 at 04:56
also, your input has `disabled` - remove that. If you don't want it visible, set the `type` attribute to `hidden` — ProEvilz, Mar 17 '19 at 04:59
thank you so much, it worked. how can I prevent user from editing their total amount on the webpage if I have to remove "disabled ? — M.K. Kim, Mar 17 '19 at 05:05
Thank you so much Ashley for your time and help~! i'd really appreciate it. — M.K. Kim, Mar 17 '19 at 05:18

PHP: using $_GET to retrieve value from javascript

2 Answers2