Gist 3957869

100%

✓ Published0🌍 Public

Last edited Oct 26, 2012

Created on Oct 26, 2012

This example demonstrates a simple form interaction that disables a text input field based on the selected operating system. The form contains a dropdown menu and a text field; choosing “MAC” disables the text input, while selecting “PC” re-enables it. The behavior is implemented with jQuery, using the `.change()` event handler and the `.attr()` and `.removeAttr()` methods to toggle the `disabled` attribute. The code relies on the Yii framework’s `registerCoreScript` method to load jQuery, and the form submits via POST, though no server-side processing is shown.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 4520267

This example demonstrates a simple dynamic form builder using PHP and JavaScript. It shows how users can add or remove text input fields to a form by clicking the “add new item” or “remove item” links. The implementation relies on jQuery for DOM manipulation, with click handlers that append a new `<div>` containing a text field to the form, or delete the last added field. The form itself is defined in HTML, while the field structure is generated via PHP’s `CHtml::textField` helper within a Yii framework context.

Aallyraza

69% match

Loading thumbnail…

Gist 239004

This visualization demonstrates a multi-select input interface where users can add and remove tags or text values using commas or spaces as separators. The code shows how the component dynamically renders resizable text boxes and styled "bit" elements within a list, with keyboard navigation and delete/backspace handling for managing selections. Built on the Prototype.js and Script.aculo.us libraries, it uses classes like `TextboxList` and `ResizableTextbox` to manage input focus, resize behavior, and form value updates based on the current set of selected items.

CCaged

57% match

Loading thumbnail…

Disable HTML form input autocomplete and autofill in React

This example shows how to prevent Chrome autofill and autocomplete on React input fields by manipulating the `autoComplete` attribute. It demonstrates two approaches: setting `autoComplete="disabled"` directly on the `input` element, and using an `onFocus` handler that calls `setAttribute` to force the attribute to "disabled" when React would otherwise render "off". The code uses React's synthetic event system and JSX syntax within a functional component, referencing Chromium’s form style documentation for alternatives like `new-password`.

MMonaiThang

56% match

Loading thumbnail…

html: form select

This example demonstrates a basic HTML form control: a `<select>` dropdown menu populated with the numeric options 0 through 3, where the first option is preselected. The code uses native HTML `<select>` and `<option>` elements, requiring no external libraries or JavaScript. It shows how a simple, static dropdown is structured in a form, with the selected value defaulting to "0" on page load. The rendering relies entirely on the browser’s built-in form styling and interaction handling, making it a minimal, self-contained illustration of a standard user-input widget.

BBraMKJ

56% match

Loading thumbnail…

Javascript

This example demonstrates a collection of JavaScript utilities for enhancing web page interactivity, focusing on user-input controls and navigation. It shows how keyboard and click events can be managed to prevent accidental data loss and to streamline table or list interactions. The code uses plain JavaScript with jQuery for DOM manipulation, including the `bind` method for event handling, `history.pushState` for URL updates without page reloads, and jQuery’s `prop` and `is` methods to toggle checkbox states. The snippets cover F5 key disabling, dynamic URL changes, and bulk selection of checkboxes, reflecting a typical admin-panel or form-heavy workflow.

IIliaIdakiev

56% match

Loading thumbnail…

Gist 155908

This example shows a form-based user creation interface where the browser’s HTML parser rearranges the submitted markup. The code uses a Processing.js script inside a `script` tag to define a canvas variable, but the actual rendered page moves the submit button outside the form and inserts a literal `0` inside the form element. The discrepancy arises from how the browser handles unclosed form tags and embedded scripts, resulting in a different DOM structure than the expected source. The form action points to `/users`, but the visible output contains no functional form controls.

XXXX

55% match

Loading thumbnail…

Gist 7699534

This example demonstrates a jQuery plugin for form validation, where input fields are checked against rules like presence, email format, and numeric ranges. Valid and invalid states trigger CSS classes (`pass`/`fail`) through event handlers. The implementation defines custom jQuery functions (`jQuery.fn.valid`, `jQuery.fn.validate`) that listen for events such as `focusout`, `keydown`, and `submit`, using the `jQuery(@).data()` API to track validity. The usage sample binds validators to elements with the class `form-control.required`, applying the declared callbacks for live feedback.

DDylanFM

54% match

Loading thumbnail…

Input

This example demonstrates two groups of radio buttons for selecting options, with a form that captures and displays the chosen contact method as text output. The page combines static HTML form elements with a JavaScript event listener that uses the FormData API to log submitted values. Styling relies on CSS with monospace fonts, rem-based spacing, and a highlighted class for visual emphasis. The code uses standard browser APIs—including addEventListener, preventDefault, and querySelector—to handle form submission without any external visualization libraries.

Rross-fisher

53% match