I have a table and when I click in a row the data of this row is copy to some input text. I have an empty select combobox and this will fill with one thing or another depend the content of the input. I'm ussing the event onchange for do this but it doesn't work because I'm not writing in the input. I put here the relevant code.
<td><input type="text" id="club" value="" onchange="load()"/></td>
function load()
{
var club=document.getElementById("club").value;
alert(club);
}
Pretty and straight forward way of doing this is to use bindings as in some reactive libraries like knockoutjs.
A quick hack is to call your load function in the click handler for a row after all your processing. ( copying text n all).
Firstly, the script in question has to be withing tags if you're defining it inline with html (which I don't recommend)
secondly, you'll need to prepend your function call with javascript: e.g.
onchange="javascript:load()"
I would recommend looking into event listeners or jquery instead, however.
document.getElementById("club").onchange();
Should do the trick. You can fire these events manually!
Related
I have to do automated tests on a website and I want to use CasperJS to learn. For proprietary reasons I can not give too much code.
Here is the example of the input that I am trying to fill:
<input data-bind="value: firstname, valueUpdate: ['blur'], css: {valid:(firstname.isValid() )} " title="" class="valid" aria-required="true" id="firstname" name="firstname">
As you can see, this input is not of type text and has no value attribute. Therefore, I can not use the casper.fill() method. Furthermore, if I enter the web page scope using evaluate() and change the input value using document.querySelector, the change will not be permanent as of the events attached to the text change on the input will not be triggered.
Here is my code:
this.waitForSelector('#memberTitle', function then(){
var testname = 'thisIsNotPermanent';
this.evaluate(function(testname){
document.querySelector('#firstname').value = testname;
}, testname);
});
If I capture the screen right after, I will see my text written in the input box. However, if I wait 500ms and take another capture, the text is gone as, I suppose, the events are triggered or just cleaned because it actually failed to trigger correctly.
The events attached to the input are of Blur, Change and Keypress.
Using CasperJS, how could I go to the lowest level possible to mimic a user using his keyboard and fully use the website's functionalities already in place?
The whole point of those tests are to work with what is in place. The idea is to not have to manually go through the JavaScript of the web site.
That's exactly what the casper.sendKeys(selector, keys) function is for which will send native keypresses and (hopefully) trigger the events on that text element:
this.waitForSelector('#memberTitle', function then(){
var testname = 'thisIsNotPermanent';
this.sendKeys('#firstname', testname);
}).wait(20, function(){
this.capture('screenshot.png');
});
<input> elements without a type attribute default to Text type.
This answer is here to complete the question from another angle. As Artjom B. mentionned, the correct way to fill an input and to trigger its events is by using the sendKeys() function. However, if you ever have a case, like mine, where the events will not trigger or will take a certain amount of time, know that you can trigger those manually.
If you use the firefox inspector tool, you will see that your input or tag will have an event attached to it marked as ev. If you select it, you will have a breakdown of all the events, in order, that are triggered.
You can see that the jQuery click() event will be called. In casperjs, from the evaluate scope you can now do this :
this.evaluate(function(){
$(".discard-answer").click();
})
From there, you can chain jQuery events, like in my case where I had to .blur().change().click();
It is important to know if the event is jQuery or not.
Hope this helps.
I realize there is a onchange event attribute for the purpose of detecting a change in a form and performing a certain javascript function. However, this requires the user to click outside of the form field, making it very similar to onblur.
Is there actually a way to perform a function when a form changes, without having to wait for the user to click outside of the form?
I know you can use JavaScript timeouts to check the form every few milliseconds, but I would prefer a solution without them. Also, I am not limited to just form elements; I'm okay with using contenteditable divs.
I don't think a code is necessary, but I can add a sample code of what I mean if needed.
jQuery has powerful functions that deliver what you're after, but if you just need to run a simple script, you can use functions such as onkeydown and onkeypress.
<input type="text" onkeydown="myFunction()">
Sources:
W3 Schools - OnKeyPress
W3 Schools - OnKeyDown
If I were to do this myself I would listen to the change event on the inputs of a form. Personally I think this would be easier for you to do using jQuery.
$('form input, form select').change(function() {
console.log('form has been changed');
});
If you want to ensure you catch when any type of input in your form changes (ie. checkbox, select lists, radio buttons etc and not just text) then you could use the following snippet I put together (assuming you're using jQuery)
$('form input[type=text]').keyup(formUpdated);
$('form input[type!=text], form select').change(formUpdated);
function formUpdated() {
alert('input changed');
}
You can see it in action here.
This is all just a nice way of removing the need for this:
<input type="text" onkeyup="formUpdated();">
<select onchange="formUpdated();">
</select>
<input type="radio" onchange="formUpdated();">
<input type="checkbox" onchange="formUpdated();">
I am writing a jQuery script that needs to work with an existing unchangeable plugin. This plugin listens for text being typed into an <input type='text'> and then processes the result. I can't alter this. My script is setting the text of the input via $('#display).val(newValue); as a jQueryUI Slider is dragged. I need the plugin to recognize this value as being typed by the user so that it processes the newValue as the slider is dragged.
Can anyone point me in the write direction for this?
You probably need to 'trigger' the keyup (or keypressed?) event so that the event handler is fired.
Here is one (slightly dirty) way to do it:
var e = jQuery.Event("keyup");
e.which = 50; // # Some key code value
$("#display").trigger(e);
Note that the plugin may be looking for particular keys, and I may have guessed the event wrong.
The more sophisticated way to do it would be to track down the plugin's event handler, and then invoke it directly. FireBug may help you find it by step-through debugging. Otherwise, you can use jquery to start inspecting the input's event handlers.
var events = $('#display').data("events");
jQuery.each(events, function(key, handlerObj) {
console.log(handlerObj); // alert(handlerObj);
});
Once you've found the relevant handler, you can invoke it directly.
HTH
You have to put an Onchange listener to the text field and trigger the necessary function to listen to onchange values of the user. eg:
function func(){.....put your logic.....}
If you are looking at reading value from a text field on changing a slider, then you have to put the necessary function on the slider control.
I'm working with an existing system set up by someone else (no longer here). In this system, clicking on the text within a special <span> will trigger a js function which will replace the text with an <input> field. The text which was there is assigned as the value of the <input> element.
An onblur event is assigned to this new <input> field. This calls a function which updates the data in the database via an AJAX call. As part of this action, the <input> field is replaced with the new value (same <span> contents), and the onclick event is re-assigned. In this way, you can click on the text, change it, click elsewhere, and it is automatically updated in the database. Then you can do it again as it sets up the original events dynamically with each update.
It is in-between the first event and the second that I want access to that <input> field. I want to add a jquery .datepicker() to it.
How would I go about calling .datepicker() on a dynamically-created element?
No, there isn't an event similar to an onCreate. The closest you can find is jQuery's .live(). This allows you to bind an event to an element now or in the future. I also think it will probably solve your problem.
http://api.jquery.com/live/
$('input').live('click', function() {
$(this).datepicker();
});
As AutoSponge handily pointed out, live is deprecated as of jQuery 1.7. They suggest using on or delegate instead.
http://api.jquery.com/on/
http://api.jquery.com/delegate/
$('.my-button').click(function() {
$(".my-textbox").focus()
});
Before Jquery 1.4 this used to be the way to call focus to a textbox, now it doesn't work. When I click the button, I want to call focus to the textbox, what i mean by "focus", is that I want the textbox to act like it was just clicked on, so that the user will not have to click on the textbox.
.focus is supposed to do an auto click onto the textbox i want it to, why isn't it working now? it broke in Jquery 1.4. I just need to know how to do it.
It still works. See here.
reference: jQuery focus docs
As mentioned there, calling 'focus' on one element may trigger 'blur' on another - and so use 'focusin' instead.
Your code works fine for me. However, it looks like you're trying to create a clickable label for an input element. If that's the case, there's an existing element named <label> that will do the job for you, no JavaScript required:
<label for="myTextBox">I'm a label, click me</label>
<input type="text" id="myTextBox" />
Example: http://jsfiddle.net/pkk6y/
Those are class selectors not IDs - not sure if that's relevant, but they're inherently not unique - particularly in the focus function jquery may just plain refuse - try using IDs (and #mybutton, #mytextbox)
Update: The jQuery doc page points out issues with IE:
The focus event does not bubble in
Internet Explorer. Therefore, scripts
that rely on event delegation with the
focus event will not work consistently
across browsers.