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

i have html code below select names : (i have need fill more select included 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="">--- ---</option>        

i'm using code:

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

i have error:

caspererror: errors encountered while filling form: no field matching css selector "select[name="mainform:projectselectonemenu"]" in form.

i used others way fill select seems i'm not able script recognize select name.

ok works, filled select needed. last step click on 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 code:

 console.log("id = mainform:updatetrainperiodcriteriabutton ? -> "+this.getelementattribute('input[name="mainform:updatetrainperiodcriteriabutton"]','id')); 

the output correct: id = mainform:updatetrainperiodcriteriabutton ? -> mainform:updatetrainperiodcriteriabutton

but i'm not able 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

edit : tried 'select[name="mainform:projectselectonemenu"]' : "3" , works...

try using :

//emitted when screenshot image has been captured. casper.on('capture.saved', function(targetfile) {     this.echo('screen done @ ' + targetfile); });  this.fillselectors('form#mainform', {     'select[name*="mainform"]' :  "3"     }, false); this.wait(2000,function(){       this.echo("i saw new value");     this.capture('imgformcasper.jpg', undefined, {         format: 'jpg',         quality: 75     }); });      

or maybe :

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

so try instruction :

console.log("id = mainform:projectselectonemenu ? -> "+this.getelementattribute('select[name="mainform:projectselectonemenu"]','id'))‌​; 

you should have : , if haven't ide, test code here sure haven't syntax error : http://esprima.org/demo/validate.html