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

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

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

I assume that you have an element in which you want to display it. In my example I call it #element.

Use the selectedOptionValue in your JS script to display the value inside #element by adding this line $('#element').text( selectedOptionValue );

Complete function:

<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();

    /* Added this rule */
    $('#element').text( selectedOptionValue );

    var selectedOptionText = $(selectedOption).text();


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


 });

</script>

The data you post won't be available in php's $_POST superglobal; you need to catch it in the response from ajax. This does rely on 'testing.php' echoing out the appropriate response (maybe using json_encode) to make sure. You can experiment with your reponse using console.log(response) before you start putting it into the DOM too.

The answer from LinkinTED also works beautifully, although arguably using ajax is more appropriate - inasmuch as it will only display if the ajax response comes back properly.

It does depend what testing.php does though; if the ajax function writes to a database, then definitely better to use ajax - if you literally just want to generate text down the page however, better to stick to javascript and rely on the client.

Modified your code, tested and works 100%

    <script type='text/javascript'>
            $('#territory').on('change', function() {
                var selectedOptionText = $("#territory option:selected").text();
                $.ajax({
                    url: 'testing.php',
                    type: 'POST',
                    data: {data: selectedOptionText},
                    dataType: 'text',
                    success: function (data) {
                         alert("success"+data);
                    }
                });
            });

        </script>

Your code works fine. testing.php echos the posted value. Since you are accessing it through an ajax call, response itself is getting to the ajax success function. If you want to use the data coming from your testing.php modify your success function accordingly.

$.ajax({
url: 'testing.php', 
type: 'POST', 
data: {data : selectedOptionText},
dataType: 'text',
success: function(data)
{
    $("body").append(data);
}

If you want to use the posted value out side the scope of this page and testing.php page, you need to save it some where (in a session, database, etc.).