jquery - Getting HTML value in PHP using AJAX and POST method

298

I should start off by saying that I am very new to server side programming. I am trying to get a value on its change using AJAX.

My AJAX code (ajaxCode.php)

  $(document).ready(function() {
        $('select[name="selectBox"]').change(function(){
            var value = $(this).val();
            $.ajax({
                    type: 'POST',
                    url: 'calculator.php', 
                    data: {valueChange: value },
                    dataType: 'html'
            });
            alert(value );
        });
    });

My HTML code with the select box (calculator.php)

   <select name ="selectBox">   
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
        <option value="3">Value 3</option>
    </select> 

<?php
$status = $_POST['changeStatus'];
echo $status;
?>

This doesn't seem to work. The status will alert but won't be echoed. What am I doing wrong? Thanks in advance?

531

Answer

Solution:

You probably want to send value of selected box through ajax and then change the status which you get from ajax.

Server site: calculator.php

Client side:

<script>
$(document).ready(function() {
    $('select[name="selectBox"]').change(function(){
        var value = $(this).val();
        $.ajax({
                type: 'POST',
                url: 'calculator.php', 
                data: {valueChange: value },
                dataType: 'html'
        }).done(function(response){
           $('.response-holder').html(response);
        });
    });
});
</script>

<select name ="selectBox">   
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
</select> 
<div class="response-holder"></div>

482

Answer

Solution:

This works ok:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">     
      $(document).ready(function() {
           $(document).on("change", ".selectBox", function(){
                var v = $(this).val();
                $.post( "ajax.php", { changeStatus: v , time: "123" }, function( data ) {   
                    alert("From file: " +data);             
                });                 
            });
        });
    </script>   
</head>
<body>
<select name ="selectBox" class="selectBox">   
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
</select> 
</body>
</html>

and ajax.php

<?php
$status = $_POST['changeStatus'];
echo $status;
?>

281

Answer

Solution:

The code that receives the ajax call should be in its own file, and echo only what you need to retrieve, not the whole content you started with. For example, just echo the status.

Let's say this is your HTML

<select name ="selectBox">   
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
</select> 

<script>
$(document).ready(function() {
    $('select[name="selectBox"]').change(function(){
        var value = $(this).val();
        $.ajax({
                type: 'POST',
                url: 'calculator.php', 
                data: {valueChange: value },
                dataType: 'html'
        });
        alert(value );
    });
});
<script>

Then this could be your calculator.php

<?php
    $status = $_POST['changeStatus'];
    echo $status;
?>

But then, again, you're making an ajax call and not doing anything with its response. To receive that calculator.php is answering, you could do

<select name ="selectBox">   
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
</select> 
<div id="response"></div>
<script>
$(document).ready(function() {
    $('select[name="selectBox"]').change(function(){
        var value = $(this).val();
        $.ajax({
                type: 'POST',
                url: 'calculator.php', 
                data: {valueChange: value },
                dataType: 'html'
        }).then(function(response) {
           jQuery('#response').html('Ajax answered: '+response);
        });
        alert(value );
    });
});
<script>

241

Answer

Solution:

Try this in your calculator.php script.

<?php
    $status = $_POST['valueChange'];
    echo $status;
?>

Does this give you your desired result?

People are also looking for solutions to the problem: Downloading data from the page PHP

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question