如何在頁面重新加載後保留下拉值？

Question

如何在頁面重新加載後保留我的下拉值？我提交併驗證錯誤後，表單會重新加載。現在我只想在表單出錯後保留下拉值。

if(isset($_POST['mod_simpleemailform_submit_1'])) 
{ 
$day = $_POST['mod_simpleemailform_field1_1']; 
$month = $_POST['mod_simpleemailform_field2_1']; 
$year = $_POST['mod_simpleemailform_field3_1']; 
$time = $_POST['mod_simpleemailform_field4_1']; 
$guest = $_POST['mod_simpleemailform_field5_1']; 
$name = $_POST['mod_simpleemailform_field6_1']; 
$email = $_POST['mod_simpleemailform_field7_1']; 
$menu = $_POST['mod_simpleemailform_field8_1']; 
$inquiry = $_POST['mod_simpleemailform_field9_1']; 

if(!$day) 
{ 
$dayError = "Please enter a value for required field: Day"; 
} 

if(!$month) 
{ 
$monthError = "Please enter a value for required field: Month"; 
} 

if(!$year) 
{ 
$yearError = "Please enter a value for required field: Year"; 
} 

if(!$time) 
{ 
$timeError = "Please enter a value for required field: Time"; 
} 

if(!$guest) 
{ 
$guestError = "Please enter a value for required field: Guest"; 
} 

if(!$name) 
{ 
$nameError = "Please enter a value for required field: Name"; 
} 
if($name!="") 
{ 
if(!letter($name)) { $nameError .= "Please enter letters only for Name";} 
} 

if(!$email) 
{ 
$emailError = "Please enter a value for required field: Email"; 
} 
if($email!="") 
{ 
if(!isemail($email)) { $emailError .= "Please enter a invalid Email";} 
} 

if(!$menu) 
{ 
$menuError = "Please enter a value for required field: Menu"; 
} 

if(!$inquiry) 
{ 
$inquiryError = "Please enter a value for required field: Message"; 
} 

if($dayError=="" && $monthError=="" && $yearError=="" && $timeError=="" && $guestError=="" && $nameError=="" && $emailError=="" && $menuError=="" && $inquiryError=="") 
{ 
$to = "joomla.hbtest@gmail.com"; 
$subj = "Beledutung Inquiry Form"; 
$msg = "\n\n"; 
$msg .= "Date: ".$day."/".$month."/".$year."\n"; 
$msg .= "Time: ".$time."\n"; 
$msg .= "Guest: ".$guest."\n"; 
$msg .= "Name: ".$name."\n"; 
$msg .= "Email: ".$email."\n"; 
$msg .= "Menu: ".$menu."\n"; 
$msg .= "----------------------------------------------\n\n"; 
$msg .= "Message: ".$inquiry."\n"; 

$head = "From: \"$name\" <$name>\n"; 
$head .= "Reply-To: \"$email\" <$email>\n"; 
$head .= "Return-Path: \"$email\" <$email>\n"; 

if(mail($to,$subj,$msg,$head)) 
{ 
?> 
<script type="text/javascript"> 
alert("Your message has been sent we will come back to you shorty."); 
window.location = "booking.php"; 
</script> 
<?php 
} 
} 
} 
?> 

<form method="post" action="booking.php" name="_SimpleEmailForm_1" id="_SimpleEmailForm_1" enctype="multipart/form-data" class="tt-form booking-form padding-top margin-top"> 
<table class="mod_sef_table"> 
<tbody></tbody> 
<div id="message"> 
<div class="error"><?php echo $dayError;?></div> 
<div class="error"><?php echo $monthError;?></div> 
<div class="error"><?php echo $yearError;?></div> 
<div class="error"><?php echo $timeError;?></div> 
<div class="error"><?php echo $guestError;?></div> 
<div class="error"><?php echo $nameError;?></div> 
<div class="error"><?php echo $emailError;?></div> 
<div class="error"><?php echo $menuError;?></div> 
<div class="error"><?php echo $inquiryError;?></div> 
</div> 
<div class="row1 row form-row"> 
<tr class="mod_sef_tr col-md-2 column no-padding"> 
<th align="center" style="text-align:center;" class="mod_sef_th">Day</th> 
<td class="mod_sef_space" width="5">&nbsp;</td> 
<td class="mod_sef_td input-cover contact-line" id="store"> 
<select name="mod_simpleemailform_field1_1" id="mod_simpleemailform_field1_1" class="mod_sef_input_select select" value="<?php echo $day; ?>"> 
<option value="">Day</option> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option> 
<option>6</option> 
<option>7</option> 
<option>8</option> 
<option>9</option> 
<option>10</option> 
</select> 
</td> 
</tr> 
</div> 
</table> 
</html> 

Answer 1

您可以使用localStorage存儲選定值：

$('#mod_simpleemailform_field1_1').on('change', function() { 
    // Save value in localstorage 
    localStorage.setItem("mod_simpleemailform_field1_1", $(this).val()); 
}); 

在頁面刷新，從localStorage獲得的價值，並設置爲select：

$(document).ready(function() { 
    if ($('#mod_simpleemailform_field1_1').length) { 
     $('#mod_simpleemailform_field1_1').val(localStorage.getItem("mod_simpleemailform_field1_1")); 
    } 
}); 

localStorage在不支持所有瀏覽器。您可以使用shims或備用cookie。

Answer 2

您可以使用本地存儲

// set value of dropdown into local storage 
localStorage.setItem("StorageName", "DropDownValue"); 

// retrieve value from local storage 
var ddlValue = localStorage.getItem("StorageName"); 

Answer 3

有可能通過PHP，你做錯了select元素沒有價值屬性：

所以首先刪除value屬性：

<select name="mod_simpleemailform_field1_1" id="mod_simpleemailform_field1_1" 
class="mod_sef_input_select select" value="<?php echo $day; ?>"> 

並在上使用selected屬性10標籤。

<select name="mod_simpleemailform_field1_1" id="mod_simpleemailform_field1_1" 
class="mod_sef_input_select select"> 
<option value="">Day</option> 
<?php 
for($i = 1; $i <= 10; $i++) { 
    if($day == $i) { 
     echo '<option selected="selected">' . $i . '</option>'; 
    } else { 
     echo '<option>' . $i . '</option>'; 
    } 
} 
</select>