Как избежать POP-UP закрытия при отправке формы?

Question

Я пытаюсь добавить участника, получая данные на всплывающей странице. При нажатии кнопки add member появляется всплывающее окно. В форме add member я пытаюсь добавить нового пользователя, который сохраняется в базе данных, а данные извлекаются и отображаются в таблице detail detail , которая присутствует в том же всплывающем окне.

Проблема, с которой я здесь сталкиваюсь, заключается в следующем: при нажатии кнопки сохранения форма отправляется, а всплывающее окно закрывается.

**

function menuopen1(menuid) {
	  if(document.getElementById(menuid)){
	    document.getElementById(menuid).style.display = "block";
	  }
	}


	function menuclose1(menuid) {
	  if(document.getElementById(menuid)){
	    document.getElementById(menuid).style.display="none";
	  }
	}

.openmenu{
	position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
	display: none;
}

.field_4{
	text-align: center;
	width: 100%;
}

.humb{
	margin: 0 auto; 
	width: 100px;
	background: cyan;
	cursor: pointer;
	border: 1px solid #000;
}
.row{
	background: lightcyan;
	border: 1px solid #000;
	text-align: left;
	padding: 20px;
	font-size: 20px;
	color:#fff;
}

#popup {
	text-align: center;
	margin: 0 auto;
	width: 800px;
	height: 400px;
	position: absolute;
	color: #000;
	background-color: lightcyan;
	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -400px;
	overflow-y: scroll;
}


.close {
	font-size: 40px;
    float: right;
    display: table;
    text-align: right;
    cursor: pointer;
    /*color: #fff;*/
    color: red;
}


.u_record {
    width: 617px;
    height: 105px!important;
    border: 1px solid #e4e4e4;
    margin: 0 auto;
    display: block;
    overflow-y: scroll;
}

.user_details {
    width: 500px;
    border: 1px solid red;
    height: 200px;
    margin: 0 auto;
    margin-top: 50px;
}


.u_header{
	width: 600px;
	border-bottom : 1px solid #e4e4e4;
	margin: 0 auto;
	display: table;
}
.u_record{
	width: 617px;
	height: 150px!important;
	border: 1px solid #e4e4e4;
	margin: 0 auto;
	display: block;
	overflow-y:scroll;

}
.u_row{
	min-width:150px; 
	display: table-cell;
}
.r_hd{
	text-align: center;
}
.r_hd,.r_filter{
	padding: 5px 0;
	width: 100%;
	color: #4285f4;
	border: 1px solid #e4e4e4;
}
.r_filter{
	text-align: right;
	height: 30px;
}
.r_filter img{
	width: 25px;
	padding-right: 10px;
}
.r_name{
	padding: 5px;
	width: 100%;
	color: #000;
}
.r_name1{
	display: table;
	padding: 5px;
	width: 100%;
	height: 30px;
	color: #000;
}
.r_name1 img{
	float: left;
	width: 20px;
	margin-left: 10px;
}


.user_details{
	width: 500px;
    border: 1px solid red;
    height: 200px;
    margin: 0 auto;
    margin-top: 50px;
}

.save_btn{
	margin-top: 30px;
}

<div class="field_4">

		<div id="menuopen0" onclick="menuopen1('open0')" class="humb">ADD MEMBER</div>

	
	</div>
	<div id="open0" class="openmenu">
		<div id="popup" class="row">MEMBER DETAILS
			<div class="close" onclick="menuclose1('open0')">X</div>

				<form action='' method='POST'  enctype='multipart/form-data'>

       <p>Data fetched to the below php code</p>
        <div class='u_record'>
        
				<div class='u_header'>
					<div class='u_row'>
					  <div class='r_hd'>First Name</div>
					</div>
					<div class='u_row'>
						<div class='r_hd'>Email</div>
					</div>
           

				</div>
        </div>
        
		<!--<?php

			$sql="SELECT * FROM user_details";
            $result=mysqli_query($conn,$sql);

			echo"<div class='u_record'>";
				echo"<div class='u_header'>";
					echo"<div class='u_row'>";
						echo"<div class='r_hd'>First Name</div>";
					echo"</div>";
					echo"<div class='u_row'>";
						echo"<div class='r_hd'>Email</div>";
					echo"</div>";

				echo"</div>";

	            if($result->num_rows>0){
		            while($row=mysqli_fetch_assoc($result)){

	            	 	$first_name_db=$row['first_name'];
		              	$email_address_db=$row['email_address'];

						echo"<div class='u_header'>";
							echo"<div class='u_row'>";
								echo"<div class='r_name'>".$first_name_db."</div>";
							echo"</div>";
							echo"<div class='u_row'>";
								echo"<div class='r_name'>".$email_address_db."</div>";
							echo"</div>";
						echo"</div>";
					}
				}


			echo"</div>";

		?>-->


			<div class="user_details">
				<p>ADD MEMBER</p>
				<div class="field">
					First Name:
		            <input type="text"  name="first_name" placeholder="first_name"   value="">
		        </div>

		       

		        <div class="field">
					Email ID:
		            <input type="text"  name="email_address" placeholder="email_address"   value="">
		        </div>

		       

		        <div class="field">
		         	<input type="submit" class="save_btn" name="submit"  value="SAVE">
		        </div>

			</div>
		</form>


		
		</div>
	</div>  

**

Но я хочу, чтобы, после добавления члена и данные должны быть извлечены на странице сведений об участнике той же всплывающей страницы Не закрывая всплывающее окно

Только При нажатии кнопки закрытия во всплывающем окне всплывающую страницу необходимо закрыть.