8

I am kinda confused on it, when trying to send value on the same page.

 <script>
      $("select[name='sweets']").change(function () {
      var str = "";
      $("select[name='sweets'] option:selected").each(function () {
            str += $(this).text() + " ";

          });

            jQuery.ajax({
            type: "POST",
            data:  $("form#a").serialize(),

            success: function(data){
                jQuery(".res").html(data);

                $('#test').text($(data).html());


            }
            });  
            var str = $("form").serialize();
            $(".res").text(str);
    });
    </script>
 <div id="test">
 <?php
  echo $_POST['sweets'];
  ?>
  </div>
<form id="a" action="" method="post">
  <select name="sweets" >
   <option>Chocolate</option>
   <option selected="selected">Candy</option>
   <option>Taffy</option>
   <option>Caramel</option>
   <option>Fudge</option>
  <option>Cookie</option>
</select>
</form>

Well it will display if its in the top of html tag but if its inside the body it will display null.

Improve this question
3
  • Please could you post the full PHP code? Commented Sep 27, 2011 at 6:30
  • im on a testing phase that is the full php code. if you have a further question just add a comment. thanks Commented Sep 28, 2011 at 17:25
  • From the discussion on my answer, it became clear we need more info to help you. What are you trying to accomplish, exactly? Why do you need ajax if you are posting to the same page? Commented Sep 28, 2011 at 22:09

4 Answers 4

Reset to default
12

Here is the working code for you. To send ajax request to the same page you can keep url parameter empty, which you are already doing. If you are trying to make the script behave differently when $_POST has value then use isset as I have used below.

 <?php
  if(isset($_POST['sweets'])) 
  {
    echo $_POST['sweets'];
    exit;
  }
  ?>

    <script>
        $(function(){
          $("select[name='sweets']").change(function () {
          var str = "";
          $("select[name='sweets'] option:selected").each(function () {
                str += $(this).text() + " ";

              });

                jQuery.ajax({
                type: "POST",
                data:  $("form#a").serialize(),

                success: function(data){
                    jQuery(".res").html(data);

                    $('#test').html(data);


                }
                });  
                var str = $("form").serialize();
                $(".res").text(str);
        });
        });
        </script>


 <div id="test">

  </div>

<form id="a" action="" method="post">
  <select name="sweets" >
   <option>Chocolate</option>
   <option selected="selected">Candy</option>
   <option>Taffy</option>
   <option>Caramel</option>
   <option>Fudge</option>
  <option>Cookie</option>
</select>
</form>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

You should wrap your code with

$(document).ready(function(){
   // your code here
});

This way, it will only run when the browser finishes processing the structure of your HTML.

UPDATE

There was a lot of debug stuff on your code, try this (requires Firebug to see the output of the ajax request):

<script>
$(document).ready(function(){
    $("select[name='sweets']").change(function () {
        jQuery.ajax({
            type: "POST",
            data:  $("form#a").serialize(),
            success: function(data) {
                // Check the output of ajax call on firebug console
                console.log(data);
            }
        });
    });
});
</script>
Improve this answer

6 Comments

i seem that wont work, i tried adding it. but the question is how do send value from jquery ajax to php without reloading it.
You code already does that. I suggested using document.ready because you seem to be trying to add the change handler to the <select> before the browser knows what that element is.
oh yeah, but it appears that it display the whole form >_< can you make an example of it?
why it does the output did not print out? i added echo on it?
echo $_POST['sweets']; should print the value of the selected option, not the option text. If it's empty, it's printing an empty string.
|
0

How to retrieve:

<div id="test">
  <?php
    if (isset($_POST['sweets'])) 
    {
      ob_clean();
      echo $_POST['sweets'];
      exit;
    }
  ?>
</div>

I'm looking for this:

$string = $_POST['sweets'];
<h2><?= $string;</h2> 

<form id="a" action="" method="post">
  <select name="sweets" onchange="change()" id="select1">
    <option >Chocolate</option>
    <option selected="selected">Candy</option>
    <option >Taffy</option>
    <option >Caramel</option>
    <option >Fudge</option>
    <option >Cookie</option>
  </select>
</form>

Improve this answer

1 Comment

If you have a new question, please ask it by clicking the Ask Question button. Include a link to this question if it helps provide context. - From Review
-1

I believe there is another way to get an ajax response on the same page. But some changes apply.

Like this easy and short

<script>
  function change() {
    var sweets = $("#select1").val();
    $.ajax({
      type: "POST",
      data: { sweets: sweets },
      success: function(data) {
        $("#test").html(data);
      }
    });
  }
</script>
<div id="test">
  <?php
    if (isset($_POST['sweets'])) 
    {
      ob_clean();
      echo $_POST['sweets'];
      exit;
    }
  ?>
</div>
<form id="a" action="" method="post">
  <select name="sweets" onchange="change()" id="select1">
    <option >Chocolate</option>
    <option selected="selected">Candy</option>
    <option >Taffy</option>
    <option >Caramel</option>
    <option >Fudge</option>
    <option >Cookie</option>
  </select>
</form>

I checked and it's working well

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.