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>
Related
My code works when I write the JS in HTML like so:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type = "submit" value = "Save">
<script>
$("#submitButton").on("click", function() {
console.log("result!");
});
</script>
</body>
but when I split it out into it's own .js file, the JS file doesn't recognise the JQuery '$' sign. This is how it currently looks in both HTML and JS (I added the .JS source to the HTML file):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
**<script type="text/javascript" src="addressBook.js"></script>**
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type = "submit" value = "Save">
</body>
and in the addressBook.js file:
$("#submitButton").on("click", function() {
console.log("omg, you clicked me!");
I get the following error logged to the console when i click the button:
$("#submitButton").on("click", function() {
^
ReferenceError: $ is not defined
Any help would be appreciated!
Thanks
Wat selfagency said + put the script tag before the end of the body.
html file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type="submit" value="Save" />
<script type="text/javascript" src="addressBook.js"></script>
</body>
</html>
addressbook.js
$('#submitButton').on('click', function() {
console.log('result!');
});
The reason why the script tag in the head in this case doesn't work is because the button did not yet exist in the DOM when the addressBook script was run. Described in more detail here.
I don't think that you need to add the script before the end of the body.
It works after I created addressBook.js and change the jquery
$('#submitButton').on('click', function() {
console.log("omg, you clicked me!");
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script type="text/javascript" src="addressBook.js"></script>
<title>Address Book</title>
</head>
<body>
<input id="submitButton" type="submit" value="Save" />
</body>
</html>
<script>
$("#submitButton").on("click", function() {
console.log("result!");
</script>
That is not proper syntax. It should be:
<script>
$(document).ready(function () {
$("#submitButton").on("click", function() {
console.log("result!");
});
});
</script>
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="dependsOn-1.0.0.min.js"></script>
<script>
$(document).ready(function) {
$('#basicTest .subject').dependsOn({
'#basicTest input[type="checkbox"]': {
checked: true
}
});
});
</script
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="basicTest">
<label>
<input type="checkbox"> Check me
</label>
<input type="text" class="subject">
</form>
</body>
</html>
I am actually trying to implement the basic example which is after click on the "check me" a input box gets displayed. By using the depends on plugin is is not working. These are the files. I placed the script in between the html and head tags. Any suggestions are welcome!
I want to use bootstrap tag input event like this code but event don't trigger.
$('#lastStep')
.find('#input')
// Revalidate the cities field when it is changed
.change(function (e) {
$('#lastStep').formValidation('revalidateField', 'cities');
})
.end()
.formValidation({
framework: 'bootstrap',
excluded: ':disabled',
})
$("#input").on('itemRemoved', function (event) {
alert(33)
});
How can resolved this?
Without form validation it works perfect
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap-tagsinput.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link href="bootstrap-tagsinput.css" rel="stylesheet" type="text/css">
</head>
<body>
<script>
$(document).ready(function () {
$("#input").on('itemRemoved', function (event) {
alert(33)
});
});
</script>
<div id="lastStep">
<input type="text" id="input" data-role="tagsinput" value="Amsterdam,Washington,Sydney,Beijing,Cairo">
</div>
</body>
</html>
I'm trying to do the following:
- I have 2 pages (page 1 with input fields & page 2 where the entered input should display)
- I need to get all that was typed from the first input field, and put the results inside the tag "content" of the 2nd page.
1º Page Input :
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Page 1 - Input</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script>
function submit() {
var code = $('textarea[name=message]').val(); //Input Code HTML
$("#iframeId").contents().find("body").html($("<div class='content'></div>").append(code));
}
</script>
</head>
<body>
<h2>Input</h2>
<textarea name="message" id="input" rows="10" cols="100"></textarea>
<input type="button" value="Submit" onclick="submit();" />
<iframe id="iframeId" name="iframeId" src="layout.html"></iframe>
<div id="test">
Text
</div>
</body>
</html>
2º Page Layout :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Page 2 - Layout</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
</head>
<body>
<div class="header"></div>
<div class="content"></div>
<div class="sidebar"></div>
<div class="foot"></div>
</body>
</html>
THANKS!
This should work if both files are having the same origin:
<script>
function submit() {
var code = $('textarea[name=message]').val(); //Input Code HTML
$('#iframeId').contents().find('.content').text(code);
}
</script>
You were almost there :)
UPDATE:
To insert on submit:
<script type="text/javascript">
$('#iframeId').load(function(){
$('input[type="button"]').on('click',function(){
$('#iframeId').contents().find('.content').html($('textarea[name=message]').val());
});
});
</script>
To insert on type:
<script type="text/javascript">
$('#iframeId').load(function(){
$('textarea[name=message]').on('input',function(){
$('#iframeId').contents().find('.content').html($(this).val());
});
});
</script>
I have a text box for searching. For some reason, .blur() will not work on my computer. I created a test file to test it, and it still won't work:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$('#search').blur(function() {
alert('hello');
});
</script>
</head>
<body>
<input id="search" value="hello" type="text" />
</body>
</html>
Like Dave said, try this:
$(document).ready(function() {
$('#search').blur(function() {
alert('hello');
});
});
Maybe just use a non-jquery way of doing things?
document.getElementById("search").addEventListener('blur',function(){
document.getElementById("search").value = "DEFAULT_VALUE";
});