<body>
<script type="text/javascript">
var a="sreedhar";
<input type="text" value="abc">
</script>
</body>
It gives the syntax error.
can't we use "html tags" directly in "javascript".
No, you can't use them directly in JavaScript.
However you may treat them as strings:
var str = '<input type="text" value="abc">';
or as DOM elements:
var input = document.createElement('input');
input.type = 'text';
input.value = 'abc';
And then append to the markup, e.g. document.body.appendChild(input);.
Usually a well formated hmtl with javascript looks like this.
<HTML>
<HEAD>
<script type="text/javascript">
var a="sreedhar";
</script>
</HEAD>
<BODY>
<input type="text" value="abc">
</BODY>
</HTML>
If you want to generate some html with javascript then assign it as a string to some variable.
For example you have a div having id='abc' and you want to generate a textbox in this div then you need to do like this
<script type="text/javascript">
var textbox = '<input type="text" value="abc">';
$('#abc').append(textbox);
</script>
Maybe you want this:
<script type="text/javascript">
var a="sreedhar";
document.write('<input type="text" value="abc">');
</script>
</BODY>
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
//put javascript function here
</script>
</head>
<body>
<input type="text" value="abc">
</body>
</html>
You can use html element inside the javascript using element id.
Related
Please check my code below. I want to display input characters number real time using jquery javascript. But problem is when i am doing it with "textarea" it works but when i do same with normal input type text its not work.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
</head>
<body>
<!-- Works -->
<!-- <textarea></textarea>
<span id="characters"><span>
<script type='text/javascript'>
$('textarea').keyup(updateCount);
$('textarea').keydown(updateCount);
function updateCount() {
var cs = $(this).val().length;
$('#characters').text(cs);
}
</script> -->
<!-- Not works -->
<input type="text" name="name">
<span id="characters"><span>
<script type='text/javascript'>
$('text').keyup(updateCount);
$('text').keydown(updateCount);
function updateCount() {
var cs = $(this).val().length;
$('#characters').text(cs);
}
</script>
</body>
</html>
Here is a working fiddle with combining your two events keyup and keydown into one line :-)
Your selector was wrong, text doesn't exist. So I call input[name="name"] instead to get the input by your name value:
$('input[name="name"]').on('keyup keydown', updateCount);
function updateCount() {
$('#characters').text($(this).val().length);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name">
<span id="characters"><span>
$("input").keyup(function(){
$("#characters").text($(this).val().length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name">
<span id="characters"><span>
With "textarea" version you are selecting "textarea" by $('textarea').keyup(updateCount) and
$('textarea').keydown(updateCount) nicely but with text input you are doing wrong to select input text.
I have fix it by placing a id called "foo" on input text. This should be working now.
<script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
<input type="text" id="foo" name="">
<span id="characters"><span>
<script type='text/javascript'>
$('#foo').keyup(updateCount);
$('#foo').keydown(updateCount);
function updateCount() {
var cs = $(this).val().length;
$('#characters').text(cs);
}
</script>
If you want to get an input with the type text you must use a selector like this
$('input[type="text"]').keyup(updateCount);
$('input[type="text"]').keydown(updateCount);
Here is a list of all jQuery selectors
You are not selecting the input field here.
Try the following
$('input').keyup(updateCount);
$('input').keydown(updateCount);
Here you go with a solution https://jsfiddle.net/mLb41vpo/
$('input[type="text"]').keyup(updateCount);
function updateCount() {
var cs = $(this).val().length;
$('#characters').text(cs);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="">
<span id="characters"><span>
Mistake was $('text').keyup(updateCount);, you can refer input textbox using 'text'.
It should be $('input').keyup(updateCount);
Everything is correct in your code, you just need to add ":" beore your type. This will make it identify, it is input type.
Example:
<script type='text/javascript'>
$(':text').keyup(updateCount);
$(':text').keydown(updateCount);
function updateCount() {
var cs = $(this).val().length;
$('#characters').text(cs);
}
</script>
I changed your script only. Just find the change, you will get it.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<input name="usrname" type="text" placeholder="Username" />
<input name="comnts" type="text" placeholder="comments"/>
<input id="btnButton" type="Submit" value="Click me"/>
</body>
<script type="text/javascript">
window.onload = function(){
var refButton = document.getElementById("btnButton");
refButton.onclick = function() {
window.alert("Hi");
//var name-"Bhuvanesh";
//var Comment="Zack";
//window.alert("Hello");
}
};
</script>
</html>
This code above works and the code below does not work
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<input name="usrname" type="text" placeholder="Username" />
<input name="comnts" type="text" placeholder="comments"/>
<input id="btnButton" type="Submit" value="Click me"/>
</body>
<script type="text/javascript">
window.onload = function(){
var refButton = document.getElementById("btnButton");
refButton.onclick = function() {
//window.alert("Hi");
var name-"Bhuvanesh"; //Edited from - to =
var Comment="Zack";
window.alert("Hello "+name);
}
};
</script>
</html>
I do not understand why the code below does not work. I have used window.onload to make sure the page renders first. Somehow the code does not seem to work. I am trying to make a simple page that can accept Name and comment from the textbox and display it on the webpage. I am relatively new to web development. Any help is appreciated.
Edit 1: This code below does not seem to work.`
var name=document.getElementByName("usrname");
var Comment=document.getElementByName("comnts");
document.write(name+ "wrote "+Comment);
As far as I can tell, getElementByName is not a function. You can use getElementsByName (note the plural). This will return a collection rather than an element. More than this, you were fetching the entire element, not the value of the element like it seems you want. The following works for me:
var name = document.getElementsByName("usrname")[0].value;
var comment = document.getElementsByName("comnts")[0].value;
document.write(name + "wrote "+ comment);
I have 2 php pages
home.php
about.php
I have 1 Javascript page, which I called javascript from home.php.
I want to access the value of the p tag in about.php.
home.php
<!DOCTYPE html>
<html>
<body>
<input type="submit" onclick='myfunction()'>
</body>
</html>
javascript
<script>
function myfunction()
{
}
</script>
about.php
<!DOCTYPE html>
<html>
<head lang="en">
</head>
<body>
<p id='demo'>i want to access this value in javascript function</p>.
</body>
</html>
You probably want something in pure javascript like:
<script>
document.getElementById('demo').innerHTML='change the p tag value';
</script>
function myfunction(){
var val= document.getElementById('demo').textContent;
alert(val);
}
FIDDLE
var pTag = document.getElementById('demo').innerHTML;
The variable pTag will now hold the value(text) of your "demo" tag,
ready for you to do what you wish with it.
EDIT:
Using Javascript, set the value of a hidden form field when you change the contents of your tag.
Then pass the values using php, like below...
home.php:
<form action="about.php">
<input type="hidden" name="demo" id="demo" />
<p id="pDemo"> </p>
<button type="submit"></button>
</form>
Then in about.php:
<p id='demo'>
<?php
$demo= $_GET['demo'];
//use your variable "demo'
?>
</p>
This link should help, here.
You can use ajax or you can use load of jquery.
<script>
$(document).ready(function() {
$("#bAdd").load("about.php",function(response,status,xhr){// use if less data to load
var pTag = document.getElementById('demo').innerHTML;
alert(pTag);
});
});
</script>
<input type="hidden" id="bAdd" value="">
<head>
<script type="javascript">
function display()
{
document.getElementById("textField1").value = "abc";
}
</script>
</head>
<body>
<form id="form1" action="http://google.com">
<input id="textField1" type="text" value="0" align="right" size="13"/><br>
<input id="button1" type="button" value="1" onclick="display()">
</form>
</body>
but the value of textfield is not changing.
Any Ideas what am i doing wrong ??
try
<script type="text/javascript">
instead of
<script type="javascript">
. I believe the latter is not a valid syntax.
Removing the type attribute entirely works as well:
<script>
Your line
document.getElementById("textField1").value = "abc";
is correct, try
<head>
<script>
function display() {
document.getElementById("textField1").value = "abc";
}
</script>
</head>
<body>
<form id="form1" action="http://google.com">
<input id="textField1" type="text" size="13" value="clear" /><br>
<input type="button" onclick="display()">
</form>
</body>
Remove the type from your script tag. It's incorrect and making the browser not treat the script contents as JavaScript. Here it is not working, and here it is working (with the type="javascript" removed).
It has to be
<script type="text/javascript">
function display()
{
document.getElementById("textField1").value = "abc";
}
</script>
and not
<script type="javascript">
function display()
{
document.getElementById("textField1").value = "abc";
}
</script>
In case the text field is not having id attribute and having name attribute then,
use
document.getElementsByName("name")[0].value="ert";
getElementsByName() returns an array of objects with that specific name,that's why we are using the index 0.
There is nothing wrong with your code, it works fine in this fiddle.
I only speculate, but you could try to either delete the type attribute of the script-tag, or change it to type="text/javascript" which would be the proper type to use. If you don't specify it, the browser will consider it as JavaScript by default.
It's actually correct, but if it doesn't work try like this:
document.getElementById("textfield1").innerHtml = "ABC";
Trying to read JSON from hidden input value.
<html>
<body>
<input id="hdn" type="hidden" value='{"products":{"id":100001,name:"Ram"}}'>
<script type="text/javascript">
var jsonObj = document.getElementById('hdn').value;
alert(jsonObj);
alert(jsonObj.products.name);
</script>
</body>
</html>
You need to parse it as var jsonObj = JSON.parse(document.getElementById('hdn').value)
Note, I changed the way you were storing your JSON object, by adding the quotes to the name property. I added as both console.log and an alert... mostly because I prefer console.log, but you originally had an alert in there.
Here's the updated (working) code:
<html>
<body>
<input id="hdn" type="hidden" value='{"products":{"id":100001,"name":"Ram"}}'>
<script type="text/javascript">
var jsonObj = JSON.parse(document.getElementById('hdn').value);
console.log(jsonObj);
console.log(jsonObj.products.name);
alert(jsonObj);
alert(jsonObj.products.name);
</script>
</body>
</html>