CODEWITHSUNDEEP
javascriptphpjquery
Sparksido
Sparksido

Reputation: 625

Trouble passing a variable from javascript page to php page

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?

Upvotes: 2

Views: 53

Answers (1)

Quentin
Quentin

Reputation: 944538

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>

Upvotes: 2

Related Questions