Hello boys and girls, today we are showing you how to create a dropdown select script on change for submit form, menu or other purpose, using html and java .
We are using some div’s, some java scripting and you can use it in an any web page you like and for any purpose, if you are asking me I am using to generate some reports using three different variables in php .
First you need to have the script that changes the div’s and it looks like this :
<script>
document
.getElementById(‘target’)
.addEventListener(‘change’, function () {
‘use strict’;
var vis = document.querySelector(‘.vis’),
target = document.getElementById(this.value);
if (vis !== null) {
vis.className = ‘inv’;
}
if (target !== null ) {
target.className = ‘vis’;
}
});
</script>
You cand use it directly on your page , don’t forget to put the <script></script> at the start and end of it.
Then you need to create the select menu with dropdown :
<select id=’target’>
<option value=”>Click for selecting what you want</option>
<option value=’content_1′>content_1</option>
<option value=’content_2′>content_2</option>
<option value=’content_3′>content_3</option>
<select>
After this insert a small script to hide the content .
<style>
.inv {
display: none;
}
</style>
Then insert the content for showing when select menu is selected :
<div id=’content_1′ class=’inv’>
<center>
<form method=’POST’>
<input type =’text’ name=’content_1′ placeholder=’text for content_1’/> this is for submitting text
<input type=’submit’ value=’content_1’/>
</form>
</center>
</div>
<div id=’content_2′ class=’inv’>
<center>
<form method=’POST’ enctype=’multipart/form-data’>
<input type =’file’ name=’content_2′ id=’file’> this is for uploading a file
<input type=’submit’ value=’SUBMIT FILE for content_2’/>
</form>
</center>
</div>
<div id=’content_3′ class=’inv’>
<center>
<form method=’POST’>
<input type =’text’ name=’content_3′ placeholder=’text for content_3’/>this is for submitting text
<input type=’submit’ value=’Search for content_3’/>
</form>
</center>
</div>
Done, this creates a drop down menu list for three different things and shows only the selected one.
Further you can use php for this form to do things like this :
if (isset($_POST[‘content_1’]))
{
//do stuff
}
elseif(isset($_FILES[‘content_2’])){
{
//do stuff
}
elseif (isset($_POST[‘content_3’]))
{
//do stuff
}
Good luck !
(No Ratings Yet - Rate this article !)
Loading...
