form fill() a checkbox in an MVC app

[Richard Bogle]

Hello All,

I'm new to CasperJS so I thought I'd better check my understanding here. I've a form to fill in, a login form, that has a checkbox that needs ticking. I found that casper.fill() wasn't setting it. Looking at the source of the page made me think my MVC was all wrong. ASP.NET MVC produced the following for the checkbox:

    <div class="editor-label">

        <input data-val="true" data-val-required="The Remember me? field is required." id="RememberMe" name="RememberMe" type="checkbox" value="true">

         <input name="RememberMe" type="hidden" value="false">

         <label for="RememberMe">Remember me?</label>

     </div>

See there's an extra input field? I checked and discovered this is actually the correct behaviour: [http://forums.asp.net/t/1314753.aspx] and would be in other MVC frameworks, too.

I had a look at the CasperJS source, as best I could, and I think it's only going to try and set the first element that each selector finds so the fact that I have two inputs both with the same name isn't going to work as the ASP.NET model binding is looking at the hidden input instead.

This is my workaround:

casper.then(function logOnForm() {

    // trying to set RememberMe checkbox will fail.

    // note: ASP.NET MVC is creating an additional hidden input field for

    // checkboxes which allows a default value to be always returned.

    this.fill('form', {

        UserName : "TestUser",

        Password : "Password123"

    }, false);

    // to overcome the problem with setting checkboxes

    // set the RememberMe hidden input field.

    this.click('form #RememberMe');

    // submit the form now.

    this.click('form input[type="submit"]');

});

What do y'all think, does CasperJS need to do something more or is the workaround fine as is? I feel I must be missing something as surely this must have bitten others as well.