here two level selection are given with select tag , i want to make one more level by adding one more select tag.
if i selected madhya pradesh from first select tag then selected Rewa from second selection tag then option list should come into third selection tag with reference to Rewa such as Rewa appeared with respect to madhya pradesh.
tahshil[Rewa] =
{"Huzur","Hanumana","Teonthar","Mangawan","Jawa","Sirmour",
"Mauganj","Naigarhi","Semaria","Gurh","Raipur - Karchuliyan"}
<html>
<head>
<script type="text/javascript">
var countries = [ ];
countries["Madhya Pradesh"] = ["Indore","Jabalpur","Bhopal","Raisen","Rajgarh","Sehore","Vidisha","Morena","Sheopur","Bhind","Ashoknagar","Shivpuri","Rewa"];
countries["Uttar Pradesh"] = ["Allahabad","Moradabad","Ghaziabad","Azamgarh", "Lucknow","Kanpur Nagar","Jaunpur","Sitapur","Bareilly","Gorakhpur","Agra"];
function switchCountry(selCountry)
{
var citySel = selCountry.form.City;
for ( var s = citySel.options.length-1; s > 0; --s )
{
citySel.options[s] = null;
}
var chosen = selCountry.options[selCountry.selectedIndex].text;
var cList = countries[chosen];
if ( cList != null )
{
for ( var i = 0; i < cList.length; ++i )
{
citySel.options[i+1] = new Option(cList[i],cList[i]);
}
}
}
</script>
</head>
<body>
<br>
<form>
<center>
<h3>Select State of shop : <select name="Country" onchange="switchCountry(this);">
<option value = "">Choose state</option>
<option value="mdp">Madhya Pradesh</option>
<option value="utp">Uttar Pradesh</option>
</select></h3>
<h3>Select District place : <select name="City">
<option>Choose City</option>
</select>
<h3>Select Tehsil place : <select name="Tehsil">
<option>Choose City</option>
</select>
</h3><br>
</center>
</form><br><br><br>
</body>
</html>
how to make third level selection ?
i made a solution for my question as follow:
<script type="text/javascript">
var countries = [ ];
countries["Madhya Pradesh"] = ["Indore","Jabalpur","Bhopal","Raisen","Rajgarh","Sehore","Vidisha","Morena","Sheopur","Bhind","Ashoknagar","Shivpuri","Rewa"];
countries["Uttar Pradesh"] = ["Allahabad","Moradabad","Ghaziabad","Azamgarh", "Lucknow","Kanpur Nagar","Jaunpur","Sitapur","Bareilly","Gorakhpur","Agra"];
var Tehsil = [ ];
Tehsil["Rewa"] = ["Huzur","Hanumana","Teonthar","Mangawan","Jawa","Sirmour", "Mauganj","Naigarhi","Semaria","Gurh","Raipur - Karchuliyan"];
function switchCountry(selCountry)
{
var citySel = selCountry.form.City;
for ( var s = citySel.options.length-1; s > 0; --s )
{
citySel.options[s] = null;
}
var chosen = selCountry.options[selCountry.selectedIndex].text;
var cList = countries[chosen];
if ( cList != null )
{
for ( var i = 0; i < cList.length; ++i )
{
citySel.options[i+1] = new Option(cList[i],cList[i]);
}
}
}
function switchCountry1(selCountry)
{
var citySel = selCountry.form.Tehsil;
for ( var s = citySel.options.length-1; s > 0; --s )
{
citySel.options[s] = null;
}
var chosen = selCountry.options[selCountry.selectedIndex].text;
var cList = Tehsil[chosen];
if ( cList != null )
{
for ( var i = 0; i < cList.length; ++i )
{
citySel.options[i+1] = new Option(cList[i],cList[i]);
}
}
}
</script>
</head>
<body>
<br>
<form>
<center>
<h3>Select State of shop : <select name="Country" onchange="switchCountry(this);">
<option value = "">Choose state</option>
<option value="mdp">Madhya Pradesh</option>
<option value="utp">Uttar Pradesh</option>
</select></h3>
<h3>Select District place : <select name="City" onchange="switchCountry1(this);">
<option>Choose City</option>
</select>
<h3>Select Tehsil place : <select name="Tehsil">
<option>Choose Tehsil</option>
</select>
</h3><br>
</center>
</form><br><br><br>
</body>
</html>
Related
I have tow drop downs as below.
<select id="checkOwner" multiple="multiple" onchange="copyValue1(this)">
<option value="FirstName">First Name</option>
<option value="SecondName">Last Name</option>
</select>
<select id="checkMember" multiple="multiple" onchange="copyValue2(this)>
<option value="FirstName">First Name</option>
<option value="SecondName">Last Name</option>
</select>
I have below javascript to print selected multiple values from dropdowns.
function copyValue() {
var str = "";
for (var option of document.getElementById('checkOwner').options) {
if (option.selected) {
str+= option.value+" ";
}
document.getElementById('mytextbox').value = str;
}
}
function copyValue2() {
var str = "";
for (var option of document.getElementById('checkMember').options) {
if (option.selected) {
str+= option.value+" ";
}
document.getElementById('mytextbox').value = str;
}
}
The problem is when I select values from first that value print in text box. But I select value from second dropdown First printed values disappeared and second dropdown box values are printed. But I want to keep all and when I untick I want to remove this value also. How can I do this.
If you accepting duplicate values then, this is the solution:
I updated your HTML code to suit your needs by adding real values to your dropdown lists instead of using "FirstName,LastName".
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<select id="checkOwner" multiple="multiple" onchange="copyValue()">
<option value="John">John</option>
<option value="Abeer">Abeer</option>
</select>
<br>
<select id="checkMember" multiple="multiple" onchange="copyValue2()">
<option value="Doe">Doe</option>
<option value="Trump">Trump</option>
<option value="Abeer">Abeer</option>
</select>
<br>
<input type="text" name="mytextbox" id="mytextbox" size="200">
</body>
<script type="text/javascript">
function getOld(currentSelect)
{
var x = [];
for (var option of document.getElementById(currentSelect).options) {
if (option.selected) {
x.push(option.value);
}
}
return x;
}
function copyValue() {
x = getOld('checkMember');
y = [];
for (var option of document.getElementById('checkOwner').options) {
if (option.selected) {
y.push(option.value);
}
else
{
y = y.filter(value => value != option.value );
}
}
x = x.concat(y);
document.getElementById('mytextbox').value = x.join(' ');
}
function copyValue2() {
x = getOld('checkOwner');
y = [];
for (var option of document.getElementById('checkMember').options) {
if (option.selected) {
y.push(option.value);
}
else
{
y = y.filter(value => value != option.value );
}
}
x = x.concat(y);
document.getElementById('mytextbox').value = x.join(' ');
}
</script>
</html>
I'm starting to develop websites (learning from 0). Of course, I apologize for my healthy ignorance (and my english level).
I have 3 select in descending order: the 1st one contains a list of options that are loaded from a database (for now, I only load from HTML). Depending on the option selected, the 2nd select will be loaded with its options and so on until a 3rd select. The problem itself is solved, but when you want to select the options already loaded in the 2nd select, do not "click" on them. Only allows you to select the first one option. Here I leave the code to see if anyone can find any possible solution (and a lot of errors ^^).
var carsAndModels = {};
carsAndModels['Volvo'] = ['V70', 'XC60'];
carsAndModels['Volkswagen'] = ['Golf', 'Polo'];
carsAndModels['BMW'] = ['M6', 'X5'];
var speedsAndModels = {};
speedsAndModels['V70'] = ['150km/h', '180km/h'];
speedsAndModels['XC60'] = ['160km/h', '190km/h'];
speedsAndModels['Golf'] = ['170km/h', '190km/h'];
speedsAndModels['Polo'] = ['180km/h', '200km/h'];
speedsAndModels['M6'] = ['190km/h', '2000km/h'];
speedsAndModels['X5'] = ['200km/h', '210km/h'];
function ChangeCarList() {
var carList = document.getElementById('car');
var modelList = document.getElementById('carmodel');
var speedList = document.getElementById('speed');
var selCar = carList.options[carList.selectedIndex].value;
while (modelList.options.length) {
modelList.remove(0);
speedList.remove(0);
}
var cars = carsAndModels[selCar];
if (cars) {
for (i = 0; i < cars.length; i++) {
var car = new Option(cars[i], i+1);
modelList.options.add(car);
}
}
ChangeModelList();
}
function ChangeModelList() {
var modelListM = document.getElementById('carmodel');
var speedListM = document.getElementById('speed');
var indMod = modelListM.selectedIndex;
var selMod = modelListM.options[indMod].text;
while (speedListM.options.length) {
speedListM.remove(0);
}
var speeds = speedsAndModels[selMod];
if (speeds) {
for (i = 0; i < speeds.length; i++) {
var speed = new Option(speeds[i], i+1);
speedListM.options.add(speed);
}
}
}
<div class="">
<div class="">
<span>Select the brand</span><hr>
<select id="car" onchange="ChangeCarList()">
<option value="">-- Select --</option>
<option value="Volvo">Volvo</option>
<option value="Volkswagen">Volkswagen</option>
<option value="BMW">BMW</option>
</select>
</div>
<div class="">
<span>Select the model</span><hr>
<select id="carmodel" onchange="ChangeCarList()"></select>
</div>
<div class="">
<span>Select the speed control</span><hr>
<select id="speed"></select>
</div>
</div>
question: How to call the functions ("ChangeCarList" & "ChangeModelList") through the standard W3Schools in an external file?
Thank you very much :).
The reason it is not working is because you are removing the options on selecting a different option. You need to remember the selected option in index like below. You may have to tidy up your solution even more but this solution will let select other options.
Notice this added part in solution I propose.
var index;
if (value) {
index = modelList.selectedIndex;
}
Here old index is being remembered. Here the option is selected based on remembered index, once you are done with adding options.
modelList.selectedIndex = index;//<----This also is required
var carsAndModels = {};
carsAndModels['Volvo'] = ['V70', 'XC60'];
carsAndModels['Volkswagen'] = ['Golf', 'Polo'];
carsAndModels['BMW'] = ['M6', 'X5'];
var speedsAndModels = {};
speedsAndModels['V70'] = ['150km/h', '180km/h'];
speedsAndModels['XC60'] = ['160km/h', '190km/h'];
speedsAndModels['Golf'] = ['170km/h', '190km/h'];
speedsAndModels['Polo'] = ['180km/h', '200km/h'];
speedsAndModels['M6'] = ['190km/h', '2000km/h'];
speedsAndModels['X5'] = ['200km/h', '210km/h'];
function ChangeCarList(value) {
var carList = document.getElementById('car');
var modelList = document.getElementById('carmodel');
var speedList = document.getElementById('speed');
var selCar = carList.options[carList.selectedIndex].value;
var index;
if (value) {
index = modelList.selectedIndex;
}
while (modelList.options.length) {
modelList.remove(0);
speedList.remove(0);
}
var cars = carsAndModels[selCar];
if (cars) {
for (i = 0; i < cars.length; i++) {
var car = new Option(cars[i], i + 1);
modelList.options.add(car);
}
}
modelList.selectedIndex = index;
ChangeModelList();
}
function ChangeModelList() {
var modelListM = document.getElementById('carmodel');
var speedListM = document.getElementById('speed');
var indMod = modelListM.selectedIndex;
var selMod = modelListM.options[indMod].text;
while (speedListM.options.length) {
speedListM.remove(0);
}
var speeds = speedsAndModels[selMod];
if (speeds) {
for (i = 0; i < speeds.length; i++) {
var speed = new Option(speeds[i], i + 1);
speedListM.options.add(speed);
}
}
}
<div class="">
<div class="">
<span>Select the brand</span>
<hr>
<select id="car" onchange="ChangeCarList()">
<option value="">-- Select --</option>
<option value="Volvo">Volvo</option>
<option value="Volkswagen">Volkswagen</option>
<option value="BMW">BMW</option>
</select>
</div>
<div class="">
<span>Select the model</span>
<hr>
<select id="carmodel" onchange="ChangeCarList(this.value)"></select>
</div>
<div class="">
<span>Select the speed control</span>
<hr>
<select id="speed"></select>
</div>
</div>
I want to create 4 cascading dropdown list JavaScript i came i across this code online but want i want to add the last input on this code and the last input depend on citySelect. Please help i been searching and i only find three cascading dropdown
<form name="myform" id="myForm">
<select name="optone" id="stateSel" size="1">
<option value="" selected="selected">Select state</option>
</select>
<br>
<br>
<select name="opttwo" id="countySel" size="1">
<option value="" selected="selected">Please select state first</option>
</select>
<br>
<br>
<select name="optthree" id="citySel" size="1">
<option value="" selected="selected">Please select county first</option>
</select>
<br>
<br>
<select name="optfour" id="branchSel" size="1">
<option value="" selected="selected">Please select branch first</option>
</select>
</form>
<script>
var stateObject = {
"California": {
"Monterey": ["Salinas", "Gonzales"],
"Alameda": ["Oakland", "Berkeley"]
},
"Oregon": {
"Douglas": ["Roseburg", "Winston"],
"Jackson": ["Medford", "Jacksonville"]
}
}
window.onload = function () {
var stateSel = document.getElementById("stateSel"),
countySel = document.getElementById("countySel"),
citySel = document.getElementById("citySel");
for (var state in stateObject) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
stateSel.onchange = function () {
countySel.length = 1; // remove all options bar first
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
for (var county in stateObject[this.value]) {
countySel.options[countySel.options.length] = new Option(county, county);
}
}
stateSel.onchange(); // reset in case page is reloaded
countySel.onchange = function () {
citySel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
var cities = stateObject[stateSel.value][this.value];
for (var i = 0; i < cities.length; i++) {
citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
}
}
}
</script>
I would go with an out of the box working solution. Much faster and easier to implement.
Such as : http://plugins.krajee.com/dependent-dropdown/demo
Hope this helps!
I am not able to design the function "print_district" to get the values from s_b.
Kindly help me to defined this multidimensional array.
I suppose to get c11,c12,c13,... on selection from C1 from country country 1 and c21,c22,c23,... on selecting C2 from country 1
But I am getting d11,d12,d13,... and d12,d22,23 so on which is from country 2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type= "text/javascript">
var country_arr = new Array("country 1", "country 2");
var s_a = new Array();
s_a[0]="";
s_a[1]="C1|C2";
s_a[2]="D1|D2";
var s_b = new Array();
s_b[1,1]="c11|c12|c13|c14|c15|c16|c17|c18|c19|c10";
s_b[1,2]="c21|c22|c23|c24|c25|c26|c27|c28|c29|c210";
s_b[2,1]="d11|d12|d13|d14|d15|d16|d17|d18|d19|d10";
s_b[2,2]="d21|d22|d23|d24|d25|d26|d27|d28|d29|d210";
function print_country(country_id){
// given the id of the <select> tag as function argument, it inserts <option> tags
var option_str = document.getElementById(country_id);
option_str.length=0;
option_str.options[0] = new Option('Select Country','');
option_str.selectedIndex = 0;
for (var i=0; i<country_arr.length; i++) {
option_str.options[option_str.length] = new Option(country_arr[i],country_arr[i]);
}
}
function print_state(state_id, state_index){
var option_str = document.getElementById(state_id);
option_str.length=0;
option_str.options[0] = new Option('Select State','');
option_str.selectedIndex = 0;
var state_arr = s_a[state_index].split("|");
for (var i=0; i<state_arr.length; i++) {
option_str.options[option_str.length] = new Option(state_arr[i],state_arr[i]);
}
}
//This function is incorrect, just to demonstrate, please help to correct this
function print_district(district_id, district_index){
var option_str = document.getElementById(district_id);
option_str.length=0;
option_str.options[0] = new Option('Select district','');
option_str.selectedIndex = 0;
var district_arr = s_b[district_index].split("|");
for (var i=0; i<district_arr.length; i++) {
option_str.options[option_str.length] = new Option(district_arr[i],district_arr[i]);
}
}
</script>
</head>
<body>
<form>
Select Country: <select onchange="print_state('state',this.selectedIndex);" id="country" name ="country" ></select>
<br />
State: <select onchange="print_district('district',this.selectedIndex);" name ="state" id ="state"></select>
<br />
District <select name ="district" id ="district"></select>
<input type="submit"></form>
<script language="javascript">print_country("country");</script>
</body>
</html>
Thanks in advance !
This is the solution to the above problem
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
var stateObject = {
"Country 1": {
"C1": ["c11", "c12"],
"C2": ["c21", "c22"]
},
"Country 2": {
"D1": ["d11", "d12"],
"D2": ["d21", "d22"]
}
}
window.onload = function () {
var countySel = document.getElementById("countySel"),
stateSel = document.getElementById("stateSel"),
districtSel = document.getElementById("districtSel");
for (var country in stateObject) {
countySel.options[countySel.options.length] = new Option(country, country);
}
countySel.onchange = function () {
stateSel.length = 1; // remove all options bar first
districtSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
for (var state in stateObject[this.value]) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
}
countySel.onchange(); // reset in case page is reloaded
stateSel.onchange = function () {
districtSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
var district = stateObject[countySel.value][this.value];
for (var i = 0; i < district.length; i++) {
districtSel.options[districtSel.options.length] = new Option(district[i], district[i]);
}
}
}
</script>
</head>
<body>
<form name="myform" id="myForm">
Select Country: <select name="state" id="countySel" size="1">
<option value="" selected="selected">Select Country</option>
</select>
<br>
<br>
Select State: <select name="countrya" id="stateSel" size="1">
<option value="" selected="selected">Please select Country first</option>
</select>
<br>
<br>
Select District: <select name="district" id="districtSel" size="1">
<option value="" selected="selected">Please select State first</option>
</select><br>
<input type="submit">
</form>
</body>
</html>
Angular 5 - based example it's working. To get values use Form builder and form group.
template.html
<div>
<h2>Hello country/ state/ cities </h2>
<select (change)="countryChange($event)" >
<option>Select</option>
<option *ngFor="let c of countries" [ngValue]="c.country">{{ c.country }}</option>
</select>
<select (change)="statesChange($event)">
<option>Select</option>
<option *ngFor='let state of states' [ngValue]="state.name">{{ state.name }}</option>
</select>
<select >
<option>Select</option>
<option *ngFor='let city of cities' [ngValue]="city">{{ city }}</option>
</select>
</div>
component.ts
countries= [{
"country": "Afghanistan",
"states": [
{ "name":"Nurestan", "cities":["c1", "c2", "c3"] },
{ "name":"Oruzgan", "cities":["orc1", "oruc2", "oruc3"] },
{ "name":"Panjshir", "cities":["3c1", "3c2", "3c3"] }
]
},
{
"country": "Albania",
"states": [
{ "name": "Korce" , "cities":["c1", "c2", "c3"] },
{ "name": "Kukes", "cities":["orc1", "oruc2", "oruc3"] },
{ "name": "Lezhe","cities":["orc1", "oruc2", "oruc3"]},
{ "name": "Shkoder", "cities":["orc1", "oruc2", "oruc3"]},
{ "name": "Tirane","cities":["orc1", "oruc2", "oruc3"]}
]
},
{
"country": "Antarctica",
"states": []
}
]
states= []; cities = [];
countryChange(e){
console.log(e.target.value)
this.countries.filter(element => {
if(element.country == e.target.value){
console.log(element.states[0],"first state")
this.states = element.states;
}
});
this.cities = []
}
statesChange(evt){
console.log(evt.target.value,this.states)
this.states.filter( element =>{
if(element.name == evt.target.value){
this.cities = element.cities;
}
})
}
I'm attempting to create a page that creates a div with two paragraphs, specifically a quote and author. Afterwards, the user can change things like background color, font, font-size, and other attributes. So far everything works good, but then I want to have a save button that turns the div into one image that the user can right-click and save the image. Examples like this include http://www.teacherfiles.com/free_word_art.html and http://cooltext.com/. I looked into some of the script and HTML, but it led me to a dead end. Maybe somebody else can get something out of those? Then I started searching and saw a lot of different answers involving canvas, which I'm new to.
HTML Code:
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>Quote It!</title>
<link rel = "stylesheet"
type = "text/css"
href = "passext.css" />
<script type = "text/javascript" src = "js2.js"></script>
</head>
<body>
<h1>It's as easy as One...Two...Three!</h1>
<div id = "instructions">
<p style = "text-align:center;">Instructions:</p>
<ol>
<li>Fill out quote and author fields, then press "Create Quote".</li>
<li>Adjust attributes and watch as it updates in real-time!</li>
<li>Click save and it will convert to a versatile image.</li>
</ol>
</div>
<div id = "tips_warnings">
<p style = "text-align:center;">Tips & Warnings:</p>
<ul>
<li>Don't forget to add quotation marks!</li>
<li>Don't forget a dash before the author.</li>
<li>To create a new quote, hit "Reset", and fill out the form.</li>
</ul>
</div>
<form name = "personalize" id = "personalize">
<fieldset class = "person">
<legend class = "legend">Personalize</legend>
<p>
<label class = "uinfo">Quote (One you make up or one you know):</label>
</p>
<p>
<textarea id = "quote"
rows = "10"
cols = "45"></textarea>
</p>
<p>
<label class = "uinfo">Author:</label>
<input type="text"
id = "write_author"
name = "author"
value = "eg. (-Billy Joe)"
onclick = "this.value = ''"/>
</p>
<p>
<label class = "uinfo">Text Color:</label>
<select id = "selColor" onchange="myFunction()">
<option value = "#ffffff">White</option>
<option value = "#000000">Black</option>
<option value = "#f09dee">Pink</option>
<option value = "#ff0000">Red</option>
<option value = "#1e4d0c">Green</option>
<option value = "#00ff00">Neon Green</option>
<option value = "#0000ff">Blue</option>
<option value = "#00ffff">Cyan</option>
<option value = "#ff00ff">Magenta</option>
<option value = "#ffff00">Yellow</option>
<option value = "#cccccc">Grey</option>
</select>
</p>
<p>
<label class = "uinfo">Text Style:</label>
<select id = "selStyle" onchange = "myFunction()">
<option value = "default">None</option>
<option value = "italic">Italics</option>
<option value = "underline">Underline</option>
<option value = "bold">Bold</option>
</select>
</p>
<p>
<label class = "uinfo">Background Color:</label>
<select id = "selBack" onchange = "myFunction()">
<option value = "null">None</option>
<option value = "#000000">Black</option>
<option value = "#ff0000">Red</option>
<option value = "#00ff00">Green</option>
<option value = "#0000ff">Blue</option>
<option value = "#00ffff">Cyan</option>
<option value = "#ff00ff">Magenta</option>
<option value = "#ffff00">Yellow</option>
<option value = "#ffffff">White</option>
<option value = "#cccccc">Grey</option>
</select>
</p>
<p>
<label class = "uinfo">Border:</label>
<select id = "selBorder" onchange="myFunction()">
<option value = "none">None</option>
<option value = "solid">Solid</option>
<option value = "double">Double</option>
<option value = "groove">Groove</option>
<option value = "ridge">Ridge</option>
<option value = "inset">Inset</option>
<option value = "outset">Outset</option>
<option value = "dashed">Dashed</option>
<option value = "dotted">Dotted</option>
</select>
</p>
<p>
<label class = "uinfo">Border Width:</label>
<select id = "selWidth" onchange = "myFunction()">
<option value = "500px">Large</option>
<option value = "375px">Medium</option>
<option value = "250px">Small</option>
</select>
</p>
<p>
<label class = "uinfo">Font:</label>
<select id = "selFont" onchange = "myFunction()">
<option value = "Times New Roman">Times New Roman</option>
<option value = "Serif">Serif</option>
<option value = "Sans-Serif">Sans Serif</option>
<option value = "Fantasy">Fantasy</option>
<option value = "Monospace">Monospace</option>
<option value = "Cursive">Cursive</option>
</select>
</p>
<p>
<label class = "uinfo">Font Size:</label>
<select id = "selSize" onchange = "myFunction()">
<option value = "105%">13pt</option>
<option value = "120%">14pt</option>
<option value = "130%">15pt</option>
<option value = "140%">16pt</option>
<option value = "150%">18pt</option>
</select>
</p>
<p class = "create_quote">
<input type = "button"
value = "Create Quote"
onclick = "myFunction()"/>
<script type = "text/javascript" src = "js2.js"></script>
<input type = "reset"/>
</p>
</fieldset>
</form>
<canvas id = "blank">
<p id = "blank1"></p>
<p id = "author"></p>
</canvas>
<input type = "button"
id = "save"
value = "Save"
onclick = "saveFuction()"/>
<script type = "text/javascript" src = "js2.js"></script>
</body>
</html>
Javascript Code:
function myFunction(){
var quote, quote1, fsize, fsize1, fColor, fcolor1, bcolor, bcolor1, font, font1, width, width1, border, border1, author, author1, author2, format, fstyle, fstyle1;
format = document.getElementById("blank");
var context = format.getContext("2d");
quote=document.getElementById("quote");
quote1=quote.value;
outPut = document.getElementById("blank1");
if (quote1 != "") {
outPut.innerHTML = quote1;
} else {
alert("You need to enter a quote!");
}
author = document.getElementById("write_author");
author1 = author.value;
author2 = document.getElementById("author")
if (author1 == "" || author1 == "eg. (-Billy Joe)") {
alert("Who wrote this?");
} else {
author2.innerHTML = author1;
}
fcolor = document.getElementById("selColor");
fcolor1 = fcolor.value;
format.style.color=(fcolor1);
fstyle = document.getElementById("selStyle");
fstyle1 = fstyle.value;
if (fstyle1 == "italic") {
format.style.fontStyle=("italic");
format.style.textDecoration=("");
format.style.fontWeight=("");
} else if (fstyle1 == "underline"){
format.style.textDecoration=("underline");
format.style.fontStyle=("");
format.style.fontWeight=("");
} else if (fstyle1 == "bold") {
format.style.fontWeight=("bold");
format.style.textDecoration=("");
format.style.fontStyle = ("");
} else if (fstyle1 == "default") {
format.style.fontWeight=("");
format.style.textDecoration=("");
format.style.fontStyle = ("");
}
bcolor = document.getElementById("selBack");
bcolor1 = bcolor.value;
format.style.backgroundColor=(bcolor1);
border = document.getElementById("selBorder");
border1 = border.value;
format.style.border=( border1);
if (border1 == "dashed") {
format.style.borderWidth=("3px");
} else {
format.style.borderWidth=("5px");
}
width = document.getElementById("selWidth");
width1 = width.value;
format.style.width=(width1);
if (width1 == "375px") {
document.getElementById("blank").style.position = "absolute";
document.getElementById("blank").style.left = "962.5px";
}else if (width1 == "250px") {
document.getElementById("blank").style.position = "absolute";
document.getElementById("blank").style.left = "1025px";
}else if (width1 == "500px") {
document.getElementById("blank").style.position = "absolute";
document.getElementById("blank").style.left = "900px";
}
font = document.getElementById("selFont");
font1 = font.value;
format.style.fontFamily=(font1);
fsize = document.getElementById("selSize");
fsize1 = fsize.value;
format.style.fontSize=(fsize1);
}
function saveFunction(){
format.location.href = format.toDataURL();
}
Any help would be appreciated.
Here is some stuff that you can use in your project. See the examples, it can be help. That script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. I hope you make it.
http://html2canvas.hertzen.com/
and here some examples
http://experiments.hertzen.com/jsfeedback/