I've checked a number of related questions/answers on SO but can't find a solution. I have the following code:
<html>
<head>
<title>Admin</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="#">
<script src="jquery-3.3.1.js"> </script>
</head>
<body>
<div>Test area</div>
<br/>
<script>
document.write('<button onclick="updateFunc()">TEST</button>');
document.write('<input type="text" id="mytext">');
function updateFunc()
{
document.write($('mytext').val());
}
</script>
</body>
</html>
The output When I click the TEST button is:
undefined
Don't know what I'm doing wrong here. I've tried moving things around, e.g. order of javascript, taken the HTML out into the HTML body rather than "printing" it in the JS, but still I keep getting undefined. I inspected the element and I get:
<input type="text" id="mytext">
in the browser.
Change to $('#mytext').val() since it is ID (#) selector.
<script>
document.write('<button onclick="updateFunc()">TEST</button>');
document.write('<input type="text" id="mytext">');
function updateFunc()
{
document.write($('#mytext').val());
}
</script>
You forgot the "#" in your jQuery selector.
function updateFunc()
{
document.write($('#mytext').val());
}
Related
layerAuthManage.jsp
<input type="button" value="일괄선택" onclick="chk_all()">
spatialInfoGuide.js
function chk_all(){
$('[name=chk]').prop('checked', true);
}
error message:
Uncaught ReferenceError: chk_all is not defined
at HTMLInputElement.onclick (layerAuthManage.do:123)
may be you did not add jquery, thats why showing this error.
you can use below solution, i think it will help. if still error then share your code to see.
<html>
<html lang="en">
<head>
<title>Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="button" value="일괄선택" onclick="chk_all()">
<script>
function chk_all(){
$('[name=chk]').prop('checked', true);
}
</script>
</body>
</html>
This is the simple code I run hoping to get control over html5 validation but the browser says setCustomvalidity is not a function. what am I doing wrong?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<input type='text' id='tocheck' />
<script>
$("#tocheck").click(function () {
var $this = $(this);
$this.setCustomValidity("slkdjf");
});
</script>
</body>
</html>
jQuery does not have the setCustomValidity function, but the actual DOM element does. The jQuery selector always returns an Array, so you can use the zero index to get the actual DOM element or you can just use this (not $(this)) to get the DOM element upon which you can set the custom validity.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<form>
<input type='text' id='tocheck'/>
<button>
Submit
</button>
</form>
<script>
$("#tocheck").click(function(){
this.setCustomValidity("slkdjf");
});
</script>
</body>
try to
$this[0].setCustomValidity("slkdjf");
And html
<form>
<input type="text" id="tocheck">
<button type="submit">Button</button>
</form>
You can simply do this.setCustomValidity("slkdjf"); this is the DOM object, whereas $(this) is the jQuery wrapper around same.
$("#tocheck").click(function(){
this.setCustomValidity("slkdjf");
$( "<p>slkdjf</p>" ).insertAfter( this );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='tocheck'/>
you can use syntax like
$('#id**^**.class')[0].setCustomValidity('**some notification string ...**');
I want to change the meta tag content i.e. refresh rate and url dynamically using javascript. Using a button to enable javascript function. Tried 3 alternatives but not working. Please help.
Thanks,Amresh
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="refresh" name="description" id="mymetatag"
content="5;URL=http://localhost:6985/ChartJSDemo/Is_Mainpage.html">
<meta charset="ISO-8859-1">
<title>Processing Details</title>
<link rel="stylesheet" type="text/css" href="css/MF_job_failTable.css">
</head>
<body>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
<!--document.querySelector('meta[name="description"]').setAttribute("content","5;URL=http://google.co.in");-->
<!--document.getElementById("mymetatag").setAttribute("content", "5;URL=http://google.co.in");-->
var m = document.createElement('meta');
m.name = 'description';
m.id = 'mymetatag';
m.content = '5;URL=http://google.co.in';
m.HTTP-EQUIV= 'refresh';
document.head.appendChild(m);
}
</script>
This works for me.
The issue could have been that you tried a first code which did not work and you commented the code with HTML comments <!-- [...] -->instead of Javascript comments: // [...] or /** [...] */.
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="refresh" name="description" id="mymetatag" content="5;URL=http://localhost:6985/ChartJSDemo/Is_Mainpage.html">
<meta charset="ISO-8859-1">
<title>Processing Details</title>
<link rel="stylesheet" type="text/css" href="css/MF_job_failTable.css">
</head>
<body>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
document.getElementById("mymetatag").setAttribute("content", "5;URL=http://google.co.in");
}
</script>
</body>
</html>
I looks like you misuse the functionality of metatags, JS doesn't save the state between requests. And, BTW, you can do reload/redirect using the javascript itself.
I have a div in which contains a td class='small' I want to use jQuery to remove this.
<td class="small" style="padding:8px 0;color:#999;vertical-align:middle;">
A bunch of gibberish...
</td>
In my main code I am using jQuery to extract a div from a file then replace the div in the main code with the extracted.
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta http-equiv="content-language" content="en">
<meta name="viewport" content="width=500" />
<title>Rooster Teeth News</title>
<link rel="stylesheet" type="text/css" href="site/wwwRand1.css">
<?php
include( 'site/simple_html_dom.php');
$html=file_get_html( 'http://roosterteeth.com/home.php');
$html->save('site/result.htm')
?>
<script type="text/javascript" src="site/jquery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#postsArea').load('site/result.htm #postsArea');
});
</script>
</head>
<body>
<div id="wrap">
<div id="postsArea"></div>
</div>
The problem I am having is that I can only remove the 'td' after the 'div' has been replaced. If anyone could help me I would really appreciate it. Thank you.
The load() method has a callback function so you could use:
$('#postsArea').load('site/result.htm', function(){
$('#postsArea td.small').removeClass('small')
});
I have some code,when I click the button it show me some message.It works on IE good,but dont works on ff or chrome,somebody tell why?Sorry for my poor english.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> New Document </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(function(){
$("#test").bind("input propertychange",function(){
alert("abc");
});
});
function ff()
{
document.getElementById('test').value=Math.random();
</script>
</head>
<body>
<input id="test"></input>
<input id='btn' value="tt" type="button" onclick="ff()" />
</body>
</html>
First off, you're missing the closing bracket for the ff function. Secondly the event you should be listening for on the input field is the "change" event, that too only fires off when the text field has focus and you change its value and then click elsewhere in the document (i.e. it loses focus or is blurred) then the change event is fired.
What you can do instead is either listen for other events such as keyup etc. or trigger a custom change event. Here's the modified/corrected code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> New Document </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('#test').on('change', function() {
alert("abc");
});
$('#btn').on('click', function() {
$('#test').val(Math.random()).trigger('change');
});
});
</script>
</head>
<body>
<input id="test" value="" />
<input id="btn" value="tt" type="button" />
</body>
</html>
And try to keep away from inline javascript calls such as "onclick= ..." in HTML. Whole point is to separate JS, CSS and HTML.
There are some errors in the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> New Document </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(function () {
$('#btn').on('click', function () {
$('#test').val(Math.random());
$('#test').trigger('change');
}); //missing ending }
$('#test').bind("change paste keyup", function () { // change to a proper listener
alert("abc");
});
});
</script>
</head>
<body>
<input id="test" type="text" value="" />
<!-- ^ Specify a "type" -->
<input id='btn' value="tt" type="button" />
</body>
</html>