Ok, i have input object, when it is changed it adds another one..
also there is delete (izdzēst) link when you click on, it should remove last input field..
how to that? (the function for delete is dzest )
I guess the problem is in $(this)?
<input name="userfile[]" type="file" size=40 />
Izdzēst<br />
<script>
function dzest(){
$(this).closest('input').remove();
}
$("input[type=file]").change(function() {
$('<input name="userfile[]" type="file" />').appendTo('body');
$('Izdzēst<br/>').appendTo('body');
$('.link').css('display','inline');
});
</script>
this in your code refers to the window object and not the anchor.
closest means the closest element parent, input can never be a parent, so you probably meant prev()
Fixed Code
$('Izdzēst<br/>').appendTo('body');
<a href="#" onclick="dzest(this);return false"
And the function:
function dzest(obj){
$(obj).prev('input').remove();
}
You can also use unobtrusive event handlers & delegate events.
$('body').on('click', '.link', function(){
$(this).prev('input').remove();
});
Try doing it like this instead and lose the onclick attribute.
$('a[name=dzest]').on('click', function() {
$(this).closest('input').remove();
});
Or add an ID to the delete to simplify the selector.
Related
Thanks in advance for helping
Inside a function in a script, I'm trying to get the value of a button when it's clicked.
I just can't figure out the usage of "this" in that case.
There are a certain number of buttons in the page and several functions attached to them so I don't want to do jQuery('.A1').val() in the function each time a button is clicked.
I want the function to detect which button is clicked and its value
<script>
jQuery(document).ready(function(){
$.fn.dosomething = function(){
var currentval = $(this).val();
console.log(currentval);
};
});
</script>
<INPUT type="button" class="A1" value="blabla" onclick="jQuery().dosomething()"/>
The console returns 'undefined'
Thank you for your help
Dom
You need to pass current object this to the function like
<INPUT type="button"
class="A1" value="blabla"
onclick="jQuery(this).dosomething()"/>
DEMO
EDIT
Why are you using inline onclick? You can bind event to element also like
$(".A1").on("click", function () {
jQuery(this).dosomething();
})
DEMO 2
Try using the jquery click function rather than the on click inline HTML call.
http://api.jquery.com/click/
With $.fn.dosomething = function(), you have defined a plugin that can be called on a jquery object, but you pass nothing into jquery to serve as this.
Try:
onclick="jQuery(this).dosomething()"
Try this,
We can bind the function on particualr event for particular element.
jQuery(document).ready(function(){
$.fn.dosomething = function(cthis){
var currentval = $(cthis).val();
alert(currentval);
console.log(currentval);
};
$( "#myId" ).bind( "click", function() {
jQuery().dosomething(this);
})
});
</script>
<INPUT id="myId" type="button" class="A1" value="blabla" />
Demo
I think, the this inside the $.fn.dosomething refers itself rather than clicked button.
I have a form as follows:
<form>
<label for="input">Input:</label>
<input type="text" id="input" maxlength="3"></input>
<button type="button" id="lock" onMouseDown="toggleInput()"></button>
</form>
And javascript code:
function toggleInput(){
if ($("#input").disabled){
$("#input").disabled = false;
}
else {
$("#input").disabled = true;
};
}
What I basically want to do is to check what state (enabled/disabled) the textbox is in, and then toggle the state accordingly. I don't know if the javascript portion even uses the correct syntax to check if the textbox is disabled, but it's what I could think of.
Thanks in advance!
EDIT: Reason as to why I've chosen to use onmousedown instead of onclick to execute the event with the button:
I have chosen to use onmousedown instead of onclick as it makes the app I'm building feel less clunky due to the presence of this feature with onclick: When you click on a button and then drag the cursor away from the button while holding the mouse button down, and subsequently lift your finger off the mouse button when the cursor is in an area away from the button on the webpage, the event will not be executed. Hence, I've chosen to use onmousedown as this is overcome.
Use .prop(), Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element
$("#input").prop('disabled',!$("#input").prop('disabled'))
DEMO
I am not sure why you are using onMouseDown. Use click instead
$("#lock").on("click", function() {
$("#input").prop('disabled',!$("#input").prop('disabled'))
});
DEMO with click
To do it with jQuery try this:
$("#input").prop("disabled", function(i, v) { return !v; });
Your existing code doesn't work because DOM elements have a .disabled property, but jQuery objects do not.
I'm not sure why you're using onmousedown instead of onclick for the button, but either way if you're going to use jQuery I'd recommend removing the inline event attribute in favour of binding the handler with jQuery:
$("#lock").on("click", function() {
$("#input").prop("disabled", function(i, v) { return !v; });
});
(You'd need to include that code either in a script block at the end of the body or in a document ready handler.)
Demo: http://jsfiddle.net/a7f8v/
You should append the event handler with jQuery instead of an onMouseDown event. The syntax could look like this:
<label for="input">Input:</label>
<input type="text" id="input" maxlength="3"></input>
<button type="button" id="lock"></button>
JavaScript:
$(document).ready(function() {
$("#lock").click(function() {
var input = $("#input");
input.prop('disabled',!input.is(':disabled'))
});
});
Example
I am having some buttons which are created dynamically based on the number of phone numbers present.Suppose I have 3 names in DB so there will be three buttons.So when I click on the 1st button then it should give the value of first button,if 2nd is clicked then 2nd button value should display.This is simple jsfiddle which describes about my requirement.I thought of assigning the each button a different id which should be the phone number.In the jsfiddle when i am clicking on a particular button then alert pops but it does not give any value.
i did like this
$('.btn').click(function(){
var number1 = $('#s2').val();
alert(number1);
});
You have to use event delegation using jQuery's on() method. From its documentation:
When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.
In your case, you'll need to delegate the .btn click event to an ancestor which exists prior to that element being dynamically added to the page:
$('body').on('click', '.btn', function() {
var number1 = $('#s2').val();
alert(number1);
});
The closer you get to the .btn element, the better, so unless your document's body is the nearest non-dynamic ancestor then you'll want to change this to something a bit closer.
Edit: Further question in comments:
can I get the ID of each button
To get the id of each button, simply use this.id:
$('body').on('click', '.btn', function() {
var id = this.id;
alert(id);
});
Edit 2: Further question in comments
So as I said,ID are numbers.So if i click button1 then it will print s1 in the inputfield.Can you please tell me how to do?
As your input has an id of "number", you can simply use jQuery's .val() method to set the value of the input to the id of the clicked button:
$('body').on('click', '.btn', function(){
$('#number').val(this.id);
});
Working JSFiddle demo.
$(document).on('click', '.btn', function(){
alert($(this).val());
});
Should work. The "on" is a way of working with dynamically placed elements.
Put value attribute in button input
<button type="button" class="btn" value="test2" >test</button>
<button type="button" class="btn" value="test1" id="s1">test</button>
<button type="button" class="btn" value="test" id="s2">test</button>
And then use script
$('.btn').on('click', function() {
var number = $('#s2').val();//get value
});
If you want to get the id of the clicked button you should use attr:
$('.btn').click(function(){
var number1 = $('#s2').attr('id');
alert(number1);
});
When I change the id of a button I cannot find the new id with on.("click"). The function console.log() does detect that it's changed but I cannot detect it with the on() function.
HTML:
<form id="formName" action="" method="post">
<input type="submit" id="submitBtn" value="Submit" />
</form>
<button id="change">Change</button>
JS:
$("#change").on("click", function(){
$("#submitBtn").attr("id", "NewBtn");
});
$("#formName").submit(function(e){
e.preventDefault();
});
$("#NewBtn").on("click", function(){
alert("Hello");
});
So I need it to alert "Hello" after I have clicked on change. It does change the id I checked that with inspect element.
Fiddle: http://jsfiddle.net/WvbXX/
Change
$("#NewBtn").on("click", function(){
to
$(document).on("click", "#NewBtn", function(){
The reason for this is that you're wanting to use the delegate form of .on(). This call is a little different in that it takes a "string" as the second parameter. That string is the selector for your "dynamic" element while the main selector need either be a parent container (not created dynamically) or the document itself.
jsFiddle
you are setting onclick event for newBtn on load of page for the first time but unfortunately newBtn not available that time. hence after changing the id it will not trigger onclick function for newBtn.
you can do one thing to make it work, set onclick event for newBtn inside the same function where you are changing the id like below.
$("#change").on("click", function(){
$("#submitBtn").attr("id", "NewBtn");
// set on click event for new button
$("#NewBtn").on("click", function(){
alert("Hello");
});
});
.attr() function does not have a callback and thus it cannot be checked unless you setup an interval using setInterval but the function itself executes pretty soon so you are not going to need it.
For solving the problem in hand event delegation proposed by tymeJV is the right way to do it.
I want to clear an input field when it's clicked, but only the first time you click. With jQuery, you can achieve it like this: putting the following snippet anywhere in the document (assuming the element with id=inputf has already been loaded):
$('#inputf').one("click", function() {
$(this).val("");
});
As you can see in the above snippet, the input field must have id attribute with value inputf.
But is there a way to move that snippet to the onclick attribute of the input field, like
<input type="text" onclick="$(this)....val('')" />
? It looks like I can't use the function .one(), because that function needs a string containing one or more JavaScript event types. But I just want .one() to be executed each time it is called, without specifying one or more event types.
Only posting this since you requested, I don't advocate inline handlers.
<input type="text" onclick="this.onclick = null; this.value = ''; " />
http://jsfiddle.net/aUmNK/
<input type="text" onclick="if(flagCount === 0){this.value='';flagCount++;}" />
declare the var flagCount = 0 as global variable in the script tag in head.
If you wanted to do it for all text input fields, you could do:
$("input[type=text]").each(function(){
$(this).one("click", function() {$(this).val = "";});
});
...or you can refine the selector to get every input field in a particular div for example:
$("#divId input[type=text]")
You don't need jQuery to do a event like one on the element tag. Just do something like this:
<input onclick="function(event) { /* do something */ this.onclick = function(){}; }" />
Your function will be executed only the first time, then a new void function will be attached to the onclick event callback.
You can just write your own simple jQuery plugin:
(function( $ ) {
$.fn.clearOnce = function() {
this.one("click", function() {
$(this).val("");
});
};
})( jQuery );
After this you can:
<input type="text" onclick="$(this).clearOnce();" />
Wrote in 3 min, not tested ;-)