So what i want to do is when i click on a button, it will pass this click event to another element in webpage, or you can say it will create a new click event in another element. Below is my code, it does not work, please let me know what is wrong with it, it looks make sense...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" onClick=alert("error") /></p>
<button type="button" value="submit" onClick="document.getElementById("datepicker").click()">submit </button>
</body>
</html>
Since you are using jQuery you can use this onClick handler which calls click:
$("#datepicker").click()
This is the same as $("#datepicker").trigger("click").
For a jQuery-free version check out this answer on SO.
The smallest change to fix this would be to change
onClick="document.getElementById("datepicker").click()">
to
onClick="$('#datepicker').click()">
click() is a jQuery method. Also, you had a collision between the double-quotes used for the HTML element attribute and those use for the JavaScript function argument.
To simulate an event, you could to use trigger JQuery functionnality.
$('#foo').on('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
The reason your code isn't working the way you would expect is because this line:
<button type="button" value="submit" onClick="document.getElementById("datepicker").click()">submit </button>
should be changed to:
<button type="button" value="submit" onClick="document.getElementById('datepicker').focus()">submit </button>
There are two things to notice here:
1: The "s around datepicker have been changed to 's so that they do not interfere with the quotes surrounding the onclick event.
2: The click() has been changed to focus() to activate the datepicker calendar. When the button is pressed.
Now, this fixes your issue...but I do agree with the other posts that using jQuery to access the DOM element and trigger the event is the better way to go. Since you're already doing this for the jQuery datapicker plugin via <script src="http://code.jquery.com/jquery-1.8.3.js"></script>, this should not be a problem.
Inline events are not recommended.
Or you can use what JQuery alreay made for you:
http://jqueryui.com/datepicker/#icon-trigger
It's what you are trying to achieve isn't it?
try this
document.getElementById("datapicker").addEventListener("submit", function())
Use this
jQuery("input.second").trigger("click");
Related
Using JQuery, I need to write a function, called on click for any of the two buttons (edit0, edit1).
I have the following code:
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$('[id^=edit]').click(function() {
alert("1111");
});
</script>
</head>
<body>
<button id="edit0" class="edit"> edit </button>
<button id="edit1" class="edit"> edit </button>
</body>
</html>
When I run it, nothing happens on button click.
I tried to replace the script with:
$('button[class="edit"]').click(function() {
alert('1111');
});
But the result is the same.
You can simply use CSS3 [attribute^=value] Selector to implement 'click event on all buttons with id starting with custom text' as you wish, like below.
$('button[id^="edit"]').click(function() {
alert('111');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button id="edit0" class="edit"> edit </button>
<button id="edit1" class="edit"> edit </button>
<script type="text/javascript">
$('[id^=edit]').click(function() {
alert("1111");
});
</script>
</body>
</html>
And also, put your code just before the closure </body> tag to ensure your dom is ready when the code runs.
I normally see that syntax for addressing custom attributes, try this.
$('button.edit').click(function() {
alert('1111');
});
Also put your script below your HTML. Or use a jQuery on document ready. Remember JavaScript/JQuery are executed sequentially.
This is a basic question of javascript.
I'm doing my personal webpage. When people click the button ("botón") this message should appear: "clicked!"
My html5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>omargonzalesdiaz.com</title>
<link href="website.css" rel="stylesheet"/>
<script src="script.js"></script>
</head>
This is the specific part of the button:
<input type="email" placeholder="Your email">
<input type="submit" placeholder="Send">
<button>botón</button>
My javascript code: (stored in the file: "script.js")
$("button").on("click", function() {
alert("clicked!")
});
But i click and no message appear (Chrome or Firefox).
UPDATE 1:
Apparently, i was following a Jquery tutorial.
I need to do that in basic javascript. What should i do. Code examples are welcome.
UPDATE 2: Based on suggestions, my code still does not work.
<input type="email" placeholder="Your email">
<input type="submit" placeholder="Send">
<button id="myButton">botón</button>
My new script:
document.getElementById('myButton').addEventListener('click', function(){
alert('clicked');
}), false);
document.getElementById('myButton').addEventListener('click',function(){
alert('Clicked!');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>omargonzalesdiaz.com</title>
</head>
<body>
<input type="email" placeholder="Your email">
<input type="submit" placeholder="Send">
<button id="myButton">botón</button>
</body>
</html>
Make sure to place your script right in front of the closing </body> tag, the elements can't be found if the DOM isn't loaded at the time your script gets loaded:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>omargonzalesdiaz.com</title>
<link href="website.css" rel="stylesheet"/>
</head>
<body>
<input type="email" placeholder="Your email">
<input type="submit" placeholder="Send">
<button id="myButton">botón</button>
<script src="script.js"></script>
</body>
</html>
script.js
document.getElementById('myButton').addEventListener('click',function(){
alert('Clicked!');
});
You should add an id to your button, then:
document.querySelector("#mybutton").addEventListener("click",function(){
alert("BUTTON CLICKED");
});
Where mybutton is your button ID. Try to work with IDs so your DOM query isn't getting more than one element.
Example:
http://jsfiddle.net/fthupjpd/
EDIT: Don't use jQuery for that :)
You dont have the jquery lib in your html, but you are using $, which is part of jquery (it's the facade for the api/lib)
add:
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
before you cann you click code. You need to also make sure the dom has loaded when you call you event handler, try:
$(function () {
$("button").on("click", function() {
alert("clicked!")
});
});
IF you dont want to use jQuery, give your button an id
<button id="myButton">botón</button>
then in your code
document.getElementById('myButton').addEventListener('click', function(){
alert('clicked');
}), false);
Here are the docs on native event handlers
document.getElementById('myButton').onclick=function(){
alert('clicked');
};
For a good start with JavaScript, I find W3schools very good:
http://www.w3schools.com/js/default.asp
EDIT
see Michael's answer for where to place your scripts when you need them to access the document elements. The body needs to be loaded before you can reference them on your JS code.
You have two problems.
You haven't defined $. It looks like you are trying to use the jQuery library. You need to include that in your page before the script.
You are trying to bind an event handler to all the button elements in the document while the head section is being parsed. At that point, there is no button elements. You need to move the script element to after the button elements (or use a ready or load event hander).
Here is my Jquery code.Please have a look through it and do help me?
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$("#rec").click(function() {
$("#tab1").toggle();
});
</script>
<input type="button" class="button" id="rec" value="Sample"/>
<div id="tab1">
Hello this is a sample jquery toggling function.
</div>
Just wrap your Jquery code inside $(document).ready(function(){}) as shown below :-
<script type="text/javascript">
$(document).ready(function(){
$("#rec").click(function(event) {
event.preventDefault();
$("#tab1").toggle();
});
});
</script>
Read More on $(document).ready() here.
Working Demo
It seems that there is an error while loading JQuery try this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Use $(document).ready(function(){}, to execute the js code when then document will be loaded or put your scripts just before the </body> tag.
I ll take a guess here. (I'm feeling lucky!) (update:seems i wasn't lucky but read this anyway it's usefull)
Your code does not work because you say "do something when the html element with id="rec" is clicked" and "do something to the html element with id="tab1""
My guess is, you have more than one html element with id="rec" and/or more than one html element with id="tab1" in your code.
id value of html elements must be unique across a webpage! If there are more than one html elements with the same id then the jquery selector doesn't know when to fire, and also browsers behavior can be unexpected. This may be the cause of internet explorer nagging.
You need to add compatibility meta just after <head> tag:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
Consider the code given at the end, which makes use of jQuery Mobile to enhance buttons.
The first button (original button) appears when page loads:
The second button (inserted button) is inserted by clicking the yellow box:
The problem here is, the inserted button cannot catch up the CSS styles. This scenario is very common (and not specific to jQuery Mobile) when we work with AJAX, but I have never able to find a solution or workaround for this problem.
What can I do to enhance the inserted button with CSS styles?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript">
function insert(){
$("#result").html('<input type="button" value="Inserted button"/>');
}
</script>
</head>
<body>
<form>
<p class="ui-body-e ui-corner-all" style="padding:5px" onclick="insert()">Click here to insert the button</p>
<input type="button" value="Original button" />
<div id="result">
Button not inserted yet
</div>
</form>
</body>
</html>
After you insert the button's html:
$("#result").html('<input type="button" value="Inserted button"/>');
You can call .trigger('create') on its container to invoke the jQuery-mobile renderer on its contents, so your line would look like this:
$("#result").html('<input type="button" value="Inserted button"/>').trigger('create');
jQuery mobile adds extra elements/classes to your objects. This happens onpage load.
When you insert extra buttons or other objects (list,...) the style needs to be applied again.
in this case you use after you inserted the button $(_selector_for_new_button_).button();
jQuery mobile applies the nice button style for you.
I have tried to set a item to read only, as you see in the code i have tried several way and can't get that to work. Can anyone help me with this?
<html>
<script>
//test.Attributes.Add("readonly","readonly")
//document.getElementById('testtt').setAttribute('readonly', 'readOnly');
// document.getElementByID('test').value=readOnly;
//document.getElementByID('test').readOnly = true;
// $("#test").attr("readonly", "readonly");
//$("#test").removeAttr("readonly");
//$('#test').attr('readonly', 'readonly');
$("#test").attr("readonly")
</script>
<body>
<input id="test" type="text" value="text" />
</body>
</html>
$('#test').attr('readonly', true);
working example : http://jsfiddle.net/FBUDt/
this should work for you:
$("#test").attr("readonly", "readonly");
remember that the DOM needs to be loaded before you try to find the element
you could use jquerys DOM-ready
$(function() {
$("#test").attr("readonly", "readonly");
});
what version of jquery are you using?
You should try wrapping your code into $('document').ready();
According to the documentation,
The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.
So it would be:
$('document').ready(function(){
$("#test").attr("readonly", "readonly");
});
You can't refer to an element that is created later in the document. Move the script down below the form, or place it in a document.ready block. Also, you should use $.prop() in jQuery 1.6+
$(function(){
$('#test').prop('readonly', true);
});
I would go with
document.getElementById('test').setAttribute('readonly', 'readOnly');
But that is not the issue. The position of your script is where it goes wrong. You are trying to change element which does not exist.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>testcase</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<div class="some container">
<input id="test" type="text" value="text" />
</div>
<script type="text/javascript" charset="utf-8">
document.getElementById('test').setAttribute('readonly', 'readOnly');
</script>
</body>
</html>
If you place your scripts right befor the closing </body> tag , then it is executes as soon as DOM has been built.
And please. Stop using JS libraries to do the most basic things.
you are missing
$(document).ready(function() {
$('#test').attr('readonly', 'readonly');
});
sample
http://fiddle.jshell.net/Pe4J5/