我有一个输入为图像的表单，我无法弄清楚如何将输入标签的name属性发送到mysql数据库？

Question

So I want the user to select one of the images from a form displayed but I do not want to upload an image, just send the name of that image to my database.

I saw a couple of solutions about uploading images to the database, but I can not figure out how to just send the name of the image selected by the user

The end result would be basically the information sent to mysql database.

<p class="questions">What type of roof do you have?</p>
<div id="roof-type">
  <table>
    <tr>
      <form method="post" action="action.php">
        <input type="image" src="images/asphalt.png" name="asphalt" id="asphalt" />
        <input type="image" src="images/metal.png" name="metal" id="metal" />
        <input type="image" src="images/flat.png" name="flat" id="flat" />
        <input type="image" src="images/clay.png" name="clay" id="clay" />
        <input type="image" src="images/cement.png" name="cement" id="cement" />
        <input type="image" src="images/other.png" name="other-roof" id="other-roof" />
        <input type='hidden' name='roof_type' /> 

      </form>
    </tr>


    </table>
</div>
  



<script>
  let input = document.querySelector('input[type="hidden"][name="roof_type"]');
let col = document.querySelectorAll('input[type="image"]');
Array.prototype.slice.call(col).forEach(img => {
    img.addEventListener('click', function(e) {
      e.preventDefault();
      input.value = this.name;
      input.parentNode.submit();
    })
  })

  </script>

<?php
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}


$roof_type = $_POST['roof_type'];

$sql = "INSERT INTO testing_database ". "(roof_type) ". "VALUES($roof_type)";

mysql_select_db('test');
        $retval = mysql_query( $sql, $conn );

        if(! $retval ) {
           die('Could not enter data: ' . mysql_error());
        }

        echo "Entered data successfully
";

?>

I was trying to check if I see any output if I echo roof_type, but I don't see anything at the moment, and these are the following errors I am getting:

• Notice: Undefined variable: link in C:\xampp\htdocs\test\action.php Notice: Undefined index: roof_type in C:\xampp\htdocs\test\action.php Warning: mysqli_real_escape_string() expects parameter 1 to be mysqli, null given in C:\xampp\htdocs\test\action.php

</div>

Answer 1

As per comment above, the HTML in the question was not valid so I made appropriate changes below to correct that. The code below uses a hidden field which is populated when an image is clicked by means of some simple javascript. Once the hidden input has been assigned the name attribute from the image the form is submitted - thus in your PHP you should now be able to access $_POST['roof_type']

<table>
    <tr>
        <td>
            <p class="questions">What type of roof do you have?</p>
            <div id="roof-type">
                <form method="post" action="action.php">
                    <input type="image" src="images/asphalt.png" name="asphalt" id="asphalt" />
                    <input type="image" src="images/metal.png" name="metal" id="metal" />
                    <input type="image" src="images/flat.png" name="flat" id="flat" />
                    <input type="image" src="images/clay.png" name="clay" id="clay" />
                    <input type="image" src="images/cement.png" name="cement" id="cement" />
                    <input type="image" src="images/other.png" name="other-roof" id="other-roof" />
                    <input type='hidden' name='roof_type' />
                </form>

                <script>
                    let input=document.querySelector( 'input[type="hidden"][name="roof_type"]' );
                    let col=document.querySelectorAll( 'input[type="image"]' );
                    Array.prototype.slice.call( col ).forEach( img =>{
                        img.addEventListener('click', function(e){
                            e.preventDefault();
                            input.value=this.name;
                            input.parentNode.submit();
                        })
                    })

                </script>

            </div>
        </td>
    </tr>
</table>

The error relating to undefined variable "link" is caused by the misuse of a variable $link in the call to mysqli_real_escape_string - it should instead use $conn like this:

$roof_type = isset( $_POST['roof_type'] ) ? mysqli_real_escape_string( $conn, $_POST['roof_type'] ) : false;
if( $roof_type ) echo $roof_type;
else echo "error....";

The PHP code to handle the request had some issues - most notably the mixing of apis and the SQL injection vulnerability. Perhaps the following might help in that respect.

<?php

    $conn = new mysqli($servername, $username, $password, $dbname);
    if ($conn->connect_error) die("Connection failed");

    if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['roof_type'] ) ){
        $roof_type = $_POST['roof_type'];
        $sql='insert into `testing_database` set `roof_type`=?';
        $stmt=$conn->prepare($sql);

        if( $stmt ){
            $stmt->bind_param( 's', $roof_type );
            $res=$stmt->execute();
            $message = $res ? 'Entered data successfully' : 'Could not enter data';

            die( $message );            
        } else {
            exit('bad foo');
        }
    }
?>