Apache URL rewrite in Ubuntu

1. Enable url rewriting using the command,

a2enmod rewrite

2. Open the file /etc/apache2/apache2.conf and uncomment the line,

AccessFileName .htaccess

3. Update the security model

<Directory /var/www>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

4. Create file .htaccess in web site's root folder

5. Add the below line to the beginning of the .htaccess file

RewriteEngine on

6. Add the rewrite rule and conditions below it,

e.g. RewriteRule ^api\/v([0-9]+)\/((([a-zA-Z]+)|(([a-zA-Z]+)\/([a-zA-Z]+)))+)\/?$ index.php?v=$1&api=$2 [L]

Get the selected item in a drop down dynamically

Actually I forgot to add this topic. I think this is the topic to discuss first. Anyway this post will tell you how to get the selected item, the selected value in a set of options of a select input field of an HTML form. The value is accessed or retrieved using java script or jquery API. The code is below.

java script code : 

document.getElementById("SELECT_ID").value;

jquery code :

$("#SELECT_ID").val();

For eg:-

If the HTML code is as below then the code will be as explained below,

<select name="sel_name" id="sel_id">

<option value="I will help you">I will help you</option>

<option value="I will not help you">I will not help you</option>

<option value="I can assist you">I can assist you</option>

<option value="I cant assist you">I cant assist you</option>

</select>

Then the java script code to dynamically pick the selected option is,

document.getElementById("sel_id").value;

and the jquery code for the same is,

$("#sel_id").val();

Add Drop down or list dynamically into an HTML form

In the previous articles we have discussed about how to different dynamic actions related to a select input field in an HTML form, in whatever form or name it is, i.e. the same is called a drop down list or list box or combo box. Now in this article I want tell you how to insert a select field dynamically to an HTML form. This too using the same java script or jquery APIs. Sure you can do the previous experiments of inserting options or deleting it or counting or set a new value as selected all using the same code discussed in previous articles. So let us do it, add a drop down to a form.

The javascript code to achieve this task is,

var my_form = document.getElementById('id_form');

var my_select = document.createElement('select');

my_select.setAttribute('id','id_select');

my_form.appendChild(my_select);

Note:-
1. Replace the 'id_form' with the id of the form to which you want to insert the select element

2.Replace the 'id_select' with the id you want to use for the newly added select box.

The same using jquery,

$("#id_form").append('<select id="id_select"></select>');

For eg:-

If the HTML code is as below then the javascript and jquery code following it can be used to do the same,

<form id="test_form">
<input type="text" name="name" value="test" >
</form>

javascript code,

var my_form = document.getElementById('test_form');

var my_select = document.createElement('select');

my_select.setAttribute('id','test_select');

my_form.appendChild(my_select);

jquery code:

$("#test_form").append('<select id="test_select"></select>');

If you want mix the jquery APIs and the javascript (the core java script I mean, jquery too is javascript itself, but a framework made of javascript), the same can be accomplished using the snippet,

var my_select = document.createElement('select');

my_select.setAttribute('id','test_select');

$("#test_form").append(my_select);

Hopes you enjoyed this code, if you need any more explanation or clarification feel free to put your comments.

Remove an option dynamically from Drop down or list using javascript and jquery

If there is a requirement to delete an existing option from a select input field in a form dynamically,  that can be a list box or combo, i.e drop down type of select. You can dynamically remove an option from it using java script or jquery using the following code snippet. The id selector is used here, if you wish you can use other selectors also. To remove an option from select, the following java script can be used,

document.getElementById('SELECT_ID').remove(option_index);

the same can be achieved using the following jquery snippet,

$("#SELECT_ID option[value='OPTION_VALUE']").remove();

For eg:- if the html code for the select is like this,

<select id='myselect'>
<option value="I loves Linux">I loves Linux</option>
<option value="I use windows too">I use windows too</option>
<option value="Linux is free software">Linux is free software</option>
<option value="Java script is simple">Java script is simple</option>
</select>

then the java script code to remove the option 'I use windows too' will be,

document.getElementById('myselect').remove(1); //it is 1 because the index start from 0

using jquery,

$("#myselect option[value='I use windows too']").remove();

To get the number of items in a drop down dynamically

Sometimes you will be required to count the number of options in a select (list/drop down) dynamically. You can achieve this using the following java script or jquery code snippet. This will give you the total number of options in select input field in a form, that having a unique id. You can use other selectors instead of id based selection. The number of options in a drop down (combo box/list box) can be achieved using the following javascript code snippet,

document.getElementById('SELECT_ID').options.length;

using jquery we can achieve the same as,

$("#SELECT_ID").attr('options').length;

For eg:- if the html code for the select is like this

<select id="myselect">

<option value="I want sleep" >I want sleep</option>

<option value="I want go" >I want go</option>

<option value="I can drive" >I can drive</option>

<option value="I can code" >I can code</option>

</select>

then the javascript code will be,

document.getElementById('myselect').options.length;

using jquery we can achieve the same as,

$("#myselect").attr('options').length;

Add a new option to drop down using java script and jquery

Sometimes the developer will need to add a new option to the select (drop down/list) dynamically. You can achieve this by using java script or jquery. The below code will add a new option to the existing select input field. The id of the select is the selector used in the case, you can use other selectors too.To add a new option dynamically to drop down the following java script code can be used,

var newoption = document.createElement("OPTION");
        newoption .text = 'Option_display_text';
        newoption .value = 'Option_value';
        document.getElementById('DROPDOWN_ID').options.add(newoption ); 

same can be achieved using jquery using this snippet,

$("#DROPDOWN_ID").append('<option value="Option_value">Option_display_text</option>');

For e.g:- if the html for select (drop down) is like this,

<select id="country">

<option value="India" >India</option>

<option value="KSA" >KSA</option>

<option value="UK" >UK</option>

<option value="USA" >USA</option>

</select>

to insert a new option quatar then the javascript code will look like this,

var newoption = document.createElement("OPTION");
        newoption .text = 'quatar';
        newoption .value = 'quatar';
        document.getElementById('country').options.add(newoption );

and in jquery it is like this,

$("#country").append('<option value="Quatar">Quatar</option>');

Get the index of selected item in drop down using java script or jquery

Sometimes you will need the index of the selected item in a select (drop down/list) dynamically. You can use the javascript or jquery code snippet to achieve this. This will give you the index of the selected item in the select box.This will give the zero based index of the option in a set of options. To get the index of the selected item in a drop down or a list box we can use the following javascript code,

var index=documet.getElementById('element_id'). selectedIndex;

The same can be done using jquery as,

var index=$("#element_id").attr("selectedIndex"); 

For e.g:- if the html code is like this,

<select id="my_select">

<option value="I loves you">I loves you</option>

<option value="I hates you">I hates you</option>

<option value="I like you">I like you</option>

<option value="I know you">I know you</option>

</select>

Then the javascript code will be like this,

var index=documet.getElementById('element_id'). selectedIndex;

and jquery like this,

var index=$("#element_id").attr("selectedIndex");