如何避免POP-UP在提交表单时关闭？

Question

我正在尝试通过在弹出页面中获取数据来添加成员。 点击添加成员按钮时，将弹出一个窗口。 在添加成员表格中，我试图添加一个新用户，该用户存储在数据库中，并且详细信息被提取并显示在成员详细信息表中，该表也显示在同一弹出窗口中。

我在这里面临的问题是，在单击“保存”按钮时，将提交表单，并关闭弹出窗口。

**

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>  

**

但是我想要的是，添加成员之后，必须在同一弹出页面的成员详细信息页面中提取数据不关闭弹出窗口

仅在单击弹出窗口中的关闭按钮时，需要关闭弹出页面。