HTML Select, Javascript dynamic load

Question

I have the following:

 <div class="form-group">
                    <select required name="select_search">
                        <option value="Titel">Titel</option>
                        <option value="Autor">Autor</option>
                        <option value="Datum">Datum</option>
                    </select>
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="search_query" placeholder="Suchbegriff eingeben"
                           name="search_query"/>
                </div>

But what I want is the following: The inputfield shouldn't be always there, I'm looking for a solution to dynamically load the "item" under the select, when one of the first two options is chosen, the textbox should appear, when you choose the 3rd entry, then a calendar should appear (Datum means date, so you should be able to choose a date in a calendar). Maybe I also have to carry about, that nothing is prechosen in the select-box, otherwise it's a bit bizarre, when theres something chosen but nothing has appeared to enter sth.

Anil Talla · Answer 1 · 2015-02-20T17:56:21.767

HTML Code:

<div class="form-group">
                <select name="select_search" onchange="selectedValue(this)">
                    <option value="" >Select Option</option>
                    <option value="1">Titel</option>
                    <option value="2">Autor</option>
                    <option value="3">Datum</option>
                </select>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" id="search_query" style="display:none;" placeholder="Suchbegriff eingeben"
                       name="search_query"/>
            </div>

JavaScript Code:

var element = document.getElementById('search_query');
function selectedValue(_this) {
element.style.display = '';
switch (_this.value) {
    case '1':
        element.type = 'text';
        break;
    case '2':
        element.type = 'text';
        break;
    case '3':
        element.type = 'date';
        break;
    default:
        element.style.display = 'none';
  }
}

I Hope this will help you :)

if case is 1, it will fall through to case 2 as you have not included a break; — Joe Fitter, Feb 20 '15 at 17:19
If we have same code for both conditions. No need to write break. For 1 and 2 same code will execute. Okay, Thanks for your suggestion. — Anil Talla, Feb 20 '15 at 17:32

score 1 · Answer 2 · edited Feb 20 '15 at 16:44

1

you want something like this

var select = document.getElementsByTagName('select')[0];
var input = document.getElementsByTagName('input')[0];

select.addEventListener('change', function () {
    var value = select.value;

    if (value === 'Titel' || value === 'Autor') {
        input.style.display = 'block';
    } else {
        input.style.display = 'none';

        // do datepicker stuff
    }
});

fiddle -

edited Feb 20 '15 at 16:44

Jordan.J.D

7,999
11
48
78

answered Feb 20 '15 at 16:42

Joe Fitter

1,309
7
11

First thank you for that. The interesting thing is now, when I copy my code into a fiddle now (http://jsfiddle.net/7osmfwhy/), than it works like it should, but when I try it on my site, then it's not working (there is no input field appearing).. any idea why? – Feb 20 '15 at 17:15
you'll probably want to give the elements more explicit identifiers - give the input and the select an id each, then select them with document.getElementById(id); – Joe Fitter Feb 20 '15 at 17:17
now not even working on fiddle any more... (http://jsfiddle.net/nyd1toy6/4/) another question by the way: you wrote "//do datepicker stuff", how can I do this in javascript? So how can I put my html-Code for that in the else-case of the js? – Feb 20 '15 at 17:26
http://jsfiddle.net/nyd1toy6/5/ - fixed :) getElementById returns a single element so you don't need to select the first element with [0]. Also there was a typo - getElementsById is undefined – Joe Fitter Feb 20 '15 at 17:29
regarding the datepicker, I'd suggest using a datepicker plugin, Keith Wood's is quite good - http://keith-wood.name/datepick.HTML. You could use the same input, and init the datepicker in the else case, or you could add a new input as a trigger and hide it by default, showing in the same way as the existing input – Joe Fitter Feb 20 '15 at 17:30
still not working on my site.. bizarre thing... I planned to use this http://bootstrapformhelpers.com/datepicker/#jquery-plugins plugin, but as you see it's just a div, you have to insert, what now? – Feb 20 '15 at 17:35
is the code being executed after the page has rendered? If you are using jQuery, wrap the whole lot in a $(function () { //your code here... }); If not then wrap it in an initialize function and call it with – Joe Fitter Feb 20 '15 at 18:19
another edit to the fiddle - this will show/hide a div you could use for the datepicker element http://jsfiddle.net/nyd1toy6/9/ or I believe you could use an input – Joe Fitter Feb 20 '15 at 18:24
The thing with the $(function()) works, thank you :) – Feb 20 '15 at 20:56
Sorry to ask, but I don't really understand how to include the datepicker from keith wood, I made the following changes : http://jsfiddle.net/nyd1toy6/10/ ... I know that this can't be all, but what else do I have to do for it? I included the css and the two required js-Files from Keith Wood as well. – Feb 20 '15 at 21:09
After some copy paste and some tries to fix it, it now looks like on that fiddle: http://jsfiddle.net/nyd1toy6/11/ So as you can see, the calendar is shown but it 1. has not the correct layout, and 2. the functionality with the alert doesn't work... It would be very nice if you could help me again. – Feb 21 '15 at 09:07

HTML Select, Javascript dynamic load

2 Answers2