2

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

Community
  • 1
  • 1
BenH70
  • 63
  • 6
  • data: ({name:order_size}) should just be data: {name:order_size}, and then maybe you should have order_size = $('.input-stepper').inputStepper(); in the click function. I'm not sure about the last since i don't know how the plugin works, just wondering. – Jesper Jul 03 '15 at 08:47
  • Tks @Djip I've made the change to "data: {name:order_size}" as suggested. On the other idea, like this? `code` $(function (){ $('#Button_Up').click(function(){ var order_size = $('.input-stepper').inputStepper(), var request = $.ajax({ type: "POST", – BenH70 Jul 03 '15 at 09:17
  • Did you try again after the change, and did it work on not ? – Jesper Jul 03 '15 at 09:18
  • yes, tried again after making just the change " {name:order_size}". When button clicked page did not reload. – BenH70 Jul 03 '15 at 09:23
  • Don't know what browser you're using, but can you try open the inspecter and go to console, and check if you're getting any JS errors, my guess is that you should get something then. – Jesper Jul 03 '15 at 09:25
  • Tks, Firefox, am on it - will report back - tks for tips – BenH70 Jul 03 '15 at 09:26

1 Answers1

0

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 }

Zsw
  • 3,920
  • 4
  • 29
  • 43