想知道是否有人可以帮忙...我有一个奇怪的问题，一旦提交表单，我的Div就会扩大。
提交后，如果提交成功，我会发出警报。此警报有效，但是当我单击“确定”并返回网页时，div大量扩展。
我已经在Google上进行了搜索，但似乎找不到任何人们看到过的场景。
CSS：
/* sm */
@media (min-width: 768px) {
#formDiv {
width: 20%;
}
}
/* md */
@media (min-width: 992px) {
#formDiv {
width: 20%;
}
}
/* lg */
@media (min-width: 1200px) {
#formDiv {
width: 20%;
}
}
body {
/*font-family: 'Shrikhand', cursive;*/
font-family: 'Rancho', cursive;
/*font-family: 'Tangerine', cursive; Snelsmore House, Oxford Rd, Donnington, Newbury RG14 3AL*/
width: 100%;
height: 100%;
background: #D4CFBD;
}
.jumbotron {
/*font-family: 'Rancho', cursive;*/
text-align: center;
margin-bottom: 0px;
}
.container-fluid {
min-height: 100%;
}
#mainContainer {
padding-top: 20px;
padding-bottom: 20px;
background: #D4CFBD;
}
#mainDiv {
text-align: center;
background: #D4CFBD;
height: 50%;
}
#MillyPic,
#stefnCraigPic {
height: auto;
max-width: 100%;
}
#formDiv {
padding-top: 30px;
margin: auto;
max-width: 100%;
}
HTML：
<div class="container-fluid" id="mainContainer">
<div id="mainDiv">
<h2>Hey there,</h2>
<h2>We would like to invite you to our wedding on the 22nd Dec 2018!</h2>
<br>
<h3>To confirm your attendance can you please fill in the below form...</h3>
</div>
<hr>
<div id="formDiv">
<div id="RSVP">
<form method="post" class="justify-content-center text-center" >
<div class="form-check text-left" id="RadioYes">
<input class="form-check-input" type="radio" name="responseRadio" id="Yes" value="1" onclick="dynInput();">
<label class="form-check-label" for="Yes">
<h4>Attending</h4>
</label>
</div>
<div class="form-check text-left" id="RadioNo">
<input class="form-check-input" type="radio" name="responseRadio" id="No" value="0" checked>
<label class="form-check-label" for="No">
<h4>Cant Make it</h4>
</label>
</div>
<hr id="attendanceHr" class="d-none">
<div class='d-none form-group' id='guestNamesDivs'>
<div class="form-group text-left">
<label for="guestName1"><h4>Guest One:</h4></label>
<input type="text" class="form-control" id="guestName1" name="guestName1" placeholder="Firstname and Surname">
</div>
<div class="form-group text-left">
<label for="guestName2"><h4>Guest Two:</h4></label>
<input type="text" class="form-control" id="guestName2" name="guestName2" placeholder="Firstname and Surname">
</div>
<div class="form-group form-check text-left">
<input type="checkbox" class="form-check-input" id="dietaryReq" name="DRYN" onclick="dietaryReqDisplay();">
<label class="form-check-label lead" for="dietaryReq">Dietary Requirements.</label>
</div>
</div>
<div class="d-none" id="dietaryReqTextDiv">
<div class="form-group">
<textarea class="form-control" id="dietaryReqTextArea" name="DR" rows="3"></textarea>
</div>
</div>
<br>
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
PHP-如果表单提交成功进入数据库，则将发出TEST警报：
if(isset($_POST['submit'])){
$attending = $_POST['responseRadio'];
if($attending == "1"){
$guest_one = mysqli_real_escape_string($conn, $_POST['guestName1']);
$guest_two = mysqli_real_escape_string($conn, $_POST['guestName2']);
$dietary_req = mysqli_real_escape_string($conn, $_POST['DRYN']);
$dietary_needs = mysqli_real_escape_string($conn, $_POST['DR']);
if($_POST['DRYN']=="on"){
$dietary_req = "1";
$dietary_req = mysqli_real_escape_string($conn,$dietary_req);
}else{
$dietary_req = "0";
$dietary_req = mysqli_real_escape_string($conn,$dietary_req);
}
$sql = "INSERT INTO weddingRSVP (guest_1, guest_2, attending, dietary_req, dietary_info) VALUES ('$guest_one', '$guest_two', '$attending', '$dietary_req','$dietary_needs');";
if(mysqli_query($conn, $sql)){
$message .= "You have successful RSVP'd to the wedding. \n As you are attending please go ahead and make a song choice for the reception :)!";
echo "<script type='text/javascript'>
alert('test')
</script>";
} else{
$error .= "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
}else{
$sql = "INSERT INTO weddingRSVP (guest_1, guest_2, attending, dietary_req, dietary_info) VALUES ('$guest_one', '$guest_two', '$attending', '$dietary_req','$dietary_needs');";
if(mysqli_query($conn, $sql)){
$message .= "You have successful RSVP'd to the wedding. \n As you are attending please go ahead and make a song choice for the reception :)!";
} else{
$error .= "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
}
}
如果有人对为什么会这样有任何想法，我将非常感激。
编辑-添加Java脚本：
var radioYes = document.getElementById("Yes");
var DivRadioNo = document.getElementById("RadioNo");
var dietaryReq = document.getElementById("dietaryReq");
function dynInput () {
if (radioYes.checked) {
document.getElementById("guestNamesDivs").classList.remove("d-
none");
DivRadioNo.classList.add("d-none");
document.getElementById("attendanceHr").classList.remove("d-
none");
}
}
function dietaryReqDisplay () {
if (dietaryReq.checked) {
document.getElementById("dietaryReqTextDiv").classList.remove("d-
none");
}
}
