forms 相关问题

我无法从控制器 Rails 7 渲染部分 js

我已经创建了 my_portfolio.html.erb ，并将表单提交给带有远程控制器的控制器： true ，控制器接受参数并验证一切都可以在条件和代码下正常工作，但它可以'...

将输入元素与表单中的某些按钮相关联？

http://jsfiddle.net/EGjc9/ 我在页面上有几个 元素，我需要将距离它们最近的 元素与这些按钮关联起来。现在，当您在任意位置按 ENTER 键时... http://jsfiddle.net/EGjc9/ 我在页面上有几个 <button> 元素，我需要将距离它们最近的 <input> 元素与这些按钮关联起来。现在，当您在任何输入字段上点击 ENTER 时，它会触发表单中的第一个 <button>。我该如何改变这个？ DOM： <form action="irrelevant"> <div> <select><option>1</option><option>2</option><option>3</option></select> <input type='text'/> <button>Hello</button> </div> <div> <select><option>1</option><option>2</option><option>3</option></select> <input type='text'/> <button>Hello</button> </div> <div> <select><option>1</option><option>2</option><option>3</option></select> <input type='text'/> <button>Hello</button> </div> <div> <select><option>1</option><option>2</option><option>3</option></select> <input type='text'/> <button>Hello</button> </div> </form> DOM 就绪： $('button').click( function(){ $(this).siblings().filter('select').val('3'); return false; }); 您需要使用 KeyPress 事件来捕获按下的“Enter”键，然后使用 JavaScript 按下您想要的按钮。 例如： //some key is pressed $('input').keypress( function(event){ //is this "Enter"? if (event.key === 'Enter') { //finding the button inside the same <div> and clicking on it $(this).parent().find('button').click(); //we don't need a default action event.preventDefault(); } }); 类似这样的： $('input').bind('keypress', function(e){ if(e.which == 13) { //Enter keycode $(this).next().click() } return false; }); 小提琴

React Hook Form - 当状态脏时值属性消失了

我正在使用react-hook-form来管理表单状态。 但是当我开始在文本字段中输入时，devtool 中显示的 value 属性消失了。 用户界面初始状态。 如上面的截图所示，va...

您可以更改默认表单验证消息的区域设置吗？

有没有办法更改默认表单验证消息的区域设置，以便无论浏览器的语言如何，它们始终以英语显示。 我不想通过

如何显示“创建”和“编辑”操作表单的特定字段 - Symfony3

我有一个简单的 FormType 附加到一个名为 media 的实体，我在视图中呈现该实体。 我有一个 newAction 可以让我创建对象，还有一个 editAction 可以让我用相同的形式编辑它......

React PreventDefault 函数不会停止重新加载表单页面

我正在创建一个 React 上下文来解码 jwts 并管理用户的登录功能。后端是使用django编写的。 <<<<< Login.jsx >>>>> 导入 React, { useContext ...

即使在 WordPress 中使用 PreventDefault()，jQuery 提交按钮也会重新加载页面

我有一些 jQuery，我通过一些文本字段插入一些数字，然后它应该打印出结果，这在我的本地计算机上工作得很好。 然而，当我添加到我的 WordPress 环境时，...

Wordpress jquery 表单提交

我有一些jquery，我通过一些文本字段插入一些数字，然后它应该打印出结果，这在我的本地计算机上工作得很好。 然而，当我添加到我的 WordPress 环境时，子...

Angular Material mat-stepper，如何将以编程方式创建的 componentRefs 正确传递给 mat-step？

我有一个问题请教， 我以编程方式创建了一些仅声明的组件，因此这些选择器根本不在任何模板中使用。我使用 ViewContainerRef.createComponent 来创建

输入密钥提交Ajax表单

我有一个非常简单的 AJAX 表单，它要求提供电子邮件地址，并在提交后将其发送给我。 我怎样才能在按下回车键时获得要提交的表单？ 当用户点击...时运行

使用 Bootstrap 和 popper js 的 Angular 模型组件

我试图在单击跟踪模式中的添加跟踪按钮时触发模型打开 添加跟踪... 我试图在单击跟踪模式中的添加跟踪按钮时触发模型打开 <button (click)="toggleForm()" class="btn btn-primary">Add Tracking</button> <div id="trackingModal" class="modal fade" tabindex="-1" *ngIf="showForm"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Add Tracking</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" (click)="toggleForm()"></button> </div> <div class="modal-body"> <form *ngIf="showForm" (ngSubmit)="onSubmit()"> <div class="form-group"> <label for="receiver">Receiver</label> <input type="text" class="form-control" id="receiver" [(ngModel)]="newShipmentData.receiver" name="receiver" required /> </div> <div class="form-group"> <label for="price">Price</label> <input type="number" class="form-control" id="price" [(ngModel)]="newShipmentData.price" name="price" required /> </div> <div class="form-group"> <label for="pickupTime">Pickup Time</label> <input type="datetime-local" class="form-control" id="pickupTime" [(ngModel)]="newShipmentData.pickupTime" name="pickupTime" required /> </div> <div class="form-group"> <label for="distance">Distance</label> <input type="number" class="form-control" id="distance" [(ngModel)]="newShipmentData.distance" name="distance" required /> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" (click)="toggleForm()"> Close </button> </div> </div> </div> </div> 这是 traking.ts 代码 import { Component, OnInit, ViewChild, ElementRef } from "@angular/core"; import { CommonModule } from "@angular/common"; import { FormsModule } from "@angular/forms"; import { ShipmentData, TrackingService } from "../tracking.service"; import { ShipmentStatusPipe } from "../shipment-status.pipe"; @Component({ selector: "app-tracking", standalone: true, imports: [FormsModule, CommonModule, ShipmentStatusPipe], templateUrl: "./tracking.component.html", styleUrls: ["./tracking.component.css"], }) export class TrackingComponent implements OnInit { // eslint-disable-next-line @typescript-eslint/no-explicit-any shipments: ShipmentData[] = []; // Temporary - adjust based on your service showForm = false; newShipmentData!: ShipmentData; @ViewChild("trackingModal") trackingModal!: ElementRef; constructor(private trackingService: TrackingService) {} ngOnInit() { this.trackingService.getAllShipment().then((shipments: ShipmentData[]) => { this.shipments = shipments; }); this.newShipmentData = { sender: "", receiver: "", price: "0", pickupTime: Date.now(), deliveryTime: 0, distance: 0, isPaid: false, status: 0, }; } toggleForm() { this.showForm = !this.showForm; console.log(this.trackingModal, this.showForm); } async onSubmit() { try { // Call your service to create the shipment await this.trackingService.createShipment(this.newShipmentData); // Handle success (e.g., close the form, display a success message) this.showForm = false; console.log("Shipment created successfully"); // Reset the form this.newShipmentData = { sender: "", receiver: "", price: "0", pickupTime: Date.now(), deliveryTime: 0, distance: 0, isPaid: false, status: 0, }; } catch (error) { // Handle errors from the TrackingService console.error("Error creating shipment:", error); } } } 现在，当我单击“添加跟踪”按钮时，模式不会出现 流程是这样的 首先用户单击添加跟踪按钮 带有表格的模型将打开并询问详细信息 当用户填写详细信息时，它将与跟踪服务交互 您的代码中的一切都很完美。 即使我在本地添加了你的代码。 也许你的元素隐藏在其他元素后面或者某些CSS被覆盖。 您能否提供 stackbiltz，以便提供更多帮助。

模板渲染期间抛出异常（“类闭包的对象无法转换为字符串”）

我尝试在空字段中默认设置用户的用户名，该字段为空，但当我尝试这样做时，我收到一条错误消息。 ->add('用户名', TextType::class, [ “标签”...

如何使用 Blazor 将 TelerikGrid 嵌套在 TelerikForm 中

我有一个带有 FormItems --> FormGroup --> FormItem(s) 的 TelerikForm，我希望在表单的中间或底部有一个网格，我可以在其中添加多行的新项目。 ...

如何在不重定向的情况下提交 HTML 表单

如果我有这样的表格， ... 我怎样才能在不重定向的情况下提交它...

带有显示部分的复选框的角度表单

对这可能是一个简单的问题表示歉意，但作为一名试图编写 Angular 的产品经理，我的头撞到了墙上。 我想要创建的是一个具有条件部分的 Angular 形式...

React Hook Form 控制组件。两个输入作为一个值

我正在尝试创建一个组合组件/输入字段，其中包含一个下拉列表和简单的文本字段。 我假设我需要使用 React hook 表单中的 useController 选项，但这就像 f...

在提交表单之前执行异步函数

我正在尝试做的事情： 在我的网站上，我创建了一个注册表单，我想在提交后执行两项操作： 将用户订阅到 MailChimp EDM 列表（仅使用姓名、电子邮件字段...

在提交表单之前重置属性值

我有一个静态渲染的 EditForm，它负责提交模型，以便我可以将其添加到我的数据库中。 @页面“/测试” @使用域.实体 测试 我有一个静态渲染的 EditForm，它负责提交模型，以便我可以将其添加到我的数据库中。 @page "/Test" @using Domain.Entities <h3>Test</h3> <EditForm Model="@Model" OnSubmit="@HandleSubmitted" FormName="CreateModel" Enhance> <InputText @bind-Value="@Model.Name"></InputText> <button type="submit" > Submit</button> </EditForm> @code { [SupplyParameterFromForm] private TestModel Model { get; set; } = new(); protected override void OnInitialized() { Console.WriteLine($"Initialized: {Model}"); } private void HandleSubmitted(EditContext obj) { Console.WriteLine($"Submitted: {Model}"); } } public record TestModel { public Guid Id { get; set; } = Guid.NewGuid(); public string Name { get; set; } = ""; } 这是日志输出（刷新页面、编辑名称、提交表单）： Initialized: TestModel { Id = 9e8e339a-cccc-499e-9f1e-76883657530d, Name = } Initialized: TestModel { Id = 00000000-0000-0000-0000-000000000000, Name = New Name } Submitted: TestModel { Id = 00000000-0000-0000-0000-000000000000, Name = New Name } 我希望提交表单时 Id (9e8...) 不会重置。我不确定我是否遗漏了一些概念或者我是否没有正确设置表单。我想找到一种正确的方法来提交带有有效 ID 的表单。 我之前尝试将 Id 添加为可编辑字段，这似乎解决了问题 - 它不再提交空的 guid。但是，我不想在这个阶段向最终用户公开 Id。我不认为拥有该 Id 输入字段并将其设置为隐藏是实际的方法吗？ 据我了解，只想提交模型的一部分。您可以尝试创建一个“部分模型”，其中仅包含要更改的字段，然后在初始化时获取部分模型值。您可以尝试以下操作： <EditForm Model="@onlyName" OnSubmit="@HandleSubmitted" FormName="CreateModel" Enhance> <InputText @bind-Value="@onlyName"></InputText> <button type="submit"> Submit</button> </EditForm> @code { [SupplyParameterFromForm] private string? onlyName { get; set; } = ""; private TestModel Model { get; set; } = new(); protected override void OnInitialized() { Model.Name = onlyName; Console.WriteLine($"Initialized: {Model}"); } private void HandleSubmitted(EditContext obj) { Console.WriteLine($"Submitted: {Model}"); } } 测试结果 同样，“唯一名称”可以是具有多个字段的对象。

使用一组规则进行 Codeigniter 表单验证

我正在尝试在我的Codeigniter项目中创建一组表单验证规则，以便当第一组验证失败时，第二组验证规则不应运行。 我在 CI 中发现了这个...

InputNumber 字段如果之前有无效输入，则不会从 EditContext 更新

我遇到了一个奇怪的问题。当用户第一次启动页面时，表单的 InputNumber 也设置为默认值 0。我可以将 EditContext 模型更改为任何数字和 InputNumber 字段