How to fill a select box, when select name and id include ":"

Question

I have html code as below where the select names are with : (I have the need to fill more select included into the form mainForm):

<select id="mainForm:projectSelectOneMenu" name="mainForm:projectSelectOneMenu" class="selectOne" size="1" onchange="A4J.AJAX.Submit('mainForm',event,{'similarityGroupingId':'mainForm:j_id416','parameters':{'mainForm:j_id416':'mainForm:j_id416'} ,'containerId':'mainForm:trainPeriodCriteriaRegion'} )">
    <option value="">--- All ---</option>       

I'm using this code:

this.fillSelectors('form#mainForm', {
    'select[name="mainForm:projectSelectOneMenu"]' :  "3"
}, false);
this.wait(6000,function(){  
    this.echo("i saw my new value");
});

I have this error:

CasperError: Errors encountered while filling form: no field matching css selector "select[name="mainForm:projectSelectOneMenu"]" in form.

I used also others way to fill the select but seems I'm not able with my script to recognize the select name.

OK now it works, i filled all the select i needed. Now the last step is to click on the button mainForm:updateTrainPeriodCriteriaButton:

</table>
<br><input id="mainForm:updateTrainPeriodCriteriaButton"     
name="mainForm:updateTrainPeriodCriteriaButton" value="Apply" onclick="A4J.AJAX.Submit('mainForm',event,{'similarityGroupingId':'mainForm:j_id459','parameters':    {'mainForm:j_id459':'mainForm:j_id459'} ,'containerId':'mainForm:trainPeriodCriteriaRegion'} )" type="submit">
<hr> 

Using your code:

 console.log("id = mainForm:updateTrainPeriodCriteriaButton ? -> "+this.getElementAttribute('input[name="mainForm:updateTrainPeriodCriteriaButton"]','id'));

the output is correct: id = mainForm:updateTrainPeriodCriteriaButton ? -> mainForm:updateTrainPeriodCriteriaButton

But I'm not able to click on it:

casper.then(function(){    
    this.waitUntilVisible('#mainForm', function(){
    this.fill('form#mainForm', {
        'mainForm:criteriaStartCalendarInputDate':    "2014/03/27 05:00",
        'mainForm:criteriaEndCalendarInputDate':    "2014/03/27 07:59",
    }, false);
});
 //Click
this.thenClick('#mainForm:updateTrainPeriodCriteriaButton');
    this.then(function(){
        this.wait(10000, function(){
            this.capture('After_click.png');   
        });
    });    
});  

Error:

CasperError: Cannot dispatch mousedown event on nonexistent selector: #mainForm:updateTrainPeriodCriteriaButton

Answer 1

Edit : I tried with 'select[name="mainForm:projectSelectOneMenu"]' : "3" and it works...

Try using that :

//Emitted when a screenshot image has been captured.
casper.on('capture.saved', function(targetFile) {
    this.echo('screen properly done at ' + targetFile);
});

this.fillSelectors('form#mainForm', {
    'select[name*="mainForm"]' :  "3"
    }, false);
this.wait(2000,function(){  
    this.echo("i saw my new value");
    this.capture('imgFormCasper.jpg', undefined, {
        format: 'jpg',
        quality: 75
    });
});     

or maybe that :

this.fillSelectors('form#mainForm', {
    'select[name*="projectSelectOneMenu"]' :  "3"
    }, false);
this.wait(2000,function(){  
    this.echo("i saw my new value");
    this.capture('imgFormCasper.jpg', undefined, {
        format: 'jpg',
        quality: 75
    });
});     

So try this instruction :

console.log("id = mainForm:projectSelectOneMenu ? -> "+this.getElementAttribute('select[name="mainForm:projectSelectOneMenu"]','id'))‌​;

You should have : And if you haven't an IDE, test your code here to be sure you haven't a syntax error : http://esprima.org/demo/validate.html