[英]Change select option based on <a> clicked
我以前看過它,但是基本上我要做的是,當用戶單擊選項“ Missionary Farewell / Homecoming”時,它會將他們重定向到帶有下拉菜單的聯系表,其中“ Missionary Farewell / Homecoming”已在聯系表單中為他們選擇,並為各種不同的<a>
標記和不同的選擇選項執行此操作。
我重定向到的HTML表單
<form class="contactform" method="post" action="php/events.php">
<input class="leftbox halfbox" name="contactname" placeholder="Contact's Name">
<input class="rightbox halfbox" name="eventname" placeholder="Event Name">
<input class="leftbox halfbox" name="contactphone" placeholder="Contact Phone">
<input class="rightbox halfbox" name="contactemail" placeholder="Contact Email">
<select class="fullbox stubborn" name="eventtype">
<option>What type of event is it?</option>
<option value="missionary">Missionary Farewell/Homecoming</option>
<option value="highlight">Athletic/Dance Featurette</option>
<option value="birthday">Birthday</option>
<option value="funeral">Funeral</option>
<option value="graduation">Graduation</option>
<option value="anniversary">Anniversary</option>
<option value="engagement">Engagement</option>
<option value="other">Other</option>
</select>
<textarea class="fullbox" id="textarea" name="otheroption" placeholder="If other, please specify"></textarea>
<input class="leftbox halfbox" name="eventloc" placeholder="Event Location">
<input class="rightbox halfbox" name="eventtime" placeholder="Event Duration">
<textarea class="fullbox" id="textarea" name="otherquestions" placeholder="Do you have any other questions/specifications?"></textarea>
<input class="fullbox stubborn" id="submit" name="submit" type="submit" value="Submit">
</form>
將錨點的href設置為帶有帶有事件類型的查詢字符串的URL:
<a href="form-page.php?eventtype=missionary">...</a>
在表單頁面form-page.php
,Javascript讀取URL,解析eventtype
參數的查詢字符串,並相應地設置選項菜單。
為了更好地為事件下拉列表提供id
,讓我們使用eventtype
:
<select class="fullbox stubborn" name="eventtype" id="eventtype">
然后在結束標記</body>
之前的body
末尾,您應放置以下內容:
<script>
function getParameterByName(name)
{
var url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
document.getElementById('eventtype').value = getParameterByName('eventtype');
</script>
這種方法是純客戶端(純html),沒有php或任何服務器端代碼來管理頁面。
(當然,無需使用Javascript服務器端構建帶有預選選項的表單頁面,就可以實現相同的目標)
學分:
函數getParameterByName()
來自: 如何獲取JavaScript中的查詢字符串值?
此處介紹了如何使用JavaScript通過值更改所選選項 : HTML SELECT-使用JavaScript通過VALUE更改所選選項
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.