Pass dropdown options to PHP variable (without page refresh)

Question

I'm trying to pass the value of the dropdown menu to the PHP variable $anno, so the print_r() function at the end can use the realtive $coefficiente variable (which depends on $anno).

<select name="anno">
<option>1940</option>
<option>1941</option>
<option>1942</option>
</select>

<?php

$importo = "100";
$anno = $_POST["anno"];

if ( $anno == "1940" ) { $coefficiente = "10"; } ;
if ( $anno == "1941" ) { $coefficiente = "20"; } ;
if ( $anno == "1942" ) { $coefficiente = "30"; } ;

print_r(($importo*$coefficiente)/1936.27); echo '€';

?>

Can this be "AJAXified"?

At this time when I choose the dropdown option, the print_r function isn't updated. Do I need a submit button?

Sure you can, you just need a handler for the onChange event on the dropdown (you ll put your ajax request there) — mTorres
– mTorres, Commented Aug 16, 2014 at 19:27
I tried with this jQuery function but can't notice any difference.. :D pastebin.com/ecuvnNaP — MultiformeIngegno
– MultiformeIngegno, Commented Aug 16, 2014 at 19:45

mTorres · Accepted Answer · 2014-08-17 10:08:41Z

1

If you want to calculate your formula in the same page, don't use PHP use Javascript

<select name="anno">
  <option>1940</option>
  <option>1941</option>
  <option>1942</option>
</select>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
 $(document).ready(function() {
    // We bind our AJAX handler to the onChange event of the select element
    $("select[name='anno']").on('change', function(e) {
      var importo = "100";
      var anno = $(this).val();
      var coef = "";
      if (anno == 1940) { coef = 10; }
      if (anno == 1941) { coef = 20; }
      if (anno == 1942) { coef = 30; }

      alert(importo*coef/1936.27 + "€");
    })
});

For PHP handling, use AJAX (warning I couldn't test this!)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
 $(document).ready(function() {
    // We bind our AJAX handler to the onChange event of the select element
    $("select[name='anno']").on('change', function(e) {
            $.ajax({
                type: "POST",
                url : "your_php_script.php",
                data: { anno: $(this).val() },
            })
              .done(function(data) {
                alert(data); 
              })
              .fail(function(jqXHR, textStatus, errorThrown) {
                alert("Something went wrong!\n" + errorThrown);
              });
    })
});

edited Aug 17, 2014 at 10:08

answered Aug 16, 2014 at 19:42

mTorres

3,5902 gold badges28 silver badges36 bronze badges

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

3 Comments

MultiformeIngegno Over a year ago

What should I put in url : if the script is on the same page?

mTorres Over a year ago

It shouldn't be on the same page, should it? If it must be on the same page, just put the name of the php script (if your page is called page.php just put page.php). But I strongly advice you to put it on another script (or page as you call it). If its is on the same your PHP code will be executed even when the user has not make any selection yet... (you can change that putting an if (isset($_POST['anno']) before your PHP code but IMHO this is ugly :-)

mTorres Over a year ago

Oh, if you want to be on the same page, then you could do everything in JS, see edited answer

Collectives™ on Stack Overflow

Pass dropdown options to PHP variable (without page refresh)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related