when i use split() the textfield value is empty, value for textfield from drop down that i need is e.g 15.
please show me where did i go wrong..
thanks,
here's the code :
<select name="cmbitems" id="cmbitems">
<option value="price1:15">blue</option>
<option value="price2:20">green</option>
<option value="price3:25">red</option>
</select>
<input type="text" name="txtprice" id="txtprice" onClick="checkPrice()">
var select = document.getElementById('cmbitems');
var pecah = select.split(":");
var hasil = pecah[1];
var input = document.getElementById('txtprice');
select.onchange = function() {
input.value = hasil.value;
}
Try this
<select name="cmbitems" id="cmbitems">
<option value="price1:15">blue</option>
<option value="price2:20">green</option>
<option value="price3:25">red</option>
</select>
<input type="text" name="txtprice" id="txtprice">
var input = document.getElementById('txtprice');
var select = document.getElementById('cmbitems');
select.onchange = function() {
var pecah = select.options;
var hasil = pecah[pecah.selectedIndex];
input.value = hasil.value.split(":")[1];
}
Try
var input = document.getElementById('txtprice');
document.getElementById('cmbitems').onchange = function() {
var select = document.getElementById('cmbitems').value;
var pecah = select.split(":");
var hasil = pecah[1];
alert(hasil);
input.value = hasil;
}
Related
I have several input elements in which I enter the name of the book author and the book title. This data should appear in a selectlist that is on a different page. I have to pass values from one page to another, but I don't know how to do it in JavaScript. Could you show me how to do it?
HTML
<div class="child">
<input id="item" type="text" placeholder="Add book" required>
<input id="item2" type="text" placeholder="Add author" required>
<select id="mySelect" class="block">
<option>JS Part 1</option>
<option>JS Part 2</option>
<option>HTML + CSS book</option>
<option>Bootstrap</option>
</select>
<select id="mySelect2" class="block">
<option>Author 1</option>
<option>Author 2</option>
<option>Author 3</option>
<option>Author 4</option>
</select>
<input type="submit" id="send" class="block">
</div>
JS
var inp = document.getElementById("item");
inp.value = "Book Title";
var inp2 = document.getElementById("item2");
inp2.value = "Author name";
var itemsArray = localStorage.getItem('items') ?
JSON.parse(localStorage.getItem('items')) : [];
send.onclick = function (e) {
e.preventDefault();
let name = {
obj: "ID: ",
obj2: " Book: ",
obj3: " Author: "
}
var li = document.getElementsByClassName("me");
var count = li.length;
console.log(count);
var sel = document.getElementById('mySelect').selectedIndex;
var options = document.getElementById('mySelect').options;
var sel2 = document.getElementById('mySelect2').selectedIndex;
var options2 = document.getElementById('mySelect2').options;
var string = name.obj + (count + 1) + " | " + name.obj2 + inp.value + " | " + name.obj3 + inp2.value;
itemsArray.push(string);
localStorage.setItem('items', JSON.stringify(itemsArray));
}
on submit add data in localstorage
var itemsArray = localStorage.getItem('items') ?
JSON.parse(localStorage.getItem('items')) : {authors:[],books:[]};
itemsArray.authors.push(inp);
itemsArray.books.push(inp2);
then on next page you can do is
document.addEventListener("DOMContentLoaded", function(event)
{
console.log("DOM fully loaded ");
let data=JSON.parse(localstorage.getItem('items'))
let select1="";
data.authors.map(author=>{
select1+="<option>"+author+"</option>"
})
//populate in input fields accordingly
document.getElementById("slect1").innerHTML=select1 //same way you can do this for book also
}
I am doing a Javascript exercise in which two images have to be superimposed, (an airplane flying over a beach). In it I must stop and start the animation and also be able to select the speed of the animation.
The first two functions (start and stop), work correctly, but not change the speed, are the following:
var playa = undefined;
window.onload = function () {
playa = document.getElementById("playa");
}
function parar() {
playa.style.animationPlayState = "paused";
playa.style.MozAnimationPlayState = "paused";
playa.style.WebkitAnimationPlayState = "paused";
}
function seguir() {
playa.style.animationPlayState = "running";
playa.style.MozAnimationPlayState = "running";
playa.style.WebkitAnimationPlayState = "running";
}
function velocidad(t) {
var valor = t + "s";
alert (valor);
console.log(valor);
playa.style.animationDuration = valor;
playa.style.MozAnimationDuration = valor;
playa.style.WebkitAnimationDuration = valor;
console.log(playa.style);
}
I change the speeds with the following select:
<select name="vel">
<option selected="selected" onclick="velocidad(4)">Normal</option>
<option onclick="velocidad(10)">Muy lento</option>
<option onclick="velocidad(8)">Lento</option>
<option onclick="velocidad(2)">Rápido</option>
<option onclick="velocidad(1)">Muy Rápido</option>
And the start and stop:
<input type="button" name="stop" value="stop" onclick="parar()" />
<input type="button" name="play" value="play" onclick="seguir()" />
The problem is when I press any selectable option, the value is not modified and changes are not applied.
You can call your method on change of select option:
<select name="vel" onchange="velocidad()">
<option selected="selected" value=4>Normal</option>
<option value=10>Muy lento</option>
<option value=8>Lento</option>
<option value=2>Rápido</option>
<option value=1>Muy Rápido</option>
</select>
In your method get the value of selected option and use that value.
javascript code for method velocidad:
function velocidad() {
var e = document.getElementById("vel");
var t = e.options[e.selectedIndex].value
var valor = t + "s";
alert(valor);
console.log(valor);
playa.style.animationDuration = valor;
playa.style.MozAnimationDuration = valor;
playa.style.WebkitAnimationDuration = valor;
console.log(playa.style);
}
I'm trying to get it where a whole two paragraph div can be drawn onto a canvas. I'm mostly having problems with getting the div on a canvas without having to use all of the canvas tags and draw out every line. I think this is possible, let me know if it isn't. I'm intermediate with Javascript and Php, experienced with HTML, but new to canvas so try to keep it simple.
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.
You can't draw html elements directly on canvas.
You'll have to learn/use the canvas drawing commands.
However, some people have had success with this library that simulates html elements on canvas:
http://html2canvas.hertzen.com/
You might also want to know that canvas.toDataURL doesn't allow you to save the image data to a user's local file system for security reasons.
Alternatively,
There are many screen-grabbers out there. SnagIt is a good one: http://www.techsmith.com/snagit.html
Check out html2Canvas as markE said, it takes a dom element and converts it to a canvas, and then you can draw that canvas onto another canvas something like this:
http://html2canvas.hertzen.com/
var domElement = document.getElementById('myElementId');
html2canvas(domElement, {
onrendered: function (domElementCanvas) {
var canvas = document.createElement('canvas');
canvas.getContext('2d').drawImage(domElementCanvas, 0, 0, 100, 100);
// do something with canvas
}
}
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/
I have 2 dropdown menus, and I need to compose a link with it's values.
Here is the code:
<form id="dropdown1">
<select id="linha">
<option value="G12">Option 1</option>
<option value="G11">Option 2</option>
<option value="H89">Option 3</option>
</select>
<select id="dia">
<option value="all">Every day</option>
<option value="work">working days</option>
<option value="sat">saturday</option>
<option value="sun">sunday</option>
</select>
</form>
I need something in JavaScript to "compose" a link with http://somewebsite.com/*selected_linha_value*/*selected_dia_value*
How can I do that?
<select name="dia" id="dia">
<option value="all">Every day</option>
<option value="http://stackoverflow.com">working days</option>
<option value="http://anotherSite.com">saturday</option>
<option value="http://anotherSite2.com">sunday</option>
</select>
<script>
$("#dia").change(function () {
var selctedValue = "";
$("select option:selected").each(function () {
selctedValue += $(this).val();
window.location.href = selctedValue;
});
});
i think u need something like this.
<script type="text/javascript">
params = getParams();
var name1 = unescape(params["linha"]);
switch(name1)
{
case "g12":
window.location = "http://www.google.com"
}
function getParams(){
var idx = document.URL.indexOf('?');
var params = new Array();
if (idx != -1) {
var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
for (var i=0; i<pairs.length; i++){
nameVal = pairs[i].split('=');
params[nameVal[0]] = nameVal[1];
}
}
return params;
}
Its not the full code. It will give you some idea. If you have any doubt just comment
Take a look at: http://jsfiddle.net/ERHhA/
You can use jQuery val() to get the value of the select boxes. Then just append these values to the base url.
var url = "http://somewebsite.com/" + $('#linha').val() + "/" + $('#dia').val();
What about this one?
function make_url(){
var linha = document.getElementById('linha').value;
var dia = document.getElementById('dia').value;
var url=window.location.href;
var pos=url.indexOf('?');
if (pos>-1){
url = url.substr(0,pos);
}
//alert(url + '?linha='+linha+'&dia='+dia); return;
document.location.href = url + '?linha='+linha+'&dia='+dia;
}
fiddle
HTML
<div class="container">
<select class="small-nav">
<option value="" selected="selected">Go To</option>
<option value="http://whiterabbitexpress.com">Services</option>
<option value="http://shop.whiterabbitjapan.com">Shop</option>
</div><!-- container -->
JScript:
$(".small-nav").change(function() {
window.location = $(this).find("option:selected").val();
});