使用Ajax，Jquery和PHP Echo打印选择选项

Question

I have looked throughout Stackoverflow and seen numerous examples of this but none give the answer how to echo. I am have a select dropdown that is on a page called testing.php:

<form id="projects" action="project-add.php" method="POST">
<select name="territory" id="territory">
<option value="Australia">Australia</option>
<option value="Argentina">Argentina</option>
</select>

// A fair few more form fields here

<input type="submit" value="Submit Project">
</form>

I now need whatever is selected here to be available to echo as a php variable later down the form without the need to press a button.

I have the following script in the :

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('#territory').change(function(e) {
    e.preventDefault();
    var selectedOption = $(this).find('option:selected');
    $('#territory option').removeAttr('selected');
    $(selectedOption).attr('selected','selected');
    var selectedOptionValue = $(selectedOption).val();
    var selectedOptionText = $(selectedOption).text();


    $.ajax({
    url: 'testing.php', 
    type: 'POST', 
    data: {data : selectedOptionText},
    dataType: 'text',
    success: function(data){ }
 });
 });//]]>


 });

</script>

I would then like to print:

<? echo $_POST['data']; ?>

But this isn't working. Your help would be appreciated.

Thanks in advance

Answer 1

DEMO

1. You need to be able to trigger the change

<select name="territory" id="territory">
  <option value="">Please select</option>
  <option value="Australia">Australia</option>
  <option value="Argentina">Argentina</option>
</select>

2. then call the php with the selected option

$(function() { // on page load
  $('#territory').on("change",function(e) {
    $("#someOutputContainerID").empty(); // clear the container
    var selectedOptionValue = $(this).val();
    if (selectedOptionValue) { // in case they select "Please select"
      $.ajax({
        url: 'testing.php', 
        type: 'POST', 
        data: {data : selectedOptionValue },
        dataType: 'text',
        success: function(data){
          $("#someOutputContainerID").html(data);
        }
      });
    }
  });
});

The selected value is now available in the testing.php as $_POST["data"] and anything echoed in testing.php will show in the container