PHP Get value from a button without submitting-CodePudding

I have a long form. On one part the user has to choose between different options before introducing some information and then create the account.

I tried doing something like

<form>
  <input type="button" value="0" name="button">
  <input type="button" value="1" name="button">
  <input type="button" value="2" name="button">
</form>

<button>Create account</button>

<?php 

if(!empty['button']){
  $btn_val = $_POST['button'];

  $sql = "INSERT INTO table btn_value VALUES :value";

  $stmt = $conn->prepare($sql)

  $stmt->bindParam(':value', $btn_val);

  $stmt->execute();
}

?>

but when I try submitting it PHP doesn't retrieve those values. I've tried this solution with Javascript but it doesn't work. Some other answers which work is to use a radio but that will affect the frontend since I need to display a button.

CodePudding user response：

The only way to submit information to a database without actually submitting the file is with asynchronous javascript.

to grab the information with the click of a button, you need to create an onclick event on the button which will trigger a function to grab the information you want to send. After that, you will open a connection to php to send the information to the database.

Since PHP only works when the page is being loaded, you need to send the information to a different PHP script to actually send the data to the database.

Look into XMLHttpRequest

Eventually, you will get something like:

xml = new XMLHttpRequest();

create AJAX object

xml.open("POST",'yourphpscript.php',true)

set up connection to php script with the post method, and boolean value for asynchronous

xml.send();

send request.

for more info: https://www.w3schools.com/js/js_ajax_intro.asp

CodePudding user response：

You can use Jquery to get the value of the clicked button and submit that in a hidden input field to server.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <form method="POST">
        <input type="button" id="mybutton1" name="mybutton1" value="0">
        <input type="button" id="mybutton2" name="mybutton2" value="1"> 
        <input type="button" id="mybutton3" name="mybutton3" value="2">
        <input type="hidden" id="selectedButtonValue" value="" name="selectedButtonValue">
        <button>Create account</button>
    </form>
    <script>
         $("input").click(function()
         {
             var clickedButton=$(this).val();
             document.getElementById("selectedButtonValue").value=clickedButton;
         });
    </script>
             <?php
         if(isset($_POST["selectedButtonValue"]))
         {
             echo $_POST["selectedButtonValue"];
         }
         ?>
</body>
</html>