Javascript get innerHTML of selected option

Quick Posting.

HTML
<select class="form-control m-bot15" id="myselect" onchange="getHargaLayanan()">
      <option value="1">Text 1</option>
      <option value="2">Text 2</option>
</select>


I want get the innerHTLM or the text of the selected option with javascript.

Here is how is that done:

<script>
   var elemen=document.getElementById('myselect');
   var mytext=elemen.options[elemen.selectedIndex].text;
   alert(mytext);
</script>

thats all!!!

Bootstrap Select Template

Well, I posted this just for my own purpose actually.

I was looking for a template for Bootstrap select template and I found a very good link that gives many templates of Bootstrap Select.

here is the link:
https://silviomoreto.github.io/bootstrap-select/examples/

AJAX with POST in Codeigniter (CI)

Hi there, I just learned how AJAX works. I learned from www.w3school.com, it is really a great web that one can learn everything about programming Web Application.

So this is my summary that I learned so far.
Usually we use AJAX to query something from server without reloading the page. In this example I want to show how I can send two data to be processed in the server using POST.

Oh, I forget to mention that I'm using Codeigniter.

So here is the code in the client looks like if I use POST (in Viewer):
<script>
function test_ajax()
{
    url = 'get_jsondata';

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(){
    if(this.readyState==4 && this.status == 200)
    {
               alert(this.responseText);
    }

    xhttp.open("POST", url, true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send("var1=hallo&var2=halli");
}
</script>

First, take a look at the variable url. It has value of 'get_jsondata'. This value will call URL of (in my case, since I'm still working on local) http://localhost/myweb/index.php/c_home/get_jsondata. That means I have to prepare a function called 'get_jsondata' in Controller 'c_home'.

Second, take a look at the variable 'xhttp'. This variable is an object of XMLHttpRequest(). The real execution of the AJAX request is when calling the function 'send'. What the code does above is:

1. define the callback function on 'onreadystatechange'. If the readystate change, the function will be called. I read in w3school, the function will be called 4 times.
2. open specifies the type of request. the third parameter says whether the function should be asynchronous (true) or synchronous (false). If it is asynchronous, the browser will not wait for the response and continue process the web. On the other hand, if it is synchronous, the browser will wait for the response before processing the next step.
3. If POST is used, the content of the request has to be defined. Just use it like that.
4. Send the request with defining the variables and their values in string and separated with '&'.

In PHP, the function will look like this (Controller). Like I mentioned before, the function's name should be 'get_jsondata'.

function get_jsondata()
{
    echo $_POST['var1']."    ".$_POST['var2'];
}

add/remove HTML input dynamically with Javascript

Again, a posting to remind me again, in case I forget how to do this.

I'm in the middle of coding a web page for member's registration. Some member might have more than one phone number, so I want to have a webpage that the member can add the input form or remove it dynamically.

I use Codeigniter and Bootstrap to code.

So, here is a part of the HTML code:

<div class="form-group">

<div class="row">

<label class="col-sm-2 control-label text1">phone</label>

<div class="col-sm-1">

<a onclick="addTelp()">

<i class="icon_plus_alt2" style="float: right"></i>

</a>

</div>

<div class="col-sm-9">

<input type="text" class="form-control" name="telp[0]">

</div>

</div>

</div>
<div id="morephone">

</div>







the new input field will be put inside div with id "morephone".

Here is the javascript code to add new input field :

<script>
var i=1;
function addTelp()
{


var div=document.createElement('div');

div.className='form-group';

var attr="telp_"+i;

div.setAttribute('id', attr);

div.innerHTML='<div class="row" >\

<label class="col-sm-2 control-label text1"> </label>\

<div class="col-sm-1" >\

<a onclick="remove(this)" style="color:red" >

<i class="icon_minus_alt2" style="float: right"> </i>

</a>\

</div>\

<div class="col-sm-9" id="inti">\

<input type="text" class="form-control" name="telp['+i+']" id="idtelp'+i+'">\

</div>\

</div>';

document.getElementById('morephone').appendChild(div);

i++;

}
</script>

The sequence number for the id and the name of the input form is optional. I use it for my own purpose that I don't describe here.

Here is the generated HTML code from that function:

<div class="form-group" id="telp_1">

<div class="row">

<label class="col-sm-2 control-label text1"> </label>

<div class="col-sm-1">

<a onclick="remove(this)" style="color:red">

<i class="icon_minus_alt2" style="float: right"> </i>

</a>

</div>

<div class="col-sm-9">

<input type="text" class="form-control" name="telp[1]" id="idtelp1">

</div>

</div>

</div>

This is how I remove the input field:

<script>
function remove(input) {


var parent=document.getElementById('morephone');

node=input.parentNode.parentNode.parentNode

parent.removeChild(node);

}
</script>




Lets take a look at the third line of the function above.

node=input.parentNode.parentNode.parentNode

It was new for me and it took quite time to understand what was it. So here is the explanation:

Take a look at the generated HTML code. Onclick event is in HTML tag <a> and call a javascript function remove with a parameter "this". "this" refers to the tag <a>.

What I want to remove with the function "remove(this)" is one input field. That means I have to remove the whole generated HTML. To do that I have to get the tag <div> with id "telp_1", which is located 3 level above the <a>.

Now lets take a look again at this line:

node=input.parentNode.parentNode.parentNode

input refers to tag <a> where the function remove() called on mouse click.
input.parentNode refers to tag <div class="col-sm-1">
input.parentNode.parentNode refers to the tag  <div class="row">
input.parentNode.parentNode.parentNode referst to the tag  <div> with id telp_1 and this is what I want to have. Right now I will call it as an element Node.

The one who can remove a node is its parent. The parent is a node in one level above, that means the parent is <div> tag with id "morephone".

Session Data Lost after redirection in Codeigniter

I am using Codeigniter 3.0.6 and PHP 7.1.2. Problem that I faced is the session data lost after redirecting to another controller. After googled, this issues is kind of a bug in Codeigniter. I have tried many solution found in google and this link gives the solution that works for my case.

I did exactly the steps that are shown in that link :

1. Go to system/libraries/Session/Session.php
2. Comment session_start() by adding //. We want to relocate the sessionn_start().
3. Find (using ctrl + f ) a comment that says "Security is king". Comment out all the line under that comment until the end of the function. In my case I commented out the line number 313 - 318.
4. Go to the main index.php, it is the first index.php and located in the same directory with the sub-directories 'application', 'system', 'user_guide', etc. 
5. Put 'session_start()' right after < ?php

Hope this can help you....

Cross-Origin Resource Sharing (CORS) Problem in Codeigniter

Facing a problem with CORS while developing a web with Codeigniter, the console keeps giving this error message "...has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource"

I browsed and tried many solutions posted in web, many failed to solve my problem. Finaly, I found a solution that works, at least for me. This is the link, where I found the solution. Link

So this is the solution:

Open "config.php" which is located in ../application/config/config.php .
Under Base Site URL, change existing configuration with this:

$config['base_url'] = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == "on") ? "https" : "http");
$config['base_url'] .= "://".$_SERVER['HTTP_HOST'];
$config['base_url'] .= str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);

This works like a charm....
Hope this can help you somehow...

How to find CD Key from installed Windows or M. Office

Well, I got a new experience today. I lost my windows's cd case and I need the cd key to re-install the windows on my pc. I just assumed, that the cd key must be stored somewhere in the system, since it is required every time we install windows. So I browsed around and found the answer from this link.

What you need to install on the PC where the windows installed is this program, Magical Jelly Bean. What you need to do next is just installing the program and let the program do the magic. 

I used it to reveal CD Key for my windows and M. Office. 

Hope it can help you somehow, cheers...