How to submit a from to a database using an image as a submit button

PHP
1

How do i submit this form to the database using the image button i have and after submitting this page goes to a div not to another page but to a div
So here’s my code

<form method="post">	
		<div class='content_wrapper' id='page4'>
			<ul style='height:12%;'>
				<span class='back' onclick='prevpage()'><img src='img/back_arrow.png'/> Back</span><h1>Personal Details</h1>
			</ul>
			<ul style='height:40%; overflow-y:auto;overflow-x:hidden;background:#fff'>
				<li style='height:25%;padding:0'><input type='text' name='first_name_tb' placeholder='First Name'></li>
				<li style='height:25%;padding:0'><input type='text' name='surename_tb' placeholder='Surname'></li>
				<li style='height:24%;padding:0'><input type='text' name='email_tb' placeholder='Email Address'></li>
				<li style='height:24%;padding:0'><input type='text' name='con_email_tb' placeholder='Confirm Email Address'></li>
			</ul>
			<ul style='height:25%'>
				<li style='padding-top:10px;color:#1F1F21;height:1%;'>GENDER</li>
				<li style='color:#1F1F21;height:50%;'>
				<div class='gender_wrap'>
					<div class='gender' id='female' onclick='gender_select("female")'><span id='she'>Female</span></div>
					<div class='gender' id='male' onclick='gender_select("male")'><span id='he'>Male</span></div>
				</div>
				</li>
			</ul>
			<ul class='confirm_ul'>
				<li class='confirm_li' onclick="nextpage(5)">Next<img src='img/arrow_head.png' width="10px" height="10px"; /></li>
			</ul>
		</div>

and here’s my php code


			<?php
			

error_reporting(E_ALL ^ E_DEPRECATED);
$con = mysql_connect("localhost","root","");
	if (!$con)
	  {
		die('Could not connect: ' . mysql_error());
	  }
	 mysql_select_db("whatchadoin", $con);
	
	$fname = $_POST['first_name_tb'];
  $lname = $_POST['surename_tb'];
  $email = $_POST['email_tb'];
	//$gender = $_POST['sel_gender'];
	//if(isset($_POST['notify_box'])){ $notify = $_POST['notify_box']; }
	$sql="INSERT INTO participant (fname, lname,email) VALUES
	('$fname','$lname','$email')";

	if (!mysql_query($sql,$con))
	  {
	  die('Error: ' . mysql_error());
	  }
	echo "1 record added";

	mysql_close($con);
	


?>
2

Well, PHP runs on the server, so if you want to call some PHP from your form, you’ll need to surround it with form tags and specify the php file in the form action tag, and when the php has been run you can then redraw the page and make the selected DIV the active on.

The other thing you could look at is AJAX, that would allow you to use Javascript to call the server to update the database without reloading the HTML page.

Oh, and look at using PDO or mysqli calls instead of mysql calls, as these are being deprecated from servers now. If it’s new code you’re writing, better to do it once with one of the new methods than have to change it when your hosts drops support.