Trouble passing a variable from javascript page to php page

Question

I want to send a string from one php page to another via a JavaScript page. The string is sent through upon the push of a button. The name of the button is changed each time it is displayed and the name of the button is the one that is sent through. The problem is, it is not getting displayed in next php page but the alert() function outputs the string as required. What is wrong with the code?

Here is the php code in the first page

echo "<form method = 'post' action = 'passer.php'>
          <input type = 'submit' value = 'play' name = '$ball'></input>
      </form>";

Here's the javascript code

$(':input').click(function(){

    var cat = $(this).attr("name");
    alert(cat);
    console.log(cat);

    $.post("studSport.php",{input: cat}, function(data){
    });
});

And the php code in the next page { $receiver = "";

   if(isset($_POST['input'])){
       $receiver = $_POST['input'];
       echo $receiver;
   } else{
       echo " it is empty";
   }
}

The output is always "it is empty" even though the alert() displays the right variable. What is wrong with the code, why wont $receiver be displayed?

can you make a var_dump($_POST) to see what did you receive? — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Dec 14, 2015 at 11:23

Quentin · Accepted Answer · 2015-12-14 11:36:52Z

2

Your Ajax request never runs. When you click the input you trigger it… but the input is a submit button so the Ajax request is canceled, the form submits, and a new page is loaded.

Since your form doesn't have an input named input, you'll always failed the test if(isset($_POST['input'])). (The Ajax request, which gets canceled, does input input, but you never make that request).

To stop the form submitting you need to capture the event object and prevent the default behaviour that the event would normally trigger.

$(':input').click(function(evt){
    evt.preventDefault();

Note, however, that your success handler function:

function(data){
}

… does nothing, so you won't be able to see the result without inspecting the HTTP response using your browser's developer tools.

It is possible that your goal isn't to use Ajax, but is to load a new page - just with additional data in the form.

To do that, you need to modify the controls in the form instead.

$(':input').click(function(){
    var cat = $(this).attr("name");
    alert(cat);
    $(this).append(
        $("<input type='hidden' name='input'/>").val(cat)
    });
});

But if you just want to tell which submit button was pressed then don't involve JavaScript at all. Just use a submit button with the name and value you want.

<form method='post' action='passer.php'>
  <button name="input" value="<? echo htmlspecialchars($ball); ?>'>
    play
  </button>
</form>

edited Dec 14, 2015 at 11:36

answered Dec 14, 2015 at 11:28

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

4 Comments

Rayon Over a year ago

As per OP, The output is always "it is empty"

Marcos Pérez Gude Over a year ago

That's the same that I think, but as @RayonDabre said, OP said that for the output. I think that's not the answer

Quentin Over a year ago

@RayonDabre — Yes, it is. That's what shows that this answer is correct. That is because when the form submits there is no control with the name input.

Rayon Over a year ago

@Quentin, I wonder how quickly some people execute code in their processor..You are bang on target..#respect

Collectives™ on Stack Overflow

Trouble passing a variable from javascript page to php page

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related