The Problem
You have a donation form with preset amount options ($10, $25, $50) and an “Other” option where users can type their own amount. The problem: when a user starts typing into the custom price field, the “Other” radio button doesn’t automatically select itself. The form still thinks they chose one of the preset amounts, or worse, nothing at all.
Gravity Forms has no built-in setting for this. The radio button and the text field are independent elements, so typing in one doesn’t affect the other.
The Solution
A lightweight JavaScript snippet that watches the custom amount field and automatically checks the “Other” radio button as soon as the user starts typing.
Complete Code Snippet
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
// === CONFIGURATION ===
// Replace these with your actual form and field IDs.
// You can find them by inspecting the form in the browser.
var formId = 612; // Your form ID
var priceFieldId = 4; // The custom price text field ID
var choiceValue = 'other'; // The choice value/label of the "Other" option
// Get the price field
var priceField = document.querySelector('#input_' + formId + '_' + priceFieldId);
// Get the "Other" radio button by its choice value attribute
var otherOption = document.querySelector(
'input[name="input_' + priceFieldId + '"][value="' + choiceValue + '"]'
);
if (!priceField || !otherOption) {
console.warn('Gravity Ranger: Price field or Other option not found.');
return;
}
// Auto-select the Other option
function autoSelectOther() {
if (otherOption && !otherOption.checked) {
otherOption.checked = true;
}
}
// When the user types into the price field
priceField.addEventListener('input', autoSelectOther);
// Also auto-select if a value already exists (e.g., after a validation error reload)
if (priceField.value && priceField.value.trim() !== '') {
autoSelectOther();
}
});
</script>What to Replace
| Variable | Where to Find It |
|---|---|
formId | Form Settings → Form ID |
priceFieldId | Field Settings → Field ID (your custom amount text field) |
choiceValue | Radio Button Field → Choices → Value of your “Other” option |
Where to Add the Code
- Add the code to an HTML field inside the form (it will execute while the user fills out the form).
- Or use a plugin like WPCodeBox to load the snippet on the specific page.
A More Flexible Version (Event Delegation)
If your form uses AJAX or dynamically reloads, use this event-delegation approach that listens on the document level:
<script type="text/javascript">
document.addEventListener('input', function(e) {
var formId = 612;
var priceFieldId = 4;
var choiceValue = 'other';
// Only react when our specific price field is modified
if (e.target.matches('#input_' + formId + '_' + priceFieldId)) {
var otherOption = document.querySelector(
'input[name="input_' + priceFieldId + '"][value="' + choiceValue + '"]'
);
if (otherOption && !otherOption.checked) {
otherOption.checked = true;
}
}
});
</script>Limitations & Caveats
- This snippet works on the frontend only. It does not validate server-side that the “Other” option was selected.
- If the user clears the custom price field, the radio button stays selected. Add an extra
blurorchangelistener if you want to deselect when empty. - Always test with JavaScript disabled to ensure your form logic still makes sense without the enhancement.
Need More Help?
If you still need help, feel free to use the comments or chat options below.
