CODEWITHSUNDEEP
javascripthtml-selectcasperjs
swapfile
swapfile

Reputation: 417

CasperJS loses select box vaue after submit

I have that select form:

<div class="row">
  <div class="col-xs-18 form-group">
  <label class="text-base" for="Gender">Geschlecht</label>
    <select id="Gender" class="form-control" data-bind="value: gender, hasFocus: gender.focused, css: { 'has-error': showError(gender) }" name="Gender">
      <option value="" selected="selected">Ausw&auml;hlen...</option>
      <option value="m">M&auml;nnlich</option>
      <option value="f">Weiblich</option>
      <option value="u">Keine Angabe</option>
   </select>
  <div class="alert alert-error" aria-atomic="true" aria-relevant="text" aria-live="assertive" data-bind="errorMessage: gender, visible: showError(gender)" style="display: none;">Diese Informationen sind erforderlich.</div>
</div>

and filled it this way: 

casper.then(function() {
    this.evaluate(function(anrede_inside) {
        document.querySelector('select#Gender').value = anrede_inside;
    }, anrede);
});

so far its working great. but when i submit the page i get an error message that i haven't filled the gender value and the value is changed to the default value. i've checked it with screenshots.

submit is here on the page:

<div class="col-xs-18">
   <input id="CredentialsAction" class="btn btn-primary btn-block" type="submit" value="Klick" title="Klick">
</div>

i click it like that: 

casper.then(function(){
    this.click('input[title*="Klick"]');
});

i also tried to choose gender like that: 

casper.then(function (){
    this.sendKeys('select#Gender', 'w');
});

this is also working in the first moment, gender is choosen till i klick the submit button. any ideas what im doing wrong? or any ideas on wich other ways i could select the form?

Upvotes: 0

Views: 84

Answers (2)

swapfile
swapfile

Reputation: 417

ok, i tried every fill method. and finaly fixed it with: 

casper.then(function(){
 this.fillSelectors('form#formID', {
 'select[id=Gender]':    'm', //variable for gender
}, true);
});

the only problem is i get a warning in debug mode:

[warning] [remote] unable to submit form

but no problem at all.

Upvotes: 0

Adriano
Adriano

Reputation: 137

Can you try this below? I believe that this will solve your problem.

casper.then(function(){
   //select value "u" - Keine Angabe
   this.evaluate(function(selectValue){
       document.querySelector('select[id=Gender]').value = selectValue; 
       return true;
   }, "u"); //set value "u"
   this.capture('capture.png'); //see this image to confirm change
});
casper.then(function() {
    this.click('#CredentialsAction'); //click on input element by id
});

Good luck!!!

Upvotes: 1

Related Questions