casperjs getelementbyid working but getelementbyname not working

Question

okay i am trying to fill input fields on a html page that have no form i am trying this work around for specific reasons and only require to do it the way i am trying.

basically here is my html

    <tr>
    <td valign="top" nowrap width="120">Amount: <font size="2" color="#CC0000">*</font>    </td>
    <td width="490">
    <input type="text" name="data" size="20" maxlength="20" value="">
    <select name="Percent"><option value="2" >NUM</option><option value="1" >num2</option><option value="3" selected>resultin</option></select>
    <div class="error"></div>
    </td>
    </tr>
   <td width="490">
      <input type="text" name="account" id="account" size="20" maxlength="20" value="">
    </td>

now when i use this to insert text into the account field every thing works

if(casper.exists(ac1)){
var uel = "https://example.com";
this.thenOpen(uel, function() {
casper.wait(10000, function() {    
  casper.then(function() {
    this.evaluate(function() {
      document.getElementById('account').value = '345de';


    });
casper.wait(10000, function() {
  casper.then(function() {
    this.capture("filenadfgmedsfg.jpg");
    var el2 = this.getHTML();
    fs.write('results23.html', el2, 'w');
});
});
});

but when i try either of these below to fill the input data field i cannot get it to work

if(casper.exists(ac1)){
var uel = "https://example.com";
this.thenOpen(uel, function() {
casper.wait(10000, function() {    
  casper.then(function() {
    this.evaluate(function() {
      document.getElementById('data').value = '345de';


    });
casper.wait(10000, function() {
  casper.then(function() {
    this.capture("filenadfgmedsfg.jpg");
    var el2 = this.getHTML();
    fs.write('results23.html', el2, 'w');
});
});
});

and this one does not work please help me fix this

if(casper.exists(ac1)){
var uel = "https://example.com";
this.thenOpen(uel, function() {
casper.wait(10000, function() {    
  casper.then(function() {
    this.evaluate(function() {
      document.getElementByName('data').value = '345de';


    });
casper.wait(10000, function() {
  casper.then(function() {
    this.capture("filenadfgmedsfg.jpg");
    var el2 = this.getHTML();
    fs.write('results23.html', el2, 'w');
});
});
});    

can anyone show me a way of filling the data field using a simaler way to getElementBy technique

Answer 1

There is no method getElementByName(). What you probably want is getElementsByName() and it returns a list of elements, not just a single element so you have to either just get the first item in the list or process the whole list (depending upon what you want to do).

var uel = "https://example.com";
this.thenOpen(uel, function () {
    casper.wait(10000, function () {
        casper.then(function () {
            this.evaluate(function () {
                document.getElementsByName('data')[0].value = '345de';
            });
        });
    });
});