javascript - 在使用 CasperJS 提交表单之前注入(inject)其他值以进行选择

Question

我使用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 来完成此操作吗？

Answer 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);

NOTE: More handling is required using client-side JavaScript to fill up the hidden input when a value from dropdown is selected.