User input (Checkboxes, dropdowns, radio buttons)
NOTE: You’ll want to look at the console for all of these examples. It’s probably in
View>Developer>JavaScript Consoleif you’re using Chrome.
Checkboxes
Checkboxes are input fields with a type="checkbox". You have to manually write out text beside them in order for the user to know what the box is for.
Checkboxes: Getting the value
If you’d like to wait for a button to be clicked, you can grab the checkbox itself and use .property see if it’s checked.
<input type="checkbox" id="receive-spam" value="yes" checked="checked"> I would love to receive spam
<br>
<button id="email-signup">Sign up for email things</button>
<script>
d3.select("#email-signup").on('click', function() {
var isChecked = d3.select("#receive-spam").property("checked");
if(isChecked) {
console.log("You want to receive spam!");
} else {
console.log("You do NOT want to receive spam.");
}
});
</script>Checkboxes: Listening for changes
Although you could wait for a button press, it’s a lot more enjoyable to grab all of your checkboxes and listen for the change event. Once the event is triggered, you can look at this.value and this.checked to see which checkbox was changed and whether it’s now checked or not.
<input type="checkbox" class="age_box" value="18"> 18-24
<br>
<input type="checkbox" class="age_box" value="25"> 25-34
<br>
<input type="checkbox" class="age_box" value="35"> 35-44
<br>
<input type="checkbox" class="age_box" value="45_plus"> 45+
<script>
d3.selectAll(".age_box").on('change', function() {
if(this.checked) {
console.log('You checked the checkbox:');
console.log(this.value);
} else {
console.log('You unchecked the checkbox:');
console.log(this.value);
}
});
</script>Radio buttons
Radio buttons are like checkboxes except you can only check one. Usually you’re going to wait for a submission, grab the selected radio button with a d3.select, then use property('value') to find the value of that one.
The radio buttons must all have the same name, that’s how the browser knows the buttons connected together.
Radio buttons: Getting the value
<input type="radio" name="age" value="18"> 18-24
<input type="radio" name="age" value="25"> 25-34
<input type="radio" name="age" value="35"> 35-44
<input type="radio" name="age" value="45_plus"> 45+
<button id="tell-me">Tell me how old you are</button>
<script>
d3.select("#tell-me").on('click', function() {
var selected = d3.select('input[name="age"]:checked').property("value");
console.log("The selected value is");
console.log(selected);
});
</script>If you want to get into the details,
input[name="age"]:checkedmeans “give me all of the inputs with the name of ‘age’, but only the ones that are checked”
Radio buttons: Listening for changes
You can also wait for them to change, and then grab the changed value.
<input type="radio" name="age" value="18"> 18-24
<input type="radio" name="age" value="25"> 25-34
<input type="radio" name="age" value="35"> 35-44
<input type="radio" name="age" value="45_plus"> 45+
<script>
d3.selectAll("input[name='age']").on('change', function() {
console.log("radio buttons were changed");
var selected = d3.select('input[name="age"]:checked').property("value");
console.log("The selected value is");
console.log(selected);
});
</script>Dropdowns
Dropdown elements are actually two kinds of elements put together - a select that has a bunch of option elements inside. The user selects between the option tags.
Dropdowns: Getting the value
You can get the value of the select by looking at .property('value'). The value returned is not necessarily the text shown to the user - it’s what’s in the value attribute in the HTML.
<select id="named-select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="19">Nineteen</option>
<option value="ravens">Ravens</option>
</select>
<button id="named-button">Give me the results</button>
<script>
d3.select("#named-button").on('change', function() {
var result = d3.select("#named-select").property("value");
console.log("Your result is");
console.log(result);
});
</script>Dropdowns: Listening for changes
You can also listen for a change so your user doesn’t have to click a button to see the result.
<select id="named-select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="19">Nineteen</option>
<option value="ravens">Ravens</option>
</select>
<script>
d3.select("#named-select").on('change', function() {
console.log("dropdown value was changed");
console.log(this.value);
});
</script>