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:
</div>
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');
}
}
?>
You will need to use radio buttons. Simply create the images in the table, then underneath each image have a radio button to select that particular image.
Right now, by setting your input type to image, your POST request is expecting image data, not a selection.
Here's a link to radio buttons for reference.
Since you stated jQuery is an option for you... You can do this without a form. Example
<img src="images/flat.png" id="flat" class="imgSelect">
Then in jQuery
$('.imgSelect').click(function(){
var imgId = $(this).attr('id');
$.ajax({
method: "POST",
url: "databaseProcess.php",
data: { imgId: imgId }
});
You could also add an "onclick" event to each image
<img src="images/flat.png" id="flat" onclick="doFunction()" />