change <p> text with ajax and php

[michaelfurey]

I would like to change the <p> text in the following way but it doesn't work:

 

PHP code:

echo "<p id=\"change_me\">" . $_POST['data'] . "</p>";

echo "<select onchange=\"getval(this);\" id=\"status\" multiple>";
echo "<option value=\"1\">One</option>";
echo "<option value=\"2\">Two</option>";
echo "<option value=\"3\">One</option>";
echo "<option value=\"4\">Two</option>";
echo "</select>";

JS code:

 

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

I would like to echo the selected option values of the multiple select but it doesn't work. For example if I substitute 

$("#change_me").html(data);

with

$("#change_me").html('viva');

PHP echo correctly the string 'viva'... but I would like to echo the selected values 'data' and the code doesn't work.

 

Can someone help me?

[Jacques1]

The obvious question: What exactly is data?

console.log(data);

Note that you cannot put arbitrary content into p elements.

[michaelfurey]

The obvious question: What exactly is data?

console.log(data);

Note that you cannot put arbitrary content into p elements.

 

 

data is a way that I tried to put inside the <p> element the selected option values  with ajax... I would like to echo 'selectedOptionValue' inside the <p> element. So if I select the option One and Two I would like to read inside the <p> One and Two.

[Jacques1]

Then what's the whole point of reading the response from the server? You already have the selected option.

$("#change_me").text(selectedOptionValue);

[michaelfurey]

 

Then what's the whole point of reading the response from the server? You already have the selected option.

$("#change_me").text(selectedOptionValue);

 

Because I am using a particular web framework written in PHP and to apply a change I have to reload the entire page.... so I was thinking to use Ajax in order to reload only an element to apply a change, as a <p> in this case.

[Jacques1]

Again: You don't need the server to tell you which option the user has selected. The browser already knows that, because this has happened in the browser.

 

So if all you want to do is put the selected value into the paragraph, then just use selectedOptionValue as I've shown you The server response is irrelevant.

 

I'm not sure why this is so hard to understand when the code is right in front of you.

[Jacques1]

If you're struggling with the fact that you have multiple values, just use join()

$("#change_me").text(selectedOptionValue.join(" and "));    // selectedOptionValue*s* might be a better name