The send page is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script>
function send() {
var chinese = document.getElementById('chinese').value;
window.location = 'receive.html?' + chinese;
}
</script>
</head>
<body>
<input id="chinese" type="text" name="chinese" value="" />
<button onclick="send()">Submit</button>
</body>
</html>
The receive page is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script>
window.onload = function () {
var chinese = location.search;
document.getElementById('chinese').value = chinese;
}
</script>
</head>
<body>
<input id="chinese" type="text" name="chinese" value="" />
</body>
</html>
The problem is that the receive page does not receive/display the Chinese characters correctly. For example, instead of 首页 it displays ?%E9%A6%96%E9%A1%B5, though it does display well in the query string in the browser address bar.
The value should be URI-encoded before you form the URL:
window.location = 'receive.html?' + encodeURIComponent(chinese);
Now that may not be all you have to do, because it's possible that the server could be causing problems, but you generally want to do that encoding anyway with input provided directly from an text field.
Related
I wanted save value in inputbox to JS variable, but when i save it, doesn't appear in console, why? thanks for advice
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Color Picker</title>
<link href="color-picker.min.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js" ></script>
</head>
<body>
<p><input type="text"></p>
<script src="color-picker.min.js"></script>
<script>
var picker = new CP(document.querySelector('input'));
picker.on("change", function(color) {
this.target.value = '#' + color;
})
function colorpick() {
var el = document.querySelector('input');
console.log(el);
}
</script>
<input onclick="colorpick()" type="button" class="button" value="Submit">
</body>
</html>
I am not sure what are you trying to accomplish but colorpick function is only selector of the input element itself. You need console.log(el.value) instead.
I have three meta variables: Concept, DocType and Path that I want to add to my URL so that I up with something in my browser that looks like "http://www.mywebsite.com/page.html?concept=var1&doctype=var2&path=var3
Right now my page has the following code on it, but I am very new to JS and not sure if this is correct:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="concept" content="product" />
<meta name="docType" content="template" />
<meta name="Path" content="offer" />
<script>
function refresh() {
var concept = document.querySelector('meta[name="concept"]');
var doctype = document.querySelector('meta[name="docType"]');
var path = document.querySelector('meta[name="Path"]');
this.document.location.href = "?concept=" + concept.content + "&doctype=" + doctype.content + "&path=" + Path.content;
}
</script>
</head>
<body>
Line of text
<script>
if (location.search.indexOf("concept") !== -1) refresh();
</script>
</body>
</html>
This gives me the following error with no changes to my url:
reflow: 0.1ms
reflow: 0.11ms
reflow: 0.14ms
1406128139877 Services.HealthReport.HealthReporter WARN No prefs data found.
Use querySelector instead of getElementByName, and instead of concept.value, use concept.content. So your code would look like this:
<meta name="concept" content="product" />
<meta name="docType" content="template" />
<meta name="Path" content="offer" />
<script>
function refresh() {
var concept = document.querySelector('meta[name="concept"]');
var doctype = document.querySelector('meta[name="docType"]');
var path = document.querySelector('meta[name="Path"]');
document.location.href = "?concept=" + concept.content + "&doctype=" + doctype.content + "&iapath=" + path.content;
}
</script>
Also, iapath.content is an error, use path.content, that's your variable's name.
In addition, you have to call the method refresh somewhere; otherwise it won't run:
<body>
Line of text
<script>
if (location.search.indexOf("concept") === -1) refresh();
</script>
</body>
This piece of (static) html works perfectly on my local server on all browsers I have access to (chrome, firefox, IE...):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="concept" content="product" />
<meta name="docType" content="template" />
<meta name="Path" content="offer" />
<title>Test</title>
<script>
function refresh() {
var concept = document.querySelector('meta[name="concept"]');
var doctype = document.querySelector('meta[name="docType"]');
var path = document.querySelector('meta[name="Path"]');
document.location.href = "?concept=" + concept.content + "&doctype=" + doctype.content + "&iapath=" + path.content;
}
</script>
</head>
<body>
Line of text
<script>
if (location.search.indexOf("concept") === -1) refresh();
</script>
</body>
</html>
The below working code fetch all meta tags from head and displays the text inside a div on a web page. On keyup, i would like to copy input text val and replace head meta description and also update div so I can see that the text has been entered correctly from the front-end.
http://jsfiddle.net/michelm/JCWgA/
Two things that I am having issue with:
copying the new value of the input text box and replace the "content" of the meta name="description" content="new text added" (inside the div)
copy the val of the input text box and replace 'content' of the head meta description
Some of the code below:
<h2>Meta Description</h2>
<!-- I have head meta tags inside the below div to read the tags on the web page -->
<div class="all">some text</div>
<!-- input text on keyup to 1. update head meta description, 2 update meta description inside the div (<div class="all">some text</div>) -->
<input type="text" name="metadescription" id="metadescription" />
<!-- this part of jquery is working -->
<script type="text/javascript">
var foo = '';
$("head meta").each(function () {
foo += $(this).clone().wrap('<div>').parent().html();
});
//alert(foo);
var b = $('.all').text(foo);
// the below is part is not quite working
$description = $('.all').find('meta[name=description]').attr('content');
$('#metadescription').keyup(function(){
// $('.all').find($description).text($(this).val());
//the below just replace all the text, but I want it to replace the 'content'
$('.all').text($(this).val());
//alert(foo);
});
</script>
I got this to work, a big part goes to thanking softsdev for the most of the code :))
* Below is the FULL working code!!!! **
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="This is the meta description of some sort" >
<meta name="keywords" content="some, content, added" >
<title>change meta content</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function(){
$('.content').keyup(function(){
$('meta[name=description]').attr('content', $(this).val());
});
});
</script>
</head>
<body>
<h2>Meta Description</h2>
<div class="all">some text</div>
<h4>Update meta description</h4>
<input type="text" name="content" class="content"/>
<script type="text/javascript">
$('.content').keyup(function(){
$('.all').text('<meta name="description" content="'+$(this).val()+'">');
});
$('.all').append(($('meta[name=descritption]').attr('content')));
var tt = jQuery.metadata.get(name=descritption)
$('.all').text(tt);
$('meta[name=description]').attr('description').insertAfter('body');
</script>
<script language="JavaScript">
if (document.getElementsByName) {
var metaArray = document.getElementsByName('description');
for (var i=0; i<metaArray.length; i++) {
// document.write(metaArray[i].content + '<br>');
$('.all').text('<meta name="description" content="'+ metaArray[i].content +'">' );
}
}
</script>
</body>
</html>
you can do like example
change
$('.all').text($(this).val());
with
$('.all').text('<meta http-equiv="content-type" content="'+$(this).val()+'">');
Updated Answer
if you want to do it in your html then you can try this and check in firebug content will change of meta tag
but it will reflect only on client side
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="This is the meta description of some sort" >
<meta name="keywords" content="some, content, added" >
<title>change meta content</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function(){
$('.content').keyup(function(){
$('meta[name=description]').attr('content', $(this).val());
});
});
</script>
</head>
<body>
<input type="text" name="content" class="content"/>
</body>
</html>
hi2all i write code which change the color of webpage when the user click the div
but doesn't work here is my code what's wrong with it
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
<script type="text/javascript">
var x=document.getElementById("m");
x.addEventListener("click",function{
document.body.style.backgroundColor = "red";
});
</script>
</head>
<body >
<div id="m">kfjgflg</div>
</body>
</html>
You should use something such as:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
</head>
<body>
<div id="m">kfjgflg</div>
<script type="text/javascript">
var x=document.getElementById("m");
x.addEventListener("click",function(){
document.body.style.backgroundColor = "red";
});
</script>
</body>
</html>
Because you have two problems in your original code:
Is missing a important () after the token "function".
The Javascript only recognizes a element after the page or element has ready. In this case, the element only is read to be recognized if your code has after the Javascript Codes that recognizes it.
The code above fixes this.
A important observation: In some IE's, this code can not work, because of the use of x.addEventListener, in this case, you can transform the anonymous function in a normal function (with a name) and listen with addEventListener (if available) and onclick (recommended for old IE's).
In this way,the code looks like:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
</head>
<body>
<div id="m">kfjgflg</div>
<script type="text/javascript">
function changeColor(){
document.body.style.backgroundColor = "red";
}
var x=document.getElementById("m");
if(!!x.addEventListener){ //If exists
x.addEventListener("click", changeColor);
}
x.onclick = changeColor; //It's a property, and ALWAYS can be set (but in some cases is not recognized)
</script>
</body>
</html>
Here is a working example with this code: http://jsfiddle.net/fjorgemota/qCXH3/
If you had opened your JavaScript error console it would have told you that you cannot access the property/method addEventListener of undefined.
You need to look for the element m after the DOM tree has been built. Either place into a function which gets called on DOMContentLoaded:
document.addEventListener('DOMContentLoaded', function() {
/* ... */
}, false);
or place your script at the end of your <body>.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var x=document.f1.tt1.value;
alert(x);
</script>
</head>
<body>
<form name="f1">
<input type="text" name="tt" value="jawadi" />
</form>
</form>
</body>
</html>
*the alert message does not appear , what is the problem?
thanks for your help :) :)
*
In addition to other answers your document may not be ready.
In your script tag have:
$(document).ready(function(){
var x = document.f1.tt.value;
})
A nicer way might be to give your input an id.
<input type="text" name="tt" id="myInput" value="jawadi" />
$(document).ready(function(){
var x = $("#myInput").val();
})
The problem with your script is you are trying to get the value of element which has not been created in the DOM yet. So you are getting the null value because it does not exist. One thing you can do is include the script at the bottom of the page so that it gets the value
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form name="f1">
<input type="text" name="tt" value="jawadi" />
</form>
</form>
</body>
<script type="text/javascript">
var x=document.f1.tt.value;//the name of textbox is tt
alert(x);
</script>
</html>
Second thing that you can try if you are comfortable with jquery is use .ready function, so it will get the value after page load.
$(document).ready(function(){
var x=document.f1.tt.value;//the name of textbox is tt
alert(x);
});
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form name="f1">
<input type="text" name="tt" value="jawadi" />
</form>
</form>
<script type="text/javascript">
var x=document.f1.tt.value;
alert(x);
</script>
</body>
</html>
because javacript not found f1 try this
Replace
var x=document.f1.tt1.value;
with
var x=document.f1.tt.value;
Modified code: DEMO
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function alertX(){
var x=document.f1.tt.value;
alert(x);
}
</script>
</head>
<body onload='alertX();'><!-- call alertX on body load-->
<form name="f1">
<input type="text" name="tt" value="jawadi" />
</form>
</body>
</html>