PHP/jQuery - pass value from jQuery Stepper to php page

Question

Two weeks into learning PHP/jQuery - apologies in advance!

I'm using jQuery plugin "jquery.input-stepper.js" to get input value.

//Stepper input
<div class="input-stepper">
    <input class="order_size" type="text" min="0"  max="1000000">
</div>

//javascript
<script>
$('.input-stepper').inputStepper();
var order_size = $('.input-stepper').inputStepper();
</script>

Then on a button click I am hoping to pass the value "order_size" to "Process.php"

<button id="Button_Up" type="button">Up</button>
<script>
    var order_size = $('.input-stepper').inputStepper();

    $(function (){
        $('#Button_Up').click(function(){
            var request = $.ajax({
                type: "POST",
                url: "Process.php",
                data: ({name:order_size})
            });
            request.done(function( msg ) {

                location.reload();
                return;

            });
            request.fail(function(jqXHR, textStatus) {
                alert( "Request failed: " + textStatus );
            });
        });
    });
</script>

At this point I'm just trying to verify that the "order_size" value has been passed with the click. I try this on "Process.php" as follows:

<?php
$order_size = $_POST['name'];
echo $order_size; 
echo "<BR>"; 
?>

So here's where I am:

If i remove the line "data: ({name:order_size})" from the button click script then the button fires and "posts" to the Process.php page (I can tell this as the page with the button reloads) however when the line "data: ({name:order_size})" is included then the button does not fire (I can tell this because the page does not reload).

My focus has been on the inclusion of "order_size" inside the POST function, where I am not confident the code is correct.

Any pointers greatly appreciated. :-)

Resources: I've read the following interesting SO questions as well as the documentation for the jQuery Stepper plugin:

PHP + Jquery - pass value through ajax to php and check against variable

How to pass multiple variables to PHP with jQuery

https://github.com/FormstoneClassic/Stepper

Answer 1

I don't think this line does what you intended.

var order_size = $('.input-stepper').inputStepper();

If you are trying to pass the value of the textbox to Process.php, you should instead be using val().

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

Also, as the comments mentioned, data: ({name:order_size}) should be data: { name: order_size }