[英]Drop down menu selection ditactes what form will display
我目前正在一個項目中,該項目將不同類型的對象的詳細信息保存到數據庫中,例如書籍,網頁和期刊文章。 為了保存這些對象的不同屬性,我試圖根據下拉菜單中的選擇來顯示不同的表單。
這是下拉菜單:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Select Reference Type...
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="book.php">Book</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="journal.php">Journal</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="webpage.php">Webpage</a></li>
</ul>
</div>
如何在屏幕上加載不同的表單而不重定向到其他頁面。 我一直試圖在php中執行此操作,但是我感到php不是執行此操作的正確方法。 另外,由於我以前沒有使用Javascript,AJAX或jQuery的經驗,所以請提前道歉。
為了實現您的目標,您需要滿足以下條件
這樣的HTML頁面中的菜單。 假設選擇列表的值就是您的PHP文件,如下所示
<!-- HTML -->
<p>Select reference type...</p>
<!-- This is the menu -->
<select id="menu">
<option value="book.php">Book</option>
<option value="jurnal.php">Jurnal</option>
<option value="webpage.php">Webpage</option>
</select>
<!-- This is the container for your HTML content -->
<div id="content"></div>
您需要使用此代碼段向服務器發出AJAX請求
// JavaScript
var s = document.getElementById('menu'); // reference to the <select> menu
var c = document.getElementById('content'); // reference to the content <div>
s.onchange = function(){ // hook the change event on <select>
xhr = new XMLHttpRequest();
var url = 'your-domain/' + this.value; // here we're passing the selected value
xhr.open("GET", url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) { // wait for the response
c.innerHTML = xhr.responseText; // here it comes; populate the <div>
}
};
xhr.send();
};
這些是您在服務器端的PHP文件; 它們可能包含任何有效的PHP / HTML代碼
// PHP
// book.php or jurnal.php or webpage.php
echo 'anything';
好的,所以在不了解其余代碼的情況下,我建議最好的選擇是在單獨的文檔中使用不同的表單。 例如
HTML
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Select Reference Type...
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a onclick="bookinclude()" role="menuitem" tabindex="-1" href="book.php">Book</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="journal.php">Journal</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="webpage.php">Webpage</a></li>
</ul>
</div>
<div id="contentwrapper">
Some Initial Content Here
</div>
使用Javascript
function bookinclude(){
$("#contentwrapper").fadeOut(400);
setTimeout(function(){$("#contentwrapper").load("book.php").fadeIn();}, 400);
};
記住要在HTML的頭部包含Jquery!
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
基本上,單擊書鏈接,它將book.php加載到contentwrapper div中。
我想這就是你想要的嗎? 您所需要做的就是復制功能和鏈接,但將書替換為日記本和網頁。
希望這可以幫助!
您還可以將所有3個表單保留在同一頁面上,並可以根據下拉選擇隱藏或顯示它們。
可以說有3種形式:1.書2.網頁3.日記
在html中為這三個表單創建表單,默認情況下將所有表單都隱藏起來(為此,我們將使用“ display-none”類),之后,根據表單的填充者來檢測下拉列表中的更改並根據需要執行操作。 請查看以下代碼,這可能會有所幫助:
<style type="text/css">
.display-none {
display: none;
}
</style>
<select id="dropdown" onchange="myFunction()">
<option value="-1">-- Select --</option>
<option value="book">Book</option>
<option value="webpage">Webpage</option>
<option value="journal">Journal</option>
</select>
<form id="book" class="display-none" method="post" action="where-you-want-to-post/book">
<input type="submit" value="Submit Book" />
</form>
<form id="webpage" class="display-none" method="post" action="where-you-want-to-post/webpage">
<input type="submit" value="Submit Webpage" />
</form>
<form id="journal" class="display-none" method="post" action="where-you-want-to-post/journal">
<input type="submit" value="Submit Journal" />
</form>
<script type="text/javascript">
function myFunction() {
var allForms = document.getElementsByTagName('form');
var dropdown = document.getElementById("dropdown");
if (dropdown.value != "-1") {
var form = document.getElementById(dropdown.value);
for (var i = 0; i < allForms.length; i++) {
allForms[i].setAttribute("class", "display-none");
}
form.setAttribute("class", "");
}
}
</script>
演示: http : //jsfiddle.net/oynjj3jn/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.