Как я могу сделать динамически созданный показ div при нажатии соответствующей динамически созданной кнопки? - PullRequest
Новая
       0

Как я могу сделать динамически созданный показ div при нажатии соответствующей динамически созданной кнопки?

0 голосов
/ 26 мая 2020

Я пытаюсь создать способ получить информацию из базы данных и заполнить кнопку, а также форму с информацией из моей базы данных. В таблице базы данных должна быть одна кнопка на каждую строку идентификатора, и когда эта кнопка нажата, она заполняет форму оставшимися полями из таблицы ИЛИ имеет уже заполненную форму для каждой кнопки. Мне удалось получить кнопки и форму со всей нужной информацией, но я не могу заставить кнопки вызвать нужную форму. Оба они называют одну и ту же форму. С изменениями кода я могу заставить формы переключаться, но он по-прежнему вызывается обеими кнопками. 

		<style>
			
			#editbox {
				min-width: 550px;
				min-height: auto;
				max-width: 550px;
				max-height: 440px;
				background: #EFDECD;
				border: 1px solid #A57940;
				left: 0;
				display: none;
				overflow: auto;
				position: fixed;
				z-index: 1;
				margin: 0 20%;
				padding-bottom: 20px;
			}
			
			.currentinfo {
				width: 100%;
				height: 40px;
				font-size: 16px;
				font-weight: bolder;
				background: #D2B48C;
			}
			
			.fullname {
				font-size: 16px;
				font-weight: bold;
				background: #D2B48C;
				border: none;
				display: inline;
				float: left;
				margin: 10px 0 0 15px;
			}
			
			.lifedates {
				font-size: 16px;
				font-weight: normal;
				background: #D2B48C;
				border: none;
				display: inline;
				float: left;
				margin: 10px 0 0 15px;
			}
			
			.close {
				font-size: 18px;
				font-weight: bold;
				background: #D2B48C;
				border: none;
				display: inline;
				float: right;
				margin: 5px 15px 0;
			}
			
			.close:hover {
				font-size: 20px;
				font-weight: bold;
				background: #D2B48C;
				border: none;
				display: inline;
				float: right;
				margin: 5px 15px 0;
			}
			
			.currentinfo form {
				width: 100%;
				height: 350px;
				font-size: 18px;
				font-weight: bolder;
				margin: 10px auto 0;
			}
			
			fieldset {
				border: none;
			}
			
			label {
				font-weight: bold;
				display: inline;
				float: left;
				margin: 5px;
			}
			
			#fname {
				width: 140px;
				font-size: 14px;
				border: 1px solid #A57940;
				margin: 5px auto 0;
				padding: 5px;
			}
			
			#mname {
				width: 140px;
				font-size: 14px;
				border: 1px solid #A57940;
				margin: 5px auto 0;
				padding: 5px;
			}
			
			#lname {
				width: 140px;
				font-size: 14px;
				border: 1px solid #A57940;
				margin: 5px auto 0;
				padding: 5px;
			}
			
			#suffix {
				width: 60px;
				text-align: center;
				font-size: 14px;
				border: 1px solid #A57940;
				float: left;
				margin: 5px auto 0;
				padding: 5px;
			}
			
			#gendergrp {
				width: auto;
				font-weight: bold;
				display: block;
				float: left;
				margin: 0 0 0 100px;
				padding-bottom: 0;
			}
			
			#gendergrp label {
				font-weight: normal;
				float: none;
			}
			
			#statusgrp {
				width: auto;
				font-weight: bold;
				display: block;
				float: right;
				margin: 0 100px 0 0;
			}
			
			#statusgrp label {
				font-weight: normal;
				float: none;
			}
			
			.container {
				font-size: 16px;
				display: block;
				position: relative;
				cursor: pointer;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				padding-left: 25px;
				margin-bottom: 10px;
			}
			
			.container input {
				position: absolute;
				opacity: 0;
				cursor: pointer;
			}
			
			.checkmark {
				height: 18px;
				width: 18px;
				background-color: #D2B48C;
				border: 1px solid #A57940;
				border-radius: 50%;
				top: -2px;
				left: 0;
				position: absolute;
			}
			
			.container:hover input ~ .checkmark {
				background-color: #D2B48C;
			}
			
			.container input:checked ~ .checkmark {
				background-color: #A57940;
			}
			
			.checkmark:after {
				display: none;
				content: "";
				position: absolute;
			}
			
			.container input:checked ~ .checkmark:after {
				display: block;
			}
			
			#uncontainer {
				visibility: hidden;
			}
			
			#birthgrp {
				padding: 0 13.5px;
			}
			
			#deathgrp {
				display: block;
				padding: 0 13.5px;
			}
			
			#bdate {
				width: 150px;
				font-size: 14px;
				border: 1px solid #A57940;
				margin: 5px auto 0;
				padding: 5px;
			}
			
			#bloc {
				width: 345px;
				font-size: 14px;
				border: 1px solid #A57940;
				margin: 5px auto 0;
				padding: 5px;
			}
			
			#ddate {
				width: 150px;
				font-size: 14px;
				border: 1px solid #A57940;
				margin: 5px auto 0;
				padding: 5px;
			}
			
			#dloc {
				width: 345px;
				font-size: 14px;
				border: 1px solid #A57940;
				margin: 5px auto 0;
				padding: 5px;
			}
			
			#personsubmit {
				width: 75px;
				font-size: 16px;
				font-weight: bold;
				background: #D2B48C;
				border: 1px solid #A57940;
				display: inline;
				margin: 10px 10px 0 175px;
				padding: 5px;
			}
			
			#personcancel {
				width: 100px;
				font-size: 16px;
				font-weight: bold;
				background: #D2B48C;
				border: 1px solid #A57940;
				display: inline;
				margin: 10px 175px 0 10px;
				padding: 5px;
			}
			
			.editbtn {
				min-width: 100px;
				min-height: 200px;
				max-width: 150px;
				max-height: 250px;
				font-weight: bold;
				border: 0.5px solid #000000;
				margin: 10px;
				padding: 2.5px;
			}
			
			#imgbg {
				min-width: 100%;
				min-height: 135px;
				min-width: 100%;
				max-height: 135px;
				background: lightgrey;
				border-bottom: 0.5px solid #000000;
				margin: 0 auto;
				padding: 0;
			}
			
			.editbtn div {
				min-width: 100%;
				min-height: auto;
				max-width: 100%;
				max-height: auto;
				font-size: 14px;
				margin: 0 auto;
				padding: 5px 10px;
			}
			
		</style>
<!DOCTYPE html>
<html lang="en-US">

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width-device-width, initial-scale=1.0" />
		<meta http-equiv="refresh" content="400" />
		<link rel="stylesheet" type="text/css" href="style.css">
	    <title>Pote Family Genealogy</title>
		<style>
			
			#editbox {
				min-width: 550px;
				min-height: auto;
				max-width: 550px;
				max-height: 440px;
				background: #EFDECD;
				border: 1px solid #A57940;
				left: 0;
				display: none;
				overflow: auto;
				position: fixed;
				z-index: 1;
				margin: 0 20%;
				padding-bottom: 20px;
			}
			
			.currentinfo {
				width: 100%;
				height: 40px;
				font-size: 16px;
				font-weight: bolder;
				background: #D2B48C;
			}
			
			.fullname {
				font-size: 16px;
				font-weight: bold;
				background: #D2B48C;
				border: none;
				display: inline;
				float: left;
				margin: 10px 0 0 15px;
			}
			
			.lifedates {
				font-size: 16px;
				font-weight: normal;
				background: #D2B48C;
				border: none;
				display: inline;
				float: left;
				margin: 10px 0 0 15px;
			}
			
			.close {
				font-size: 18px;
				font-weight: bold;
				background: #D2B48C;
				border: none;
				display: inline;
				float: right;
				margin: 5px 15px 0;
			}
			
			.close:hover {
				font-size: 20px;
				font-weight: bold;
				background: #D2B48C;
				border: none;
				display: inline;
				float: right;
				margin: 5px 15px 0;
			}
			
			.currentinfo form {
				width: 100%;
				height: 350px;
				font-size: 18px;
				font-weight: bolder;
				margin: 10px auto 0;
			}
			
			fieldset {
				border: none;
			}
			
			label {
				font-weight: bold;
				display: inline;
				float: left;
				margin: 5px;
			}
			
			#fname {
				width: 140px;
				font-size: 14px;
				border: 1px solid #A57940;
				margin: 5px auto 0;
				padding: 5px;
			}
			
			#mname {
				width: 140px;
				font-size: 14px;
				border: 1px solid #A57940;
				margin: 5px auto 0;
				padding: 5px;
			}
			
			#lname {
				width: 140px;
				font-size: 14px;
				border: 1px solid #A57940;
				margin: 5px auto 0;
				padding: 5px;
			}
			
			#suffix {
				width: 60px;
				text-align: center;
				font-size: 14px;
				border: 1px solid #A57940;
				float: left;
				margin: 5px auto 0;
				padding: 5px;
			}
			
			#gendergrp {
				width: auto;
				font-weight: bold;
				display: block;
				float: left;
				margin: 0 0 0 100px;
				padding-bottom: 0;
			}
			
			#gendergrp label {
				font-weight: normal;
				float: none;
			}
			
			#statusgrp {
				width: auto;
				font-weight: bold;
				display: block;
				float: right;
				margin: 0 100px 0 0;
			}
			
			#statusgrp label {
				font-weight: normal;
				float: none;
			}
			
			.container {
				font-size: 16px;
				display: block;
				position: relative;
				cursor: pointer;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				padding-left: 25px;
				margin-bottom: 10px;
			}
			
			.container input {
				position: absolute;
				opacity: 0;
				cursor: pointer;
			}
			
			.checkmark {
				height: 18px;
				width: 18px;
				background-color: #D2B48C;
				border: 1px solid #A57940;
				border-radius: 50%;
				top: -2px;
				left: 0;
				position: absolute;
			}
			
			.container:hover input ~ .checkmark {
				background-color: #D2B48C;
			}
			
			.container input:checked ~ .checkmark {
				background-color: #A57940;
			}
			
			.checkmark:after {
				display: none;
				content: "";
				position: absolute;
			}
			
			.container input:checked ~ .checkmark:after {
				display: block;
			}
			
			#uncontainer {
				visibility: hidden;
			}
			
			#birthgrp {
				padding: 0 13.5px;
			}
			
			#deathgrp {
				display: block;
				padding: 0 13.5px;
			}
			
			#bdate {
				width: 150px;
				font-size: 14px;
				border: 1px solid #A57940;
				margin: 5px auto 0;
				padding: 5px;
			}
			
			#bloc {
				width: 345px;
				font-size: 14px;
				border: 1px solid #A57940;
				margin: 5px auto 0;
				padding: 5px;
			}
			
			#ddate {
				width: 150px;
				font-size: 14px;
				border: 1px solid #A57940;
				margin: 5px auto 0;
				padding: 5px;
			}
			
			#dloc {
				width: 345px;
				font-size: 14px;
				border: 1px solid #A57940;
				margin: 5px auto 0;
				padding: 5px;
			}
			
			#personsubmit {
				width: 75px;
				font-size: 16px;
				font-weight: bold;
				background: #D2B48C;
				border: 1px solid #A57940;
				display: inline;
				margin: 10px 10px 0 175px;
				padding: 5px;
			}
			
			#personcancel {
				width: 100px;
				font-size: 16px;
				font-weight: bold;
				background: #D2B48C;
				border: 1px solid #A57940;
				display: inline;
				margin: 10px 175px 0 10px;
				padding: 5px;
			}
			
			.editbtn {
				min-width: 100px;
				min-height: 200px;
				max-width: 150px;
				max-height: 250px;
				font-weight: bold;
				border: 0.5px solid #000000;
				margin: 10px;
				padding: 2.5px;
			}
			
			#imgbg {
				min-width: 100%;
				min-height: 135px;
				min-width: 100%;
				max-height: 135px;
				background: lightgrey;
				border-bottom: 0.5px solid #000000;
				margin: 0 auto;
				padding: 0;
			}
			
			.editbtn div {
				min-width: 100%;
				min-height: auto;
				max-width: 100%;
				max-height: auto;
				font-size: 14px;
				margin: 0 auto;
				padding: 5px 10px;
			}
			
		</style>
	</head>
	
	<body class="body">
		
		<div class="mainbody">
		<?php
			
			$sql="SELECT * FROM family_tree";
			$result = mysqli_query($conn, $sql);
				if (mysqli_num_rows($result) > 0) {
					while($row = mysqli_fetch_assoc($result)) {
						$ftid = $row['ftid'];
						$fname = $row['fname'];
						$mname = $row['mname'];
						$lname = $row['lname'];
						$gender = $row['gender'];
						$status = $row['status'];
						$bdate = $row['bdate'];
						$bloc = $row['bloc'];
						$ddate = $row['ddate'];
						$dloc = $row['dloc'];
						$living = $row['living'];
					echo
		"<div>
		<form method='post'>
			<button type='button' class='editbtn' value='" . $ftid . "' onclick='treeModal()'>
				<div id='imgbg'></div>
					<div>" . $fname . "&nbsp;" . substr($mname,0,1) . ".<br>" . $lname .
					"</div>
					<div><span>" . substr($bdate,7,4) . "</span>&nbsp;-&nbsp;<span class='dyear'>" . substr($ddate,7,4) .
					"</span><span class='alive'>" . $living . "</span></div>
			</button>
			</form>
		</div>
		<div id='editbox' value='" . $ftid . "' onmouseenter='modalEnter()' onmouseleave='modalLeave()'>
			<div class='currentinfo'>
				<span class='fullname'>" . $fname . "&nbsp;" . $mname . "&nbsp;" . $lname . "</span>
				<span class='lifedates'><span class='birthyear'>" . $bdate . "</span>&nbsp;-&nbsp;<span class='deathyear'>" . $ddate . "</span><span class='currentalive'>" . $living . "</span></span>
				<button class='close'>&times;</button>
			</div>
				<form action='includes/personupdate.inc.php' method='POST'>
					<fieldset id='namegrp'>
						<label for='fname'>First<br>
						<input type='text' id='fname' name='fname' value='" . $fname . "'>
						</label>
						<label for='mname'>Middle<br>
						<input type='text' id='mname' name='mname' value='" . $mname . "'>
						</label>
						<label for='lname'>Last<br>
						<input type='text' id='lname' name='lname' value='" . $lname . "'>
						</label>
						<label for='suffix'>Suffix<br>
						<input type='text' id='suffix' name='suffix' value='" . $sname . "'></label>
					</fieldset>
					<fieldset id='gendergrp'>
						<legend>Gender</legend>
						<label class='container'>Male
							<input type='radio' id='male' name='gender' onchange='genderM()'>
							<span class='checkmark'></span>
						</label>
						<label class='container'>Female
							<input type='radio' id='female' name='gender' onchange='genderF()'>
							<span class='checkmark'></span>
						</label>
						<label class='container'>Unknown
							<input type='radio' id='unknown' checked='checked' name='gender' onchange='genderU()'>
							<span class='checkmark'></span>
						</label>
					</fieldset>
					<fieldset id='statusgrp'>
						<legend>Status</legend>
						<label class='container'>Living
							<input type='radio' id='living' name='status' onchange='statusL()'>
							<span class='checkmark'></span>
						</label>
						<label class='container'>Deceased
							<input type='radio' id='deceased' name='status' onchange='statusD()'>
							<span class='checkmark'></span>
						</label>
						<label id='uncontainer'>Unknown
							<input type='radio' id='unknown' checked='checked' name='status'>
							<span class='checkmark'></span>
						</label>
					</fieldset>
					<fieldset id='birthgrp'>
						<label for='bdate'>Birth Date<br>
						<input type='text' id='bdate' name='bdate' placeholder='DD MMM YYYY' value='" . $bdate . "'>
						</label>
						<label for='bloc'>Birth Location<br>
						<input type='text' id='bloc' name='bloc' placeholder='City, County, State, Country' value='" . $bloc . "'>
						</label>
					</fieldset>
					<fieldset id='deathgrp'>
						<label for='ddate'>Death Date<br>
						<input type='text' id='ddate' name='ddate' placeholder='DD MMM YYYY' value='" . $ddate . "'>
						</label>
						<label for='dloc'>Death Location<br>
						<input type='text' id='dloc' name='dloc' placeholder='City, County, State, Country' value='" . $dloc . "'>
						</label>
					</fieldset>
					<button type='submit' id='personsubmit' name='personsubmit'>SAVE</button><button type='button' id='personcancel'>CANCEL</button>
				</form>
			</div>";
					}
				}
		?>
		
		<script>
			function treeModal() {
			
			var y = document.getElementsByClassName("editbtn");
			var x = document.getElementById("editbox");
			var span = document.getElementsByClassName("close")[0];
			var cancel = document.getElementById("personcancel");
				if ((y.value == x.value) && (x.style.display === "block")) {
					x.style.display = "none";
				} else {
					x.style.display = "block";
				}
			
			span.onclick = function() {
				x.style.display = "none";
			}
			
			cancel.onclick = function() {
				x.style.display = "none";
			}
			};
			
			function modalEnter() {
				var enter = document.getElementById("editbox");
				enter.style.display = "block";
			};
			
			function modalLeave() {
				var leave = document.getElementById("editbox");
				leave.style.display = "none";
			};
			
			function statusL() {
				document.getElementById("deathgrp").style.display="none";
				document.getElementsByClassName("deathyear")[0].style.display = "none";
				document.getElementsByClassName("currentalive")[0].style.display = "inline";
				document.getElementsByClassName("dyear")[0].style.display = "none";
				document.getElementsByClassName("alive")[0].style.display = "inline";
			};
			
			function statusD() {
				document.getElementById("deathgrp").style.display="block";
				document.getElementsByClassName("deathyear")[0].style.display = "inline";
				document.getElementsByClassName("currentalive")[0].style.display = "none";
				document.getElementsByClassName("dyear")[0].style.display = "inline";
				document.getElementsByClassName("alive")[0].style.display = "none";
			};
			
			function genderM() {
				document.getElementById("imgbg").style.background = "lightblue";
			};
			
			function genderF() {
				document.getElementById("imgbg").style.background = "pink";
			};
			
			function genderU() {
				document.getElementById("imgbg").style.background = "lightgrey";
			};
			
		</script>
		</div>
	</body>

</html>
		<form method='post'>
			<button type='button' class='editbtn' value='" . $ftid . "' onclick='treeModal()'>
				<div id='imgbg'></div>
					<div>" . $fname . "&nbsp;" . substr($mname,0,1) . ".<br>" . $lname .
					"</div>
					<div><span>" . substr($bdate,7,4) . "</span>&nbsp;-&nbsp;<span class='dyear'>" . substr($ddate,7,4) .
					"</span><span class='alive'>" . $living . "</span></div>
			</button>
			</form>
		</div>
		<div id='editbox' value='" . $ftid . "' onmouseenter='modalEnter()' onmouseleave='modalLeave()'>
			<div class='currentinfo'>
				<span class='fullname'>" . $fname . "&nbsp;" . $mname . "&nbsp;" . $lname . "</span>
				<span class='lifedates'><span class='birthyear'>" . $bdate . "</span>&nbsp;-&nbsp;<span class='deathyear'>" . $ddate . "</span><span class='currentalive'>" . $living . "</span></span>
				<button class='close'>&times;</button>
			</div>
				<form action='includes/personupdate.inc.php' method='POST'>
					<fieldset id='namegrp'>
						<label for='fname'>First<br>
						<input type='text' id='fname' name='fname' value='" . $fname . "'>
						</label>
						<label for='mname'>Middle<br>
						<input type='text' id='mname' name='mname' value='" . $mname . "'>
						</label>
						<label for='lname'>Last<br>
						<input type='text' id='lname' name='lname' value='" . $lname . "'>
						</label>
						<label for='suffix'>Suffix<br>
						<input type='text' id='suffix' name='suffix' value='" . $sname . "'></label>
					</fieldset>
					<fieldset id='gendergrp'>
						<legend>Gender</legend>
						<label class='container'>Male
							<input type='radio' id='male' name='gender' onchange='genderM()'>
							<span class='checkmark'></span>
						</label>
						<label class='container'>Female
							<input type='radio' id='female' name='gender' onchange='genderF()'>
							<span class='checkmark'></span>
						</label>
						<label class='container'>Unknown
							<input type='radio' id='unknown' checked='checked' name='gender' onchange='genderU()'>
							<span class='checkmark'></span>
						</label>
					</fieldset>
					<fieldset id='statusgrp'>
						<legend>Status</legend>
						<label class='container'>Living
							<input type='radio' id='living' name='status' onchange='statusL()'>
							<span class='checkmark'></span>
						</label>
						<label class='container'>Deceased
							<input type='radio' id='deceased' name='status' onchange='statusD()'>
							<span class='checkmark'></span>
						</label>
						<label id='uncontainer'>Unknown
							<input type='radio' id='unknown' checked='checked' name='status'>
							<span class='checkmark'></span>
						</label>
					</fieldset>
					<fieldset id='birthgrp'>
						<label for='bdate'>Birth Date<br>
						<input type='text' id='bdate' name='bdate' placeholder='DD MMM YYYY' value='" . $bdate . "'>
						</label>
						<label for='bloc'>Birth Location<br>
						<input type='text' id='bloc' name='bloc' placeholder='City, County, State, Country' value='" . $bloc . "'>
						</label>
					</fieldset>
					<fieldset id='deathgrp'>
						<label for='ddate'>Death Date<br>
						<input type='text' id='ddate' name='ddate' placeholder='DD MMM YYYY' value='" . $ddate . "'>
						</label>
						<label for='dloc'>Death Location<br>
						<input type='text' id='dloc' name='dloc' placeholder='City, County, State, Country' value='" . $dloc . "'>
						</label>
					</fieldset>
					<button type='submit' id='personsubmit' name='personsubmit'>SAVE</button><button type='button' id='personcancel'>CANCEL</button>
				</form>
			</div>";
					}
				}
		?>

Я не включил ссылку на мою страницу подключения к базе данных, но если бы кто-нибудь мог просмотреть мою работу и посмотреть, могут ли они помочь, это было бы здорово! Я постараюсь ответить и / или предоставить любую дополнительную информацию или необходимую информацию. Это мой первый пост, поэтому прошу прощения, если он небрежный. Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...