Life With Technology: select

Tuesday, January 5, 2016

Extract only the values from a select element on a web page hosted in internet

Do you need to extract only the values from a html select element which is on a web site hosted in the internet.

Then just copy and paste following html code and save it with any_name.html and open it with a web browser
Go to the site and get the relevant html code set for the select box.(You can extract it using a tool like web developer tools available in the browser)
Copy and paste above code set on the text area of our generated web page.
Then click process button on the page
It will filter out only the required values.

<html>
    <head>
        <script language="javascript">
            function getModels(){
                var selectContent = document.getElementById("selectContent").value;
                var indexToStart = selectContent.indexOf(">") + 1;
                var targetString = selectContent.substring(indexToStart);
                var optionSet = targetString.split("</option>");
                var optionArrLength = optionSet.length;
                var modelSet = [];

                for(var counter = 0 ; counter < optionArrLength; counter++){
                    modelSet[counter] = (optionSet[counter].split(">"))[1];
                }

                var resultLength = modelSet.length;
                var currentDivContent = "";
                for(var counter = 0; counter < resultLength; counter ++){
                    currentDivContent = currentDivContent + modelSet[counter] + "<br>";

                }
                document.getElementById("resultText").innerHTML = currentDivContent;
                console.log(currentDivContent);
            }
        </script>
    </head>

    <body>

        <form>
            <textarea id = "selectContent" rows=20 cols=100></textarea>
            <input type="button" value="Process" OnClick="getModels()">
        </form>

        <div>
            <p id = "resultText"></p>
        </div>
    </body>
</html>

Sunday, May 26, 2013

Automatically populate SELECT items in HTML using JAVASCRIPT

We are going to learn how we can automatically populate a data set to view in a select element in HTML using javascript. As an example we will populate set of years, months and dates inside of select element which can be used to input a particular birthday in a HTML form.

<script language="javascript">

             function loadYears(){
            var sel = document.getElementById('year');

// 'new Date().getFullYear()' is used to get current year.

            for(var i = 1950; i <= new Date().getFullYear(); i++) {
            var opt = document.createElement('option');
            opt.innerHTML = i;
            opt.value = i;
            sel.appendChild(opt);
            }
            }

            function loadDays(){

            document.getElementById('day').innerHTML = ""; //initially clears the data items which were included by the previous function invokes.

            var sel = document.getElementById('day');

     // if/else set is to decide the number of days for a particular month.

   if(document.getElementById('month').value!='February' && document.getElementById('month').value!='April' && document.getElementById('month').value!='June' && document.getElementById('month').value!='August' && document.getElementById('month').value!='November' && document.getElementById('month').value!='September'){
                for(var i = 1; i < 32; i++) {
                var opt = document.createElement('option');
                opt.innerHTML = i;
                opt.value = i;
                sel.appendChild(opt);
                }
                }else{

                for(var i = 1; i < 31; i++) {
                var opt = document.createElement('option');
                opt.innerHTML = i;
                opt.value = i;
                sel.appendChild(opt);
                }
            }
            }

            function loadMonths(){

//JavaScript array to store the names of the months
var months = ["January","February","March","April","May","June","July","August","September","October","November","December"];
            var sel = document.getElementById('month');
            for(var i = 0; i < months.length; i++) {
            var opt = document.createElement('option');
            opt.innerHTML = months[i];
            opt.value = months[i];
            sel.appendChild(opt);
            }
            }
        </script>

<body onload="loadYears();loadMonths()"> 


<select id="year" name="year"></select>

<select id="month" name="month" onclick="loadDays()"> </select>

<select id="day" name="day"></select>