Jump to content

change <p> text with ajax and php


michaelfurey
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.