Pass an input variable to PHP using AJAX, but not with POST

Question

My form is like the one above:

<form id="calculator">
<input type="text" name="height" id="height"/>
<input type="text" name="inferiorPanel" id="inferiorPanel" readonly />
<button type="button" onclick="calculatePanels();">
</form>

Jquery script is the next one:

function calculatePanels() {
     var Height = document.forms["calculator"]["height"].value;

     $.ajax({
                url: "includes/inferiorPanel.php",
                success: function(result){
            $("#inferiorPanel").val(result);
            }});
}

And PHP code from inferiorPanel.php is:

<?php
$height = ????; 

        switch ($height) {

            case ($height > 0 && $height <= 1845):
            echo 615;
            break;

            case ($height > 1845 && $height <= 1980):
            echo 495;
            break;

            case ($height > 1980 && $height <= 2100):
            echo 495;
            break;

            case ($height > 2100 && $height <= 2220):
            echo 495;
            break;

            case ($height > 2220 && $height <= 2340):
            echo 615;
            break;

            case ($height > 2340 && $height <= 2460):
            echo 615;
            break;

            case ($height > 2460 && $height <= 2475):
            echo 495;
            break;

            case ($height > 2475 && $height <= 2595):
            echo 615;
            break;

            case ($height > 2595 && $height <= 2715):
            echo 615;
            break;

            case ($height > 2715 && $height <= 2835):
            echo 615;
            break;

            case ($height > 2835 && $height <= 2955):
            echo 615;
            break;

            case ($height > 2955 && $height <= 3000):
            echo 615;
            break;
}

My question is: How to pass the variable height in PHP without using POST on Ajax, in order to show the result in input inferiorPanel?

I do not want to use <input type="submit" /> because will refresh the page

u_mulder · Accepted Answer · 2017-03-30 20:39:41Z

1

Page refreshes not because you use $_POST, but because your code is incomplete.

Here what you need to do (you have jquery, so use it):

Remove onclick from button, remove <button>, add submit:

<form id="calculator">
    <input type="text" name="height" id="height"/>
    <input type="text" name="inferiorPanel" id="inferiorPanel" readonly />
    <input type="submit" name="Name" value="Value">
</form>

Bind a handler to submit event of your form

$( "#calculator" ).submit(function() {
    var Height = $( "#height" ).val();

    $.ajax({
        url: "includes/inferiorPanel.php",
        data: { height: Height},
        type: "POST",
        success: function(result){
            $("#inferiorPanel").val(result);
        }
    });

    // simple way to prevent default action of form submission:
    return false;
} );

On server side:

<?php
$height = $_POST['height']; 
switch ($height) {
    // run your switch here
}
?>

answered Mar 30, 2017 at 20:39

u_mulder

54.8k5 gold badges54 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bogdan C Over a year ago

Thank you for your answer. It worked perfectly with submit thanks to return false. Thanks again.

Taki · Accepted Answer · 2017-03-30 20:40:43Z

0

you can use POST without refreshing the page

 $.ajax({
     url: "includes/inferiorPanel.php",
     method: "POST",
     data : {'height' : Height},
     success: function(result){
         $("#inferiorPanel").val(result);
     }
 });

and in php :

<?php
    $height = $_POST['height'];
?>

answered Mar 30, 2017 at 20:40

Taki

17.7k5 gold badges28 silver badges48 bronze badges

1 Comment

Bogdan C Over a year ago

Thanks for the answer.

Greg Ambrose · Accepted Answer · 2017-03-30 20:45:30Z

0

You can specify GET in the Ajax call and have height in the URL as follows

var height = $('#height').val();


 $.ajax({
        type        : 'GET', 
        url         : 'inferiorPanel.php?height=' + height,

Within your php you can just say if(isset($_GET['height']) $height = $_GET['height'];

answered Mar 30, 2017 at 20:45

Greg Ambrose

461 silver badge4 bronze badges

2 Comments

Bogdan C Over a year ago

Thanks. I went on POST although, with return false in order not to refresh the page. This was the purpose: not to refresh the page.

Greg Ambrose Over a year ago

Its not whether you use GET or POST that matters. To avoid refreshing the page you need Ajax, no submits. As was pointer out by u_munder, you are ,missing the logic to fire the Ajax call - ie.button click (not submit)

Collectives™ on Stack Overflow

Pass an input variable to PHP using AJAX, but not with POST

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related