下拉菜单选项会显示将显示的表单

Question

I'm currently working on a project that saves details of different types of objects to a database e.g. book, webpage and journal article. To save the different attributes of these objects I am trying to get different forms to display that depend on the selection in a drop down menu.

Here's the dropdown menu:

<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>

How to I get a different form to load on screen without redirecting to a different page. I've been trying to do this in php but I get the feeling that php isn't the right way of going about doing this. Also, apologies in advance as I have no previous experience in Javascript, AJAX or jQuery.

Answer 1

Okay, so without knowing the rest of your code, I would suggest that the best option would be to have the different forms in separate documents. For example

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); 
};

And remember to include Jquery!In the head of your HTML:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Basically, on the click of the book link, it will load the book.php into the contentwrapper div.

I think this is what you want? All you need to do is replicate the function, and the link, but replace the book with journal, and with webpage.

Hope this helps!