Button Form POST Not Working - php

Question

I have a simple button that hides once the event is triggered
<?php
//Define attributes
echo'<input type="submit" id="toggler" name="add_friend"class=button
value="Add '. $output1['username'].' As A Friend ?" onClick="action();"/>
</input>';
?>
//Hide the button
<script>
var hidden = false;
function action() {
if(!hidden) {
document.getElementById('toggler').style.visibility = 'hidden';
}
}
The above works as it should no problems , However when I add form to get method=POST for the button does not hide nor does my POST make it to $_POST['add_friend']
echo ' <form method="post" >
<input type="submit" id=toggler name="add_friend" class="button"
value="Add '. $output1['username'].' As A Friend ?" onClick="action();"/>
</input>
</form>';
How can I make correct this so that the button hides and my POST is passed on to my isset code please .
if (isset ($_POST['add_friend'])){
//rest of my code once the button is clicked and hidden
Thanks in advance .

Answer 1

Your JS is most likely hiding the element. Then your form gets submitted (the POST), only for the page to refresh and the button reappear.
It seems to me that you want to hijack form submission and process the request with ajax.
The following example code shows a similar problem with the Php form processing. You could adapt to your liking (I have left out the required Javascript):
<?php
$feedback = null;
$people = array(
1 => 'Samuel',
2 => 'Fred',
3 => 'Roger',
4 => 'Mavis'
);
$friends = array(3); // i.e. Roger
if($_SERVER['REQUEST_METHOD'] == 'POST') {
$add_friend = isset($_POST['add_friend']) ? $_POST['add_friend'] : null;
if(array_key_exists($add_friend, $people) && !in_array($add_friend, $friends)) {
array_push($friends, $add_friend); // You probably want to save state here
$feedback = 'Added ' . $people[$add_friend] . ' as friend.';
}
}
?>
<?php echo isset($feedback) ? $feedback : ''; ?>
<form method="post">
<?php foreach ($people as $key => $person) { ?>
<button name=
"add_friend" onClick=
"action();" value=
"<?php echo $key ?>"
<?php echo in_array($key, $friends) ? 'disabled' : '' ?>
>
Friend <?php echo $person ?>
</button>
<?php } ?>
</form>
Checkboxes may be a better fit than buttons here.

Answer 2

A couple things wrong with this. You have an extra double quote before 'method' in your form, and should also add action="#" to the <form> tag. This tells the browser to send the result of the form to the current page. It's also good practise to add a hidden field to send your data, rather than adding it to the submit button. Try this and see if it works.
if (isset($_POST['add_friend'])) {
var_dump($_POST['add_friend']);
}
echo '
<form method="post" action="#">
<input type="hidden" name="add_friend" value="'.$output1['username'].'">
<input type="submit" id="toggler" class="button" value="Add '. $output1['username'].' As A Friend ?" onClick="action();"/>
</form>
';
Bear in mind this will essentially reload the page, so if you want to make an asynchronous request (EG, send some request without loading the page again) you will need to look into a solution with AJAX.

Answer 3

unless you didn't supply more information or copy/paste everything, you seem to have extra quotations here:
echo ' <form "method="post" >

Answer 4

Wrapping the input in a form will natively submit the form as well as fire your javascript. If you want to use an ajax solution, tie into the submit event and prevent the default action. (using jquery here):
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
// serialize() will get the form data, which can be used in ajax call
console.log( $( this ).serialize() );
});