I add some button by using html(), and I want to write a click funtion for them. however, it does not work. and I don't know what is wrong with it.
the html code after using html():
<input type="button" id="save_1" value="a1" />
<input type="button" id="save_2" value="a2" />
<input type="button" id="save_3" value="a3" />
and my selector is:
$('input[id^=save_]').click(function() {...});
$('input').on('click', 'id^=save_', function() {...});
they all don't work.
could you help me? thank you.
start from document, input also isn't there when dom is created:
$(document).on('click', 'input[id^=save_]', function(){
alert('hi');
});
jsfiddle LINK
You have to bind the click event after your .html() function else it won't work.
Because if you bind click event before .html() function it did not get any of the input element (created dynamically) on which you want to bind the click event
Try below snippet: :-)
$(document).ready(function(){
$('input[id^=save_]').on('click',function() {
alert("Event Fired");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="button" id="save_1" value="a1" />
<input type="button" id="save_2" value="a2" />
<input type="button" id="save_3" value="a3" />
If you want to perform some operation on click event of all button then add one common class for e.g: class="btn" in all input type button on which you want to perform click event, then use following JS code::
$(".btn").on("click",function(){
$(this).attr("id");
// your operation
});
$(this) will be the button which you have clicked. Make sure this code is written inside document ready function.
Related
I can't figure out how to focus on the first form element inside a span when the span is clicked. I've included my code, I had also messed around with 'closest' but had no luck.
<form>
<span>
<input id="content" type="text">
<label for="content">Content</label>
</span>
</form>
$('span').click(function() {
$(this).find('input').focus()
});
Any help is appreciated.
Before answering your actual question: there is a way to achieve what you're trying to do which doesn't even require any JavaScript.
If you wrap your input field in the label tag, clicking the label will automatically give focus to the field.
<form>
<label>
Content
<input id="content" name="content" type="text">
</label>
</form>
If you insist on doing it through JavaScript/jQuery, you'll have to make sure you only attach the click handler after the DOM is ready:
$(document).ready(function () { // Or equivalent: $(function() { ... });
$('span').click(function () {
$(this).find('input:first').focus(); // :first makes sure only the first input found is selected
});
});
why not use the label to trigger this functionality
the span will only cover the label and input so if i understand correctly you want the focus to be set on the input even when the user clicks the lable which can be achieved like so:
<form>
<span>
<input name="content" id="content" type="text">
<label for="content">Content</label>
</span>
</form>
But if you are trying to do something else then:
$(document).ready(function(){
$('span').click(function() {
$(this).find('input:first').focus();
});
});
Make sure your js is called after the DOM is loaded
<script type="text/javascript">
$(function(){
$('span').click(function() {
$(this).find('input').focus()
});
});
</script>
I was wondering if there was a way for text inside a input box (pre loaded using value="") to highlight when the user clicks on it?
input type='text' name='url' id='url' value='http://www.a-link.com/' />
EDIT
I need the text to he highlighted so the user can copy it.
<input type="text" name="textbox" value="Test" onclick="this.select()" />
You could attach javascript to the click event to select the text like so:
$(document).ready( function() {
$('#id').click( function( event_details ) {
$(this).select();
});
});
There is a potential issue where the user could be trying to click at a later point in the text to correct a typing mistake and end up selecting the whole thing. A better way would be to trigger this when the input gets focus from the user. you'd replace .click with .focus in the example above.
jQuery event documentation:
http://api.jquery.com/category/events/
Add the following onclick attribute to make the entire <input> automatically highlight when the user clicks on it:
<input type="text" value="Test1" onclick="this.select()" />
Alternatively, if you want the user to be able to change the selection after the initial click, change the onclick attribute to an onfocus attribute. This will also highlight the entire <input> when the user clicks on it, but it allows them to change the highlighted part manually afterwards:
<input type="text" value="Test2" onfocus="this.select()" />
Here is an example of both inputs in action.
You want to use focus property. Like this: http://jsfiddle.net/sCuNs/
html
<p><input type="text" size="40"></p>
css
input:focus, textarea:focus{
background-color: green;
}
Do you mean to select the text?
Use onclick event to fire the code:
document.getElementById("target-input-id").select();
$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});
$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});
This should do it:
<input type='text' name='url' id='url' onclick="this.select()" value='http://www.a-link.com/' />
<input id="inputField" type="text" size="40" value="text to be highlighted"></p>
document.getElementById('inputField').focus();
The default behavior for focus selects the text in the input field. I was looking for a solution not to do that when I found this.
I have 3 buttons in my form.
All the button actions goes to a same page after clicking it depending upon what button is clicked.
My query is: The name of the buttons are 'add','edit' and 'remove'
When the 'add' button is clicked, using js I need to get the value of that button and similarly for the other two buttons....
Can you please help?
<form>
<script type="text/javascript">
function doAction(value)
{
// Don't really have anything to set...just show the value
alert(value);
}
</script>
<input type="button" value="Add" onclick="doAction(this.value)">
<input type="button" value="Edit" onclick="doAction(this.value)">
<input type="button" value="Remove" onclick="doAction(this.value)">
</form>
There are other ways that involve not even passing the button's value, but they're not as compatible across browsers (IE uses a slightly different event model).
Of course, if you can get by without doing it in Javascript, and can just pass the clicked button to the server, it gets even easier than that...
<form>
<input type="submit" name="action" value="Add">
<input type="submit" name="action" value="Edit">
<input type="submit" name="action" value="Remove">
</form>
and whichever button you click gets put into the url as action=Add or whatever.
What about:
var buttonValue = document.getElementById('IdOfYourButton').value
have you tried: document.getElementById('button_id').value in the js function that you'll call when the button is clicked?
There is target property which you can use.It targets the element which caused the event to occur.
button.addEventListener('click',function(e){
console.log(e.target.value);
});
may i know how to use jquery to lock all the <input type="submit/button" .. and only allow submit when page is fully rendered?
Because of the use case, I might approach it differently. Instead of actually disabling the buttons, I would just not allow the submit action to work until the page is loaded. This doesn't require any changes to the existing HTML to work, and your pages won't be rendered useless when JS is disabled:
<script>
// Keep all submit buttons from working by returning false from onclick handlers
$('input:submit').live('click', function () {
return false;
});
// After everything loads, remove the the "live" restriction via "die"
$(window).load(function(){
$('input:submit').die();
});
</script>
Update: Forgot to mention to put both this and the script tag to load the jQuery library in your <head> if you want this solution to work. (Thanks for reminding me Mike Sherov).
By default, you have your submit buttons have the disabled attribute set to true:
<input type="submit" disabled="disabled" />
Then, once the page loads, you can do:
$('input').removeAttr('disabled');
jQuery
$(document).ready(function(){
$(":button,:submit").removeAttr("disabled");
});
HTML
<input type="button" id="button1" value="Button 1" disabled="disabled">
<input type="button" id="button2" value="Button 2" disabled="disabled">
<input type="button" id="button3" value="Button 3" disabled="disabled">
<input type="submit" id="submit" value="Submit" disabled="disabled">
<input id="form-submit" type="submit" disabled="disabled" value="Submit" />
$(document).ready(function() {
$("#form-submit").removeAttr('disabled');
});
Couldn't you do something like
window.onsubmit=function(){return false;}
window.onload=function(){window.onsubmit='';}
I am not sure how the event bubbling would work with an onsubmit. I'd have to test it. Also, I don't know jquery so I'm not sure how to integrate it.
I have a form with checkboxes and then text to the right of the checkbox. There are jquery events attached to the click events of the the checkbox. What I want is to allow the user to click on the label or the checkbox and have the checkbox check/uncheck and the event to fire. Below is a simplified version of what I'm trying to do (DON'T run the code as below as it creates an endless loop).
<script>
$(document).ready(function() {
$("form p").click(function() {
$(this).find("input").click();
});
$("form input").click(function() {
alert("clicked");
});
});
</script>
<form>
<p> <input type="checkbox" name="checker" value="1" /> Click anywhere</p>
<p> <input type="checkbox" name="checker2" value="2" /> Click anywhere</p>
</form>
Use the LABEL tag: http://www.w3schools.com/tags/tag_label.asp
clicking on any <input> tag triggers the click event of <p> tag (because <input> tag is inside the <p> tag) which then triggers the click event of <input> tag leading to an endless loop.
You can prevent the 'endless loop' using jQuery's event.stopPropagation method.