We Keep Coding

Fill an input field that is not of type text and that triggers events in CasperJS

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.

Why is onchange event not firing on first change?

Thank you for taking the time for reading my question.
A "range" input element in HTML (Slider) fires an onchange -event, in which the content of a span element gets updated with the current value of the input element.
Somehow, the first change made to the input element doesn't fire the onchange event. When an 'onclick' event is used, it does fire.
Here's the code, HTML first:
<div>
<input id="main_options_plug1_lengthPE_input" type="range" step="10" value="0" max="200" min="0" onchange="setOpenEndPELength('plug1');"></input>
<span id="main_options_plug1_lengthPE_value"> … </span>
</div>
And now JavaScript:
function setOpenEndPELength(plug)
{
if (plug == "plug1" || plug == "plug2")
{
var slider = document.getElementById("main_options_" + plug + "_lengthPE_input");
var span = document.getElementById("main_options_" + plug + "_lengthPE_value");
span.innerHTML = slider.value + " mm";
}
}
I created a JSFiddle, so you can try it yourself.
I didn't find an answer to this question on stackoverflow so far, any questions i found were about onchange event don't firing at all. In this case, it's only the first change that doesn't work.
Hope someone knows the answer. Any help is greatly appreciated, thanks in advance.

If I understand the question correctly, the problem is that on Firefox, the onchange handler is not executed when you press down mouse button when the cursor is on the button of the slider and move the mouse. It is executed only after you release the mouse button after such a move.
This seems to be the correct behavior (though some other browsers don’t comply), since HTML5 CR says about the change event: “if the element does not have an activation behavior defined but uses a user interface that involves an explicit commit action, then any time the user commits a change to the element's value or list of selected files, the user agent must queue a task to fire a simple event that bubbles named change at the input element.”
That’s a bit complicated formulation, but it is followed by a clarifying example: “A third example of a user interface with a commit action would be a Range controls that use a slider. While the user is dragging the control's knob, input events would fire whenever the position changed, whereas the change event would only fire when the user let go of the knob, committing to a specific value.”
The conclusion is that in this case, you should use the oninput attribute instead of onchange. In practice, onmousemove works too, but oninput is better, since it can be expected to work with input methods that do not use a mouse (whatever they might be, e.g. control by voice).

On document ready try to trigger event manually caused first time change is not occurred.
So just add code as below:
$(“#main_options_plug1_lengthPE_input”).trigger(‘change’)

A little trick, if onchange doesn't fire the first time, add:
onclick="console.log(1)"
Some other action on the click, it still fire the onchange as second time but as first you have the click.

jquery: when i click a div, give focus to a textbox

$('.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.

What event can be captured when an HTML hidden input value is set / changed

HI,
In JavaScript when value is set to a hidden input control, which event is fired?

Whenever you change the value of a hidden field using script, it wont fire any event. But you can manually trigger the event if you are using jQuery.
Lets assume that you have the following hidden field
<input type="hidden" id="hid" value="0"
onchange="alert('Caught the hidden event');" />
When you change the value of the field using following code, it will not display the alert message.
$("#hid").val("2");
But you can trigger the change event using the following code
$("#hid").val("2").change();
Above code will display the alert message.

A value (aside from the initial value) can only be set on a hidden input by using scripting, and events do not generally fire in response to scripts.
It might trigger a Mutation event, but browser support for them is not all that widespread yet.
In general, if you want to do something when you script changes the value of a hidden input — make the script do the other thing at the same time.

I'm guessing that 'onchange' would fire.

How to stop onChange in JavaScript

In one of my selection boxes, I have an onChange="..." specified...
because I want to change some other form value after any selection changes.
However, in the same page, some weird case I have to manually set the value.
So I have to use some JavaScript to set the value of the selection combobox, but in this case, I don't want that onChange event to be fired.
How can I walk around it?
Forgot to mention that I am actually using dijit.form.comboBox.
For normal HTML form comboBox, it won't cause any issue.
Only I use the dijit comboBox, and I try to set the value to some other value, dojo will trigger the onChange.

If you are using Dijit, then you can pass an additional false flag at the end of the set() method that will prevent the widget from firing the onChange event.
For example:
dijit.byId(myComboBox).set("value","Choose an option...",false);

Found this answer from Paul Christopher at http://dojo-toolkit.33424.n3.nabble.com/onchange-event-firing-when-setting-value-of-a-Select-programmatically-td3985692.html. It worked perfectly!
myDigit._lastValueReported = myValue;
myDigit.set('value', myValue);

You don't need to do anything. Setting the value with Javascript will not fire your onchange event handler.

In general, setting the value with JavaScript won't fire onchange. If you're dealing with a strange browser that does fire it, you could remove the onChange (element.onchange = null), change the value, then add it back (element.onchange = functionname) afterwards.

FYI, this answer is not fully correct. It is true that simply setting the value does not trigger the onChange event, BUT as soon as the control loses focus, the change will be detected and onChange will be fired.
So delaying onChange is not really the same as preventing onChange - which is what I need to do!
I could temporarily remove the event, blur and refocus the field, and then restore the event, but this is an ugly hack. It is complicated by dynamicaly added events like jQuery. so really what I'd like is to set the 'focus value' to the 'new value', but haven't been able to find this. I could try setting the defaultValue, but this would prevent a correct form.reset().