casperjs
Version:
A navigation scripting & testing utility for PhantomJS and SlimerJS
115 lines (101 loc) • 4.46 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CasperJS test form</title>
</head>
<body>
<form action="result.html" enctype="multipart/form-data">
<label for="email">Email</label>
<input type="email" name="email" placeholder="email" id="email">
<label for="password">Password</label>
<input type="password" name="password" placeholder="password" id="password">
<input type="text" name="language" placeholder="language">
<label for="strange">Strange</label>
<input type="whatever" name="strange" id="strange">
<label for="content">Content</label>
<textarea name="content" id="content"></textarea>
<label for="topic">Topic</label>
<select name="topic" id="topic">
<option>foo</option>
<option value="bar">baz</option>
</select>
<label for="multitopic">Multitopic</label>
<select multiple name="multitopic" id="multitopic">
<option>foo</option>
<option value="bar">baz</option>
<option value="car">caz</option>
</select>
<label for="check">Check</label>
<input type="checkbox" name="check" id="check">
<label for="choice_yes">Yes</label>
<input type="radio" name="choice" value="yes" id="choice_yes">
<label for="choice_no">No</label>
<input type="radio" name="choice" value="no" id="choice_no">
<label for="file">File</label>
<input type="file" name="file" id="file">
<label for="checklist_1">1</label>
<input type="checkbox" name="checklist[]" value="1" id="checklist_1">
<label for="checklist_2">2</label>
<input type="checkbox" name="checklist[]" value="2" id="checklist_2">
<label for="checklist_3">3</label>
<input type="checkbox" name="checklist[]" value="3" id="checklist_3">
<input type="submit" name="submit" value="submit">
</form>
<form id="no-type-test-form" action="#" enctype="multipart/form-data">
<input name="notype">
</form>
<script>
(function () {
'use strict';
// Force fields initialization
document.querySelector("input[name=email]").value = "";
// El-cheapo autocomplete
var choices = [
'dutch',
'danish',
'english',
'french',
'german',
'greek',
'irish',
'italian',
'portuguese',
'spanish'
],
blurAutocomplete = function () {
var el = document.getElementById('autocomplete');
if (el) {
el.parentNode.removeChild(el);
}
},
input = document.querySelector('input[name="language"]');
input.onkeyup = function () {
var that = this,
value = this.value,
html = '',
el,
i;
for (i = 0; i < choices.length; i += 1) {
if (choices[i].search(value) >= 0) {
html += '<li>' + choices[i] + '</li>';
}
}
el = document.getElementById('autocomplete');
if (!el) {
el = document.createElement('ul');
el.setAttribute('id', 'autocomplete');
el.onclick = function (e) {
that.value = e.target.innerHTML;
};
document.getElementsByTagName('body')[0].appendChild(el);
}
el.innerHTML = html;
};
input.onblur = function () {
window.setTimeout(blurAutocomplete, 200);
};
}());
</script>
</body>
</html>