Web Thinking Point: 2016

Thursday, 22 September 2016

How to bind Dropdown Test and Value Dynamically and Retrive also?

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function DynamicBind()
{
var Ttext="India";//CountryName -> this is visible
var Tvalue="CId-1";//CountryId -> this is invisible for secure back hand code

$("#textandvalueSET").append($('<option></option>').val("").html("-Select-"));
$("#textandvalueSET").append($('<option></option>').val(Tvalue).html(Ttext));

}

function ShowDropTextValue()
{
var countrySelect = document.getElementById("textandvalueSET");
var selectedText = countrySelect.options[countrySelect.selectedIndex].text;
alert(" Selected Text: "+selectedText);

var vv=document.getElementById("textandvalueSET").value;
alert(" Selected Value= "+vv);

}
</script>
</head>
<body>

<br/>
<br/>
<input type="button" value="Dynamic" onclick="DynamicBind()"/>
<select id="textandvalueSET" onchange="ShowDropTextValue()">

</select>
</body>
</html>

Wednesday, 22 June 2016

Show/Hide Image in Javascript with fileupload

<html>
<head>
<script>
var loadFile = function(event) {
var img = document.getElementById('output');
    img.style.visibility = 'visible';
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
};
function resetimg()
{
var img = document.getElementById('output');
    img.style.visibility = 'hidden';

}
</script>
</head>
<body onload="resetimg()">
<form name="f1">
<input type="file" accept="image/*" onchange="loadFile(event)">

<img id="output" width="100px" height="150px"/>

<br/>
<input type="reset" value="Clear" onclick="resetimg()"/>
</form>
</body>

Tuesday, 21 June 2016

Preview an Image when browse using Javascript

<html>
<head>
<script>
var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
};
</script>
</head>
<body>

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output" width="100px" height="150px"/>
</body>

Sunday, 31 January 2016

Checkbox is checked and unchecked corresponding button disabled and enabled using javascript

<html>
<body>
<script LANGUAGE="JavaScript">

function ValidateForm()
{
   if ( document.form1.terms.checked == false )
     {


   document.getElementById("ss").disabled=true;
     }
   else
    {
      document.getElementById("ss").disabled=false;

    }
}

</script>
<br/><form name="form1">
<input type="checkbox" id="terms" value="Yes" onclick="ValidateForm()"/>
I accept Terms & Conditions:
<br/><br/>
<input type="button" name="SubmitButton" id="ss" disabled="disabled" value="Submit">

</form>
</body>
</html>

Output-1:

Output-2: