Drop down menu selection ditactes what form will display

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

In order to accomplish your goal, you would need the following

A menu in your HTML page like this one. Let's say that the values of the select-list will be your PHP files, just as it's shown below

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

You'll need this snippet to make AJAX requests to your server

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

And these are your PHP files on the server-side; they may contain any valid PHP / HTML code

// PHP
// book.php or jurnal.php or webpage.php
echo 'anything';

Answer 2

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!

Answer 3

you can also keep all the 3 forms on the same page and can hide or show them on the basis of the dropdown selection.

Lets say there are 3 forms: 1. book 2. webpage 3. journal

Create forms for all three in html, and by default keep all of them hidden(for that we will use a class "display-none"), after that detect change in the dropdown on basis of whom the form populates and do action as required. Please look at the following peace of code, it might help:

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

Demo: http://jsfiddle.net/oynjj3jn/