On Select, Fill The Div with Some Results (with the help of PHP and JavaScript)

Website and web application developers need to select an input to have some results in a div dynamically. So every option of selector would display results in the target div. These results would be scripted in another file.
Now how is it possible?

First need to create a selector having some options and a div which would be filled with the results.


Now JavaScript Code and would declare a file from where the result would be transferred to the target div.


HTML Tag textarea as Text Editor with JavaScript

We use html tag textarea for input of long text e.g. in contact form, we use textarea tag for message (which may have long text), similarly in admission form, we use textarea tag for long description.

Tag textarea syntax are;

<textarea>Some text which is already defined</textarea>

We may need text editor with extra functions to write text with images and some others animations etc. For, we use some JavaScript code to make same html textarea as Text Editor.

<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>

Tag iframe: On a WebPage, Display of Other One Page in HTML Language

Sometimes we need to display other website on our websites as an sample or to display its contents in the exact similar form. Though there are some approaches to refer other websites as using <a> of HTML or using ajax of JavaScript. Very impressive approach is to use <iframe>.

<iframe src="target_url"></iframe>

Here css can be used to format it properly e.g width and height.

<iframe class="sample1" src="https://primeburg.com"> </iframe>

in CSS file;

.sample1{

width: 100%;

height: 500px

}

or these css properties can be described in style attribute.

<iframe src="https://primeburg.com" style="width: 100%; height: 500px"></iframe>

Initially iframe tag has already border, so it can be removed in style attribute or in css file.

 

 

HTML Basics

HTML is a markup language for designing and developing the website.

Its basic syntax are

<!DOCTYPE html>


<html>

<head>

</head>

<body>

<header>

</header>

<footer>

</footer>

</body>

</html>

Selector and Searchable Selector in HTML

There are two ways to select item from a list in HTML, we describe them here in detail;

Selector (which only select)

<select>

<option value="1">Item 1</option>

<option value="2">Item 2</option>

<option value="3">Item 3</option> 

<option value="4">Item 4</option> 

<option value="5">Item 5</option> 
</select>

Searchable Selector (which do both select and search while typing)

(Not supported by some browsers e.g. Internet Explorer and Safari while perfectly supported by Chrome)

<input list="list-1"> 
<datalist id="list-1"> 
<option>Item 1</option> 
<option>Item 2</option> 
<option>Item 3</option> 
<option>Item 4</option> 
<option>Item 4</option> 
<option>Item 5</option> 
</datalist>

If there is need to hide list so datalist can be hidden while creating css as

datalist{
display: none
}

Now we present the solution at advanced level but with the help of using other programming language JavaScript (J query).

forward to select2