在使用CasperJS提交表单之前,请注入其他值以进行选择

时间:2013-09-14 15:39:00

标签: javascript web-scraping form-submit casperjs

我使用CasperJS提交表格,一切正常。

表单代码:

<form method="post" action="validation.htm">

<input id="name" type="text" value="" name="dataname"></input>
<input id="url" type="text"  value="" name="dataurl"></input>
<textarea id="desc" cols="30" rows="4" name="description"></textarea>

<select id="color" size="1" name="datacolor">
  <option value="Red">Red</option>
  <option value="Black">Black</option>
  <option value="Blue">Blue</option>
</select>

</form>

casperjs代码:

casper.fill('form',
    dataname: 'Anton',
    dataurl: 'http://example.com',
    description: 'testing text...',
    datacolor: 'Blue'
, 1);

但现在我需要将值推到页面上没有列出的datacolor

所以,像这样:

casper.fill('form',
    dataname: 'Anton',
    dataurl: 'http://example.com',
    description: 'testing text...',
    datacolor: 'Yellow'
,1);

但当然它不起作用,有什么办法可以用CasperJS来完成吗?

2 个答案:

答案 0 :(得分:1)

这实际上是HTML无法提供的选项。您无法为下拉列表提供自定义值。

阅读:HTML select form with option to enter custom value

但是,您可以放置​​一个隐藏的输入(带有所需的名称)并通过该输入传递自定义颜色。

<input type="hidden" name="datacolor" />
<select id="color" size="1" name="_datacolor">
  <option value="Red">Red</option>
  <option value="Black">Black</option>
  <option value="Blue">Blue</option>
</select>

更改<select>的名称并使用fill

casper.fill('form',{
        dataname: 'Anton',
        dataurl: 'http://example.com',
        description: 'testing text...',
            datacolor: 'mycolor'
}
   , true);
  

注意:使用客户端JavaScript填充时需要更多处理   选择下拉列表中的值时隐藏输入。

答案 1 :(得分:1)

在提交之前,您可以使用casper.evaluateoption添加新的select。您可以在页面中执行纯JavaScript,并根据自己的喜好进行操作。

casper.evaluate(function(){
    var o = document.createElement("option");
    o.setAttribute("value", "Yellow"); // what is sent to the server
    o.innerHTML = "Yellow"; // what is shown to the user
    document.querySelector("#color").appendChild(o);
});

casper.fill('form', {
    dataname: 'Anton',
    dataurl: 'http://example.com',
    description: 'testing text...',
    datacolor: 'Yellow'
}, true);

注意:您的语法有点偏差,您忘记了casperjs代码段中表单字段周围的{ ... }