forms 相关问题

在我的 HTML 表单中，我有以下一组单选按钮，具体取决于您选择的单选按钮取决于显示的下一个表单，这一切都有效。问题是... 在我的 HTML 表单中，我有以下一组单选按钮，具体取决于您选择的单选按钮取决于显示的下一个表单<fieldset>，这一切都有效。问题是由于某种原因，它们像复选框一样工作，而不是单选按钮。因此您可以选择所有选项，而不仅仅是一次选择一个选项。谁能看出下面的代码哪里出了问题吗？ <fieldset> <legend>Please select one of the following</legend> <input type="radio" name="track" id="track" value="track" /><label for="track">Track Submission</label><br /> <input type="radio" name="event" id="event" value="event" /><label for="event">Events and Artist booking</label><br /> <input type="radio" name="message" id="message" value="message" /><label for="message">Message us</label><br /> </fieldset> 它们都需要具有 same name 属性。单选按钮按 name 属性分组。这是一个例子： <fieldset> <legend>Please select one of the following</legend> <input type="radio" name="action" id="track" value="track" /><label for="track">Track Submission</label><br /> <input type="radio" name="action" id="event" value="event" /><label for="event">Events and Artist booking</label><br /> <input type="radio" name="action" id="message" value="message" /><label for="message">Message us</label><br /> </fieldset> 我过去就是这样做的，JsFiddle： CSS： .radio-option { cursor: pointer; height: 23px; width: 23px; background: url(../images/checkbox2.png) no-repeat 0px 0px; } .radio-option.click { background: url(../images/checkbox1.png) no-repeat 0px 0px; } HTML： <li><div class="radio-option"></div></li> <li><div class="radio-option"></div></li> <li><div class="radio-option"></div></li> <li><div class="radio-option"></div></li> <li><div class="radio-option"></div></li> jQuery： <script> $(document).ready(function() { $('.radio-option').click(function () { $(this).not(this).removeClass('click'); $(this).toggleClass("click"); }); }); </script> 试试这个阵法，蛮花哨的... 看看这个jsfiddle 按钮收音机 The idea is to choose a the radio as a button instead of the normal circle image. 输入的名称必须相同才能属于同一组。然后点击其中一个就会自动取消选择其他的。所有单选按钮必须添加相同的名称属性。为了使单选按钮正常工作，您必须按他的名字进行分组。（例如名称=“类型”） <fieldset> <legend>Please select one of the following</legend> <input type="radio" name="type" id="track" value="track" /><label for="track">Track Submission</label><br /> <input type="radio" name="type" id="event" value="event" /><label for="event">Events and Artist booking</label><br /> <input type="radio" name="type" id="message" value="message" /><label for="message">Message us</label><br /> 它将返回选中的单选按钮的值（例如曲目|事件|消息）基本上，你必须给所有的名称属性相同，这样就只能选择其中一个... 这是更正后的代码：- <fieldset> <legend>Please select one of the following</legend> <input type="radio" name="name" id="track" value="track" /><label for="track">Track Submission</label><br /> <input type="radio" name="name" id="event" value="event" /><label for="event">Events and Artist booking</label><br /> <input type="radio" name="name" id="message" value="message" /><label for="message">Message us</label><br /> </fieldset>

html forms

回答 7 投票 0

如何在模板中以 Angular 形式访问动态设置的输入名称属性

我将 ngx-datatable 组件包装在表单标签中，以便我可以验证表格单元格中的输入。由于表填充方式的性质，我动态设置输入名称属性我将 ngx-datatable 组件包装在 form 标签中，以便我可以验证表格单元格中的 inputs。由于表格填充方式的性质，我动态设置输入 name 属性 <form #tableForm="ngForm"> <ngx-datatable [rows]="_rows"> <ng-container *ngFor="let column of rowDeffinition; let columnIndex=index"> <ngx-datatable-column [prop]="column.key" [name]="column.label"> <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row"> <input class="cell-input" (blur)="updateCellValue($event, column.key, rowIndex)" type="text" [ngModel]="value" [name]="rowIndex + '-' + column.key" /> ... </ng-template> </ngx-datatable-column> </ng-container> </ngx-datatable> </form> 通常，name属性会在模板中创建一个局部变量，您可以通过变量名称访问输入控件属性。 <input type="text" name="name" [(ngModel)]="name" required minlength="4" /> <div *ngIf="name.invalid && name.touched"> 我想知道如何以与设置输入名称相同的方式动态地执行此操作。到目前为止，我能够通过表单参考访问输入控件，但这变得相当冗长 <span *ngIf="!tableForm.controls[rowIndex + '-' + column.key]?.valid && !tableForm.controls[rowIndex + '-' + column.key]?.pristine" class="[ c-validation-message ]"> required </span> 您可以将输入包装在新组件中，并且可以通过父组件中的@ViewChildren(...)访问这些生成的组件.ts文件： @ViewChildren(NgxDatatableInput) datatableInputs: QueryList<NgxDatatableInput>; 我建议在父组件中创建方法，该方法通过 datatableInputs 作为参数从 name 检索具体的 datatableInput。之后，您可以在生成的新ValidationSpanComponent中使用此方法： <ValidationSpan [control]="getDatatableInput(dynamicName)"> </ValidationSpan> ValidationSpanComponent的模板： <span *ngIf="!control.valid && !control.pristine" class="[ c-validation-message ]"> required </span> 受到这个答案的启发我想出了以下解决方案 <form #tableForm="ngForm"> <ngx-datatable [rows]="_rows"> <ng-container *ngFor="let column of rowDeffinition; let columnIndex=index"> <ngx-datatable-column [prop]="column.key" [name]="column.label"> <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">  <ng-template #cellContent [ngTemplateOutlet]="cellContent" let-cellName="cellName" let-isValidInput="isValidInput" let-isPristineInput="isPristineInput" let-isRequiredInput="isRequiredInput" [ngTemplateOutletContext]="{ cellName: rowIndex + '-' + column.key, isValidInput: tableForm.controls[rowIndex + '-' + column.key]?.valid, isPristineInput: tableForm.controls[rowIndex + '-' + column.key]?.pristine, isRequiredInput: column.input?.required }"> <input class="cell-input" (blur)="updateCellValue($event, column.key, rowIndex)" type="text" [ngModel]="value" [name]="cellname" /> ... </ng-template> </ng-template> </ngx-datatable-column> </ng-container> </ngx-datatable> </form> 这极大地提高了总体可读性，因为我的表具有非常复杂的逻辑，并且我以如下结构跟踪单元格的状态： interface EditTableRowStatus { editing: { [columnId: string]: boolean}, changed: { [columnId: string]: boolean}, addedRow: boolean; } let rowsStates = EditTableRowStatus[] 这导致模板中的属性绑定超级复杂 <input class="cell-input" *ngIf="column.input?.type === INPUT_TYPES.TEXT && (rowsStates[rowIndex]?.editing?.[column.key] || rowsStates[rowIndex]?.addedRow)" [autofocus]="!rowsStates[rowIndex]?.addedRow || columnIndex === 0 " (blur)="updateCellValue($event, column.key, rowIndex)" type="text" [ngModel]="value" [ngClass]="{'has-changes': rowsStates[rowIndex]?.changed?.[column.key]}" [name]="rowIndex + '-' + column.key" [required]="column.input?.required" /> 现在变得更具可读性 <input class="cell-input" *ngIf="inputType === INPUT_TYPES.TEXT && (isEditing || isAddedRow)" [autofocus]="!isAddedRow || columnIndex === 0 " (blur)="updateCellValue($event, column.key, rowIndex)" type="text" [ngModel]="value" [ngClass]="{'has-changes': isChanged}" [name]="cellName" [required]="isRequiredInput" />

html angular forms validation input

回答 2 投票 0

基于联系表 7 字段的条件自动回复

我想根据 Contact Form 7 表单中选择的字段设置自动回复器。例如，我将根据“职位名称”字段更改表单的字段。这个领域将会...

php wordpress forms contact-form-7

回答 1 投票 0

从工作表中的数据列表填充表单中的列表框

我目前正在尝试根据工作表中列出的数据填充表单中的列表框（我使用隐藏工作表作为一种 .ini）。这是我的尝试，我初始化了动态（或某种程度）的范围

excel vba forms

回答 1 投票 0

如何使用强大的（NodeJs）获取此文件的名称

我有一个使用nodejs +express的表单玉石档案：表单（方法=“发布”，操作=“/上传”，enctype=“multipart/form-data”）输入（类型=“文件”名称=“图像”）按钮（类型=“提交”）上传 Index.js 不是...

javascript node.js forms express formidable

回答 3 投票 0

表单重置函数返回未定义

我正在尝试通过以下方式重置表单输入： $("#form_employee_job")[0].reset(); 输入仍然填充并且控制台返回未定义我缺少什么？

javascript jquery html forms input

回答 4 投票 0

在 Angular 中过滤表单数组

我有一个列表，我将其转换为 FormArray 以生成 html 中的按钮列表。我想按名称过滤汽车 CarComponent.html 我有一个列表，我将其转换为 FormArray 以生成 html 中的按钮列表。我想按名称过滤汽车 CarComponent.html <input #searchBox id="search-box" (input)="search(searchBox.value)" /> <form [formGroup]="form" *ngIf="showCars"> <input type="button" class ="btn" formArrayName="carsList" *ngFor="let car of carsList$ | async; let i = index" value="{{carsList[i].name}}" > </form> CarComponent.ts carsList$: Observable<Car[]>; private searchTerms = new Subject<string>(); search(term: string): void { this.searchTerms.next(term); } constructor(private formBuilder:FormBuilder,...) { this.form = this.formBuilder.group({ carsList: new FormArray([]) }); this.addButtons(); } ngOnInit() { this.spinner.show(); this.carsList$ = this.searchTerms.pipe( debounceTime(300), distinctUntilChanged(), switchMap((term:string)=> this.carsList ??? // Is this correct ?? What do I put here ? ) } private addButtons() { this.carsList.map((o,i)=>{ const control = new FormControl; (this.form.controls.carsList as FormArray).push(control); }) } export const CarsList: Car[] = [ { name: 'Mercedes' }, { name: 'BMW' }, { name: 'Porsche' }, { name: 'Cadillac' } ] 所以我想知道如何正确进行过滤，而不是出于性能原因使用管道。出于性能原因，要在不使用管道的情况下过滤汽车列表，您可以直接过滤组件代码中的数组。 import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, FormArray } from '@angular/forms'; import { Observable, Subject } from 'rxjs'; import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators'; interface Car { name: string; } const CarsList: Car[] = [ { name: 'Mercedes' }, { name: 'BMW' }, { name: 'Porsche' }, { name: 'Cadillac' } ]; @Component({ selector: 'app-car', templateUrl: './car.component.html', styleUrls: ['./car.component.css'] }) export class CarComponent implements OnInit { form: FormGroup; carsList$: Observable<Car[]>; showCars = true; private searchTerms = new Subject<string>(); constructor(private formBuilder: FormBuilder) { this.form = this.formBuilder.group({ carsList: new FormArray([]) }); } ngOnInit() { this.addButtons(); this.carsList$ = this.searchTerms.pipe( debounceTime(300), distinctUntilChanged(), switchMap((term: string) => { return this.filterCars(term); }) ); } private addButtons() { CarsList.forEach((car: Car) => { const control = new FormControl(); (this.form.controls.carsList as FormArray).push(control); }); } private filterCars(term: string): Observable<Car[]> { const filteredCars = CarsList.filter((car: Car) => car.name.toLowerCase().includes(term.toLowerCase()) ); return new Observable<Car[]>(subscriber => { subscriber.next(filteredCars); subscriber.complete(); }); } search(term: string): void { this.searchTerms.next(term); } } 在上面的代码中，我们删除了 carsList observable，而是直接使用 CarsList 数组。然后实现 filterCars 方法来根据搜索词过滤汽车。在 ngOnInit 中，我调用 addButtons 用每辆车的按钮填充表单数组。并且 search 方法用于当用户在搜索框中输入文本时触发搜索。

arrays angular forms typescript formarray

回答 1 投票 0

调用removeEventListener不起作用

我不明白为什么removeEventListner()在我的代码中不起作用。下面是我的代码，带有简化的名称等： const form = document.querySelector(".formclass") 函数执行用户...

javascript forms removeeventlistener

回答 1 投票 0

渲染和捕获表单数据的问题..REACT

我遇到了问题。我创建了一个表单，当我单击 index.tsx 文件中的添加按钮时，它没有添加。但是，当我尝试渲染虚拟产品列表时，它起作用了。让我分享...

reactjs forms validation react-hooks

回答 1 投票 0

带有其他选项的单选按钮

我正在研究 Angular 反应形式。表格中的第一个问题询问用户最喜欢的水果是什么。我想添加一个“其他”选项。我正在研究 Angular 反应形式。表格中的第一个问题询问用户最喜欢的水果是什么。我想添加一个“其他”选项。 <p> <label for="favFruit"><b>What's your favorite fruit</b></label> <br /> <input type="radio" value="Apple" id="favFruit" name="favFruit" formControlName="favFruit" /> Apple <br /> <input type="radio" value="Banana" id="favFruit" name="favFruit" formControlName="favFruit" /> Banana <br /> <input type="radio" value="Orange" id="favFruit" name="favFruit" formControlName="favFruit" /> Orange <br /> <input type="radio" value="Pear" id="favFruit" name="favFruit" formControlName="favFruit" /> Pear <br /> <input type="radio" value="Grapes" id="favFruit" name="favFruit" formControlName="favFruit" /> Grapes <br /> <input type="text" value="" id="favFruit" name="favFruit" formControlName="favFruit" /> </p> 我尝试过添加另一个值作为文本输入字段，但是，这允许用户选择多个选项。我希望当用户单击“其他”（选项）时弹出，以便用户可以选择其他，但这将是他们唯一的选择。我建议用于填充其他值的 <input> 元素不要使用 formControlName 指令。当输入文本字段时，它应该更新 favFruit 控制值，这会导致取消选中之前选中的单选按钮。 <input type="text" value="" id="favFruit" name="favFruit" #otherFavFruit (input)="onOtherFavFruitInput(otherFavFruit.value)"> onOtherFavFruitInput(value: string) { this.form.controls.favFruit.setValue(value); } 另一种情况是，当您在文本字段中输入其他值时，您改变主意并选择其中一个单选按钮，您可以使用 (change) 事件来重置输入字段。 <input type="radio" value="Apple" id="favFruit" name="favFruit" formControlName="favFruit" (change)="onFavFruitChecked($event)"> import { Component, ElementRef, ViewChild } from '@angular/core'; @ViewChild('otherFavFruit') otherFavFruit!: ElementRef<HTMLInputElement>; onFavFruitChecked(event: any) { this.otherFavFruit.nativeElement.value = ''; } 请注意，您可以使用 *ngFor 生成一组表单控件，旨在减少 HTML 中的代码。 <ng-container *ngFor="let fruit of fruits"> <input type="radio" [value]="fruit" id="favFruit" name="favFruit" formControlName="favFruit" (change)="onFavFruitChecked($event)"> {{ fruit }} <br> </ng-container> fruits = ['Apple', 'Banana', 'Orange', 'Pear', 'Grapes']; 演示@StackBlitz

angular forms radio-button angular-reactive-forms

回答 1 投票 0

删除按钮后表单元素不执行提交

单击按钮时，单击事件会冒泡以形成并执行正确的回调。但是，删除按钮后，不会触发表单提交事件。我无法确切地找到为什么会发生这种情况...

javascript html forms dom dom-events

回答 1 投票 0

添加表单标签并提交常量后页面不再显示

在添加表单和导航元素之前，页面显示得足够好。没有错误，但数据不再随反应应用程序显示刚接触 Reactjs 有一个工作（很好的页面显示

reactjs forms onsubmit

回答 1 投票 0

Elementor Pro Form Widget 提交返回解析器错误

我为 Elementor Pro 表单创建了一个 WordPress 插件，它将捕获表单提交数据并将该数据发送到其他数据库，然后继续并将响应保存在 elementor 表单提交中......