forms 相关问题

表单本质上是一个容器,可用于保存几种类型数据的任何数量的任何数量的子集。 HTML表单用于将数据传递到服务器。 VB和C#表单是用于与用户交互的窗口。

根据输入是否正确将图标放置在表单字段内

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Assignment 2 - Website Building</title> <style> body { box-sizing: border-box; font-family: sans-serif; } #login-container { width: 460px; margin: 0 auto; } form label, form input { width: 100%; box-sizing: border-box; } form input { padding: 8px; } form label { font-weight: bold; } form div { margin: 16px 0px; } .invalid { border: 2px solid red; } .valid { border: 2px solid green; } .error-message { color: red; margin-top: 8px; } .success-message { color: green; margin-top: 8px; } </style> <script src="https://kit.fontawesome.com/dde5f4aaa2.js" crossorigin="anonymous"></script> </head> <body> <div id="login-container"> <form id="login-form"> <div> <label for="username">Username:</label> <input id="username" type="text"> <span id="username-error" class="error-message"></span> <i class="fa-solid fa-check" style="color: #008d63;"></i> <i class="fa-solid fa-exclamation" style="color: #ed0202;"></i> </div> <div> <label for="password">Password:</label> <input id="password" type="password"> <span id="password-error" class="error-message"></span> <i class="fa-solid fa-check" style="color: #008d63;"></i> <i class="fa-solid fa-exclamation" style="color: #ed0202;"></i> </div> <input type="submit" value="Login"> </form> <div id="error-messages"></div> </div> <script> document.getElementById("login-form").addEventListener("submit", function (event) { event.preventDefault(); // Prevent form submission // Reset previous validation styles document.getElementById("username").classList.remove("invalid"); document.getElementById("password").classList.remove("invalid"); document.getElementById("username").classList.remove("valid"); document.getElementById("password").classList.remove("valid"); document.getElementById("error-messages").innerHTML = ""; document.getElementById("username-error").textContent = ""; document.getElementById("password-error").textContent = ""; // Get input values var username = document.getElementById("username").value.trim(); var password = document.getElementById("password").value.trim(); var errors = []; // Validate username and password document.getElementById("username").classList.toggle("invalid", username === "" || username !== "new_user"); document.getElementById("username").classList.toggle("valid", username === "new_user"); if (username === "") { document.getElementById("username-error").textContent = "Please, enter username"; errors.push("Username is required."); } else if (username !== "new_user") { document.getElementById("username-error").textContent = "Please, enter valid username"; errors.push("Invalid username."); } document.getElementById("password").classList.toggle("invalid", password === "" || password !== "123456789"); document.getElementById("password").classList.toggle("valid", password === "123456789"); if (password === "") { document.getElementById("password-error").textContent = "Please, enter password"; errors.push("password is required."); } else if (password !== "123456789") { document.getElementById("password-error").textContent = "Please, enter valid password"; errors.push("Invalid password."); // Display error messages if (errors.length > 0) { var errorMessageHTML = "<ul class='error-message'>"; errors.forEach(function (error) { errorMessageHTML += "<li>" + error + "</li>"; }); errorMessageHTML += "</ul>"; document.getElementById("error-messages").innerHTML = errorMessageHTML; } else { // Successful login document.getElementById("username").classList.add("valid"); document.getElementById("password").classList.add("valid"); document.getElementById("error-messages").innerHTML = "<p class='success-message'>Successful login!</p>"; } } }) </script> </body> </html> 我需要什么: 所以基本上我需要表单来分别显示复选标记和 x 图标,具体取决于表单的输入是否正确/不正确。这些图标需要位于右侧的表单字段中,我设法找到如何将它们放入结构中,但我不知道如何将它们放入表单中并在表单没有输入时隐藏它们。 我尝试过的: 尝试使用 css 中的位置,但无法做到正确 脚本文件中有很多错误,我全部删除了。这是您更正后的代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Assignment 2 - Website Building</title> <style> body { box-sizing: border-box; font-family: sans-serif; } #login-container { width: 460px; margin: 0 auto; } form label, form input { width: 100%; box-sizing: border-box; } form input { padding: 8px; } form label { font-weight: bold; } form div { margin: 16px 0px; } .invalid { border: 2px solid red; } .valid { border: 2px solid green; } .error-message { color: red; margin-top: 8px; } .success-message { color: green; margin-top: 8px; } .inputField { display: flex; position: relative; } .inputField svg { position: absolute; right: 5px; top: 6px; } .hide { display: none; } </style> <script src="https://kit.fontawesome.com/dde5f4aaa2.js" crossorigin="anonymous"></script> </head> <body> <div id="login-container"> <form id="login-form"> <div> <label for="username">Username:</label> <div class="inputField"> <input id="username" type="text"> <svg id="check1" fill="#000000" width="22px" height="22px" viewBox="0 0 24 24" id="check" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" class="icon line-color"><polyline id="primary" points="5 12 10 17 19 8" style="fill: none; stroke: rgb(3, 252, 61); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></polyline></svg> <svg id="close1" fill="#000000" width="20px" height="20px" viewBox="0 0 24 24" id="cross" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" class="icon line-color"><line id="primary" x1="19" y1="19" x2="5" y2="5" style="fill: none; stroke: rgb(252, 3, 19); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line><line id="primary-2" data-name="primary" x1="19" y1="5" x2="5" y2="19" style="fill: none; stroke: rgb(252, 3, 19); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line></svg> </div> <span id="username-error" class="error-message"></span> </div> <div> <label for="password">Password:</label> <div class="inputField"> <input id="password" type="password"> <svg id="check2" fill="#000000" width="22px" height="22px" viewBox="0 0 24 24" id="check" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" class="icon line-color"><polyline id="primary" points="5 12 10 17 19 8" style="fill: none; stroke: rgb(3, 252, 61); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></polyline></svg> <svg id="close2" fill="#000000" width="20px" height="20px" viewBox="0 0 24 24" id="cross" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" class="icon line-color"><line id="primary" x1="19" y1="19" x2="5" y2="5" style="fill: none; stroke: rgb(252, 3, 19); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line><line id="primary-2" data-name="primary" x1="19" y1="5" x2="5" y2="19" style="fill: none; stroke: rgb(252, 3, 19); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></line></svg> </div> <span id="password-error" class="error-message"></span> </div> <input type="submit" value="Login"> </form> <div id="error-messages"></div> </div> <script> document.getElementById("check1").classList.add("hide"); document.getElementById("check2").classList.add("hide"); document.getElementById("close1").classList.add("hide"); document.getElementById("close2").classList.add("hide"); document.getElementById("login-form").addEventListener("submit", function (event) { event.preventDefault(); // Prevent form submission // Reset previous validation styles document.getElementById("username").classList.remove("invalid"); document.getElementById("password").classList.remove("invalid"); document.getElementById("username").classList.remove("valid"); document.getElementById("password").classList.remove("valid"); document.getElementById("error-messages").innerHTML = ""; document.getElementById("username-error").textContent = ""; document.getElementById("password-error").textContent = ""; // Get input values var username = document.getElementById("username").value.trim(); var password = document.getElementById("password").value.trim(); var errors = []; // Validate username and password document.getElementById("username").classList.toggle("invalid", username === "" || username !== "new_user"); document.getElementById("username").classList.toggle("valid", username === "new_user"); if (username === "") { document.getElementById("username-error").textContent = "Please, enter username"; errors.push("Username is required."); } else if (username !== "new_user") { document.getElementById("username-error").textContent = "Please, enter valid username"; errors.push("Invalid username."); } if(username === "new_user") { document.getElementById("close1").classList.add("hide"); document.getElementById("check1").classList.remove("hide"); } else { document.getElementById("check1").classList.add("hide"); document.getElementById("close1").classList.remove("hide"); } document.getElementById("password").classList.toggle("invalid", password === "" || password !== "123456789"); document.getElementById("password").classList.toggle("valid", password === "123456789"); if (password === "") { document.getElementById("password-error").textContent = "Please, enter password"; errors.push("password is required."); } else if (password !== "123456789") { document.getElementById("password-error").textContent = "Please, enter valid password"; errors.push("Invalid password."); } if(password === "123456789") { document.getElementById("close2").classList.add("hide"); document.getElementById("check2").classList.remove("hide"); } else { document.getElementById("check2").classList.add("hide"); document.getElementById("close2").classList.remove("hide"); } if (errors.length > 0) { // Display error messages var errorMessageHTML = "<ul class='error-message'>"; errors.forEach(function (error) { errorMessageHTML += "<li>" + error + "</li>"; }); errorMessageHTML += "</ul>"; document.getElementById("error-messages").innerHTML = errorMessageHTML; } else { // Successful login document.getElementById("username").classList.add("valid"); document.getElementById("password").classList.add("valid"); document.getElementById("error-messages").innerHTML = "<p class='success-message'>Successful login!</p>"; } }) </script> </body> 对 CSS、Html 和脚本进行了更改。 HTML 更改 我在 html 中的字体有问题,所以我使用了 svg,如果你擅长字体,那么你可以使用字体,没有问题。 我已将输入字段和 svg(检查图标和关闭图标)全部包装在带有 inputField 类的 div 中。 在所有四个 svg(2 个用于用户名,2 个用于密码)中,都使用了 uniqueId,这在脚本代码中很有用。 CSS 更改 对于 inputField 已经给出了 flex 和相对位置。 对于 svg 来说,根据您的喜好给出了绝对值并给出了顶部和右侧。 隐藏以最初按照您的要求隐藏 svgs。 脚本更改 最初为所有四个 svgs 添加了 hide 类,以便它们被隐藏。 然后在 if 条件下,我检查用户是否输入了正确的通行证和用户名(如果他们输入了),然后添加隐藏类以关闭 svg 并从检查 svg 中删除隐藏类,否则只需执行相反的操作。 最后,如果检查 errorList 是否为空,您是否输入了应该输出的密码。

回答 1 投票 0

在页面加载时更改 html 表单字段高度

我有来自chrome检查的以下代码 我有来自 chrome 检查的以下代码 <select multiple="multiple" data-dojo-attach-point="containerNode,focusNode" data-dojo-attach-event="onchange: _onChange" class="axios-form-multi-select dijitMultiSelect" tabindex="0" id="uniqName_4_22" widgetid="uniqName_4_22" data-auto-test-id="webCustomPropertyValue(DOCUMENT TYPE 12)" aria-labelledby="uniqName_38_19_labelNode uniqName_38_19_descriptionNode" style="height: 76px; width: 323px;"></select> 我尝试通过在页眉中添加 css 代码来更改此字段高度,因为我无法访问源 css 代码 以下是我尝试过的方法,但没有成功,这可能吗?有什么解决办法吗? .axios-form-multi-select { height: 150px; } <select multiple="multiple" data-dojo-attach-point="containerNode,focusNode" data-dojo-attach-event="onchange: _onChange" class="axios-form-multi-select dijitMultiSelect" tabindex="0" id="uniqName_4_22" widgetid="uniqName_4_22" data-auto-test-id="webCustomPropertyValue(DOCUMENT TYPE 12)" aria-labelledby="uniqName_38_19_labelNode uniqName_38_19_descriptionNode" style="height: 76px; width: 323px;"></select> 这是由于 inline-styles 应用于 selector 元素造成的: style="height: 76px; width: 323px;"。 内联样式的优先级高于基于类的样式。删除这个就可以了。

回答 0 投票 0

Javascript 中的“event”已被弃用,我无法使用“preventDefault()”

我正在尝试使用 event.preventDefault() 方法,但我不断收到错误。它说该事件已被弃用。 我正在制作 Firebase 注册表单,我想阻止该表单...

回答 2 投票 0

Symfony 表单:所选选项无效

我的symfony应用程序有这个实体: 我的 symfony 应用程序有这个 实体: <?php namespace App\Entity; class Lead { private ?string $zipCode; private ?string $city; public function getZipCode(): ?string { return $this->zipCode; } public function setZipCode(string $zipCode): self { $this->zipCode = $zipCode; return $this; } public function getCity(): ?string { return $this->city; } public function setCity(string $city): self { $this->city = $city; return $this; } } 表格LeadType是: $builder->add('zipCode', TextType::class, [ 'attr' => [ 'placeholder' => 'Ex : 44000', 'onchange' => 'cityChoices(this.value)', ] ]) ->add('city', ChoiceType::class, [ 'choices' => [], 'attr' => ['class' => 'form-control'], 'choice_attr' => function () {return ['style' => 'color: #010101;'];}, ]); 当用户输入邮政编码时,javascript函数cityChoices()使用外部API添加选择选项,例如: 我的问题是控制器中的表单无效。因为用户选择了 LeadType 的选项中未提供的城市('choices' => [])。 这是错误: 0 => Symfony\Component\Form\FormError {#3703 ▼ #messageTemplate: "The selected choice is invalid." #messageParameters: array:1 [▼ "{{ value }}" => "Bar-le-Duc" ] 如何使选择有效? 完全@craight 我添加到表格中: ->addEventListener(FormEvents::PRE_SUBMIT, function(FormEvent$event){ $form = $event->getForm(); $city = $event->getData()['city']; if($city){ $form->add('city', ChoiceType::class, ['choices' => [$city => $city]]); } }) 预提交时,我更新选择并仅让用户选择'choices' => ['Bar-le-Duc' => 'Bar-le-Duc'], 表单在控制器中生效 另一个答案,当将 EntityType 与之前可用但不再可用的实体(例如,软删除或过期)一起使用时,是使用自定义数据转换器在验证之前过滤发布的结果。 请参阅如何使用数据转换器 @ Symfony 文档。 在下面的(非功能性)示例中,EntityType(或ChoiceType)的自定义数据转换器根据给定自定义过滤器的数据库查询结果删除无效值: <?php /** * Transformer for collection of CustomerType objects. * * @implements DataTransformerInterface<Collection<array-key,string>,Collection<array-key,string>> */ class EntityCollectionTransformer implements DataTransformerInterface { protected ?Builder $queryBuilder = null; /** * The valid DeliveryPackOption::id for the current context. * * @var string[] */ protected ?array $validIds = null; /** * Constructor, injects the repository. */ public function __construct( protected readonly EntityRepository $repository ) { } /** * Get the query builder, to apply custom filters. */ public function getQueryBuilder(): Builder { // Reset the query builder $this->queryBuilder = $this->repository->getQueryBuilder(); // Reset the valid ids $this->validIds = null; return $this->queryBuilder; } /** * Get the valid DeliveryPackOption Ids for the current context. * * @return string[] */ public function getValidIds(): array { if (null !== $this->validIds) { return $this->validIds; } if (null === $this->queryBuilder) { $message = sprintf('You must call getQueryBuilder() before calling using %s.', self::class); throw new \LogicException($message); } /** @var Collection<array-key,Entity> */ $results = $this->queryBuilder->getQuery()->execute(); // Get the valid ids from the database $this->validIds = array_map( fn (Entity $option): string => $option->getId(), $results->toArray(), ); return $this->validIds; } /** * Check that the given Entity::id are available as choices for the current context. * * Prevent "invalid" choices to be submitted. * * @param Collection<array-key,string>|null $value * * @return Collection<array-key,string> */ #[\Override] public function transform(mixed $value): Collection { if (!$value instanceof Collection || 0 === $value->count()) { return new ArrayCollection(); } return new ArrayCollection(array_filter( $value->toArray(), fn (string $id): bool => in_array($id, $this->getValidIds(), true) )); } /** * Transform a Entity:id array to its corresponding ArrayCollection of Document. * * @param Collection<array-key,string>|null $value * * @return Collection<array-key,string>|null */ #[\Override] public function reverseTransform(mixed $value): ?Collection { return $value; } } 并在表单中,获取变压器服务,并设置自定义查询过滤器: <?php class FormType extends AbstractType { protected ?EntityTransformer $entityTransformer = null; /** * Set the DeliveryPackOptionReferenceCollectionTransformer service, used for dependency injection. */ #[Required] public function setEntityTransformer( EntityTransformer $entityTransformer ): void { $this->entityTransformer = $entityTransformer; } public function buildForm(FormBuilderInterface $builder, array $options): void { if (!$this->entityTransformer instanceof EntityTransformer) { throw new \RuntimeException('EntityTransformer service is not set.'); } // Prepare the Entity collection filtering transformer query builder $qb = $this->entityTransformer->getQueryBuilder(); $qb->andWhere('deleted = :false'); ->setParameter('false', false); $builder ->add('city', EntityType::class, [ 'class' => Entity::class, ]) ; $builder->get('delivery.deliveryPackOptions') ->addModelTransformer($this->entityTransformer); } }

回答 2 投票 0

如何为角度过滤器制作依赖的另一个下拉列表

如何使 Angular 中的过滤器依赖另一个下拉菜单。我有多个下拉菜单,它们相互依赖。我正在使用反应形式。 如何在角度中为过滤器建立依赖的另一个下拉菜单。我有多个下拉菜单,它们相互依赖。我正在使用反应形式。 <select (change)="checkFirstDropdown()" formControlName="id" class="FormControl cond-size"> <option value="null" disabled >Please Select Option</option> <option [ngValue]="noneDropDown" selected> none </option> <ng-container *ngIf="checkMainIndex==0"> <ng-container *ngFor="let conditionsOperatorElement of allObjects.conditionsOperator"> <option *ngIf="conditionsOperatorElement.conditionsOperatorId==1" [ngValue]="conditionsOperatorElement.conditionsOperatorId" >{{ conditionsOperatorElement.title }}</option> </ng-container> </ng-container> <ng-container *ngIf="checkMainIndex!=0"> <option [ngValue]="conditionsOperatorElement.conditionsOperatorId" *ngFor="let conditionsOperatorElement of allObjects.conditionsOperator">{{ conditionsOperatorElement.title }}</option> </ng-container> </select> 我想我有一个解决方案给你。您可以在 change 函数上执行此操作。 这是我的示例代码和 stackblitz 演示链接。 HTML: <h1>Reactive forms SELECT-OPTIONS</h1> <h2>Tracking simple string</h2> <form [formGroup]="form"> <label>Country:</label><br> <select formControlName="country" (change)="checkFirstDropdown($event.target.value)"> <option *ngFor="let country of countries" [value]="country.id"> {{ country.name }} </option> </select> <br> <br> <label>City</label><br> <select formControlName="city" > <option *ngFor="let city of cities" [value]="city.id"> {{ city.city }} </option> </select> </form> TS: import { Component } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; import {Country} from './country'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { countries = [ { id: 'us', name: 'United States' }, { id: 'uk', name: 'United Kingdom' }, { id: 'ca', name: 'Canada' } ]; cities=[]; form = new FormGroup({ country: new FormControl(), city: new FormControl() }); checkFirstDropdown($event){ this.cities=cityList.filter(c=>c.cid===$event); let itm=this.cities[0]; this.form.controls['city'].setValue(itm.id); console.log($event); } } export const cityList = [ { id: "1", cid: 'ca', city: "toronto", }, { id: "2", cid: 'ca', city: "Vancouver", }, { id: "3", cid: 'us', city: "New York City", }, { id: "4", cid: 'us', city: "Los Angeles", }, { id: "5", cid: 'uk', city: "London", }, { id: "6", cid: 'uk', city: "BRIGHTON", } ]; **HTML**: <div class="row mt-3"> <div class="col-3"> <label for="">Select Category</label> <select class="form-control" [(ngModel)]="selectedCategory" (change)="onCategoryChange()" (change)="checkFirstDropdown(selectedCategory)"> <option value="">Select</option> <option *ngFor="let category of categories" [value]="category"> {{category}}</option> </select> </div> <div class="col-3"> <label for="">Select Product</label> <select class="form-control" [(ngModel)]="products"> <option value="">Select</option> <option *ngFor="let product of products" [value]="product"> {{product.name}}</option> </select> </div> <div class="Container"> <app-my-table></app-my-table> </div> </div> **TS**: import { Component, OnInit } from '@angular/core'; import { ProductService } from '../product.service'; import { Product } from '../product'; @Component({ selector: 'app-pos', templateUrl: './pos.component.html', styleUrls: ['./pos.component.css'] }) export class POSComponent implements OnInit { categories: string[] = []; products: Product[] = []; selectedCategory: string = ''; selectedCategoryProducts: any[] = []; constructor(private productService: ProductService) { } ngOnInit() { //it loads your first dropdown data this.loadData(); } loadData() { this.productService.getCategoriesOnly().subscribe((category: any) => { this.categories = category.data; }) } //checks first dropdown value checkFirstDropdown(selectedCategory: string) { this.selectedCategoryProducts = this.products.filter(c => c.category === selectedCategory); if (selectedCategory != null || selectedCategory != "Select") { this.getProductByCategory(selectedCategory); } } // its an api call in service which gets data for 2nd list getProductByCategory(category: string) { this.productService.getProductByCategory(category).subscribe((product: any) => { this.products = product.data; }) } // on changing category first it will empty the array of products onCategoryChange() { this.products = []; // Reset selected product when category changes } } }

回答 0 投票 0

访问 sub 来更新单个记录,始终更新表中的第一条记录

我有一个未绑定的表单,显示我的 d/b 中表中的字段。用户可以通过单击“浏览...”按钮来选择图像并将它们存储在工作文件夹中。该按钮还应该

回答 2 投票 0

如何提交选择变更表格

我有以下表格。我希望当用户做出选择时通过 jQuery 自动提交,而不需要按提交按钮。我该怎么做呢? 我有以下表格。我希望当用户做出选择时通过 jQuery 自动提交,而不需要按提交按钮。我该怎么做? <form action="" method="post"> <select name="id" id="cars"> <option value="">Choose</option> <option value="1">Toyota</option> <option value="2">Nissan</option> <option value="3">Dodge</option> </select> <input type="submit" name="submit" value="Submit"> </form> adeneo,我尝试了你的建议,但仍然不起作用。这是完整的代码,有什么问题吗? <!doctype html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#cars').on('change', function() { this.form.submit(); }); }); </script> </head> <body> <form action="" method="post"> <select name="id" id="cars"> <option value="">Select...</option> <option value="1">Toyota</option> <option value="2">Nissan</option> <option value="3">Dodge</option> </select> <input type="submit" name="submit" value="Submit"> </form> </body> </html> 您的表单缺少操作值,这导致最终无法提交表单。但在中期你应该更正这段代码: $(document).ready(function() { $('#cars').on('change', function() { document.forms[myFormName].submit(); }); }); 您还可以通过触发提交按钮点击事件来提交表单: $(document).ready(function() { $('#cars').on('change', function() { var $form = $(this).closest('form'); $form.find('input[type=submit]').click(); }); }); 就我而言,这效果非常好,无论有没有提交按钮都可以。 <form action="" method="post"> <select name="id" id="cars"> <option value="">Choose</option> <option value="1">Toyota</option> <option value="2">Nissan</option> <option value="3">Dodge</option> </select> </form> <script type="text/javascript"> jQuery(function() { jQuery('#car').change(function() { this.form.submit(); }); }); </script> 代码的更快版本看起来像这样。 <form action="" method="post"> <select name="id" id="cars" onchange="javascript:this.form.submit()"> <option value="">Choose</option> <option value="1">Toyota</option> <option value="2">Nissan</option> <option value="3">Dodge</option> </select> <input type="submit" name="submit" value="Submit"> </form> 现在我们正在做的是添加 onchange="javascript:this.form.submit()" 到您希望触发提交操作的任何字段。当然,这只适用于支持 onchange html 属性的元素 只需使用 JavaScript 的帮助即可。 <select onchange="this.form.submit()"> ... </select> 我知道这有点旧(并且已经回答了),但是没有一个答案像我想要的那么灵活,所以下面是我最终得到的解决方案: $(document).ready(function() { $('#cars').change(function() { var parentForm = $(this).closest("form"); if (parentForm && parentForm.length > 0) parentForm.submit(); }); }); 即使你也可以做到这一点: <form action="" method="post"> <select name="id" id="cars"> <option value="">Choose</option> <option value="1">Toyota</option> <option value="2">Nissan</option> <option value="3">Dodge</option> </select> <input id='submit' type="submit" name="submit" value="Submit"> $(document).ready(function() { $('#cars').on('change', function() { $('#submit').click(); }); }); 我的解决方案是创建隐藏的提交按钮并在更改事件上单击它。 <select name="id" onchange="javascript:$('#submit').click();"> <option value="0">Please Select Web Site</option> <option value="1">------</option> <option value="2">-------</option> </select> <button id="submit" class="hidden" type="submit" name="submit" value="Submit"/> 我的代码使用 jquery 提交表单,没有提交按钮,并且选择元素上有更改事件: <script> $(function () { $("#select123").on("change", function() { $(this).closest('form').submit(); }); }); </script>

回答 8 投票 0

角度输入范围滑块对十进制数据绑定值进行四舍五入

我在 Angular 的表单中创建了一个范围滑块,用于记录值和显示记录的值。 我在 Angular 的表单中创建了一个范围滑块,用于记录值并显示记录的值。 <input [formControlName]="object.id" [id]="object.id" type="range" [(ngModel)]="object.answer" [step]="object.step" [min]="object.minValue" [max]="object.maxValue"> object包含来自数据库的 id、answer、step、min、max 的键值对。 对于以下对象, { id: 1, answer: 4, step: 0.25, minValue: 3, maxValue: 4 } 滑块显示正确的值,即 4。 但是,使用 answer: 3.25 和 answer: 3.75,分别显示 3 和 4。滑块似乎将小数 answer 值四舍五入为最接近的整数。 我在 MDN 查找输入范围,在步骤部分下,有一条注释: 当用户输入的数据不符合步进配置时,用户代理可能会四舍五入到最接近的有效值,当有两个同样接近的选项时,更喜欢正方向的数字。 但是,3.25 或 3.75 不是有效值吗?对于给定的最小值:3、最大值:4 和步长:0.25,两者都可以写为 (min + multiple of step) <= max 我还查找了如何禁用用户代理验证here,并在表单标签中使用了novalidate属性,并且滑块仍然无法正确显示十进制值。但是,它可以正确显示指定范围内的整数值。 编辑1:我尝试检查不同类型的“步骤”值。对于整数步长 (1, 2, 3),小数 > 1 步长 (1.1, 1.5, 2.5),它可以正确显示。小数点似乎无法正确显示< 1 steps (0.5, 0.3). 编辑2:此外,如果我使用 step="0.25" 而不是 [step]="object.step",它会正确显示。因此,静态步骤正在工作,但属性绑定的步骤值无法正常工作,步骤值也是如此 < 1. 实例 我尝试通过少量调整来复制您的场景,并且似乎工作正常。请看看是否对您有帮助。请随意根据您的要求调整 obj 的模型值。 模板: <hello name="{{ name }}"></hello> <p> Start editing to see some magic happen :) <br>Please see the console :) </p> <input [id]="obj.id" type="range" [step]="obj.step" [min]="obj.minValue" [max]="obj.maxValue" [(ngModel)]="obj.answer" (ngModelChange)="valueChanged($event)" > 成分: import { Component, VERSION, OnChanges } from "@angular/core"; @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { name = "Angular " + VERSION.major; obj = { id: 1, answer: 0, step: 0.25, minValue: 0, maxValue: 47.8 }; constructor() {} valueChanged(event:any){ console.log(event); console.log(this.obj); } } 我将 $event.target.value 分配给(输入)事件上的 ngModel 变量。

回答 2 投票 0

如何修复Flutter中“参数类型‘Icon’无法分配给参数类型‘String’”

我的 Flutter 代码中遇到以下错误: 正在执行热重启...正在将文件同步到设备 sdk gphone64 x86 64... lib/product_add_edit.dart:48:19:错误:参数类型“图标”...

回答 2 投票 0

路由存储客户端不支持 GET 方法。支持的方法:POST

我遇到以下问题: 路由 store-cliente 不支持 GET 方法。支持的方法:POST。 我正在使用 Laravel 10。 我已经清理了缓存、路由,甚至重新启动了我的

回答 1 投票 0

为什么我的<a>标签没有将我带到指定的页面?

我有一个包含在标签中的提交按钮,用于提交我的表单,运行 JavaScript 函数将表单保存在本地存储中并将用户带到下一页。然而,表格出来后...

回答 1 投票 0

输入类型=复选框名称需要访问javascript函数并上传以进行php表单处理

问题是捕获用于 PHP 处理的“name”变量,并将其发送到 JavaScript 函数 checkTotal()。 “choice”用作传递给 JavaScr 的变量...

回答 1 投票 0

initialValues 更改时 antd 表单不会呈现

我从 useSession() 挂钩获取数据并将其用于我的初始值。当我检查我的组件时一切正常。但是当用户刷新 ui 上的页面时,我的值在 ui 上被清除。但我看得见

回答 1 投票 0

从右到左开始表格单元格

我正在编写一个希伯来语网页,我需要创建一个表单,问题是我需要单元格从右到左开始,而不是默认从左到右开始,所以当我按下选项卡按钮时,我。 ..

回答 3 投票 0

什么是 onChange={(e) => setName(e.target.value)}?在 React 中的意思是

我是 React 新手;我正在学习 React Form。我理解代码,但我并不真正理解背后的概念以及为什么我们使用这一行“ onChange={(e) => setName(e.target.value)}&

回答 5 投票 0

提交前请重命名 7 中的联系人姓名

我正在尝试重命名7中联系人中的输入名称。与谷歌表格集成,输入名称必须与工作表中命名的列相同。问题是当你需要两个单词的名字时......

回答 1 投票 0

ms 访问导航表单按钮格式

我正在使用带有水平菜单的导航表单。在布局视图中,按钮根据需要起作用,在悬停和单击时更改颜色。当按下另一个按钮时,它们会恢复到原始颜色...

回答 1 投票 0

如何从 Flask WTForms 验证错误生成 HTML5 良好的验证错误消息

我尝试使用 Flask WTForms 并组合一些 HTML 代码在网站上生成提交表单。目前为止涉及到的代码如下: 服务器.py: 从烧瓶导入烧瓶,

回答 1 投票 0

react-hook-form 为什么数字输入类型会忽略 maxLength?

我正在使用react-hook-form创建一个4位数字的输入,这不会让用户输入字母或字符,但它会忽略 maxLength 值。我能够获得输入允许号码...

回答 6 投票 0

PHP变量无法立即获取HTML选项值

尝试用PHP代码建立一个包含添加产品功能的网站。假设我们要添加手机产品,类别将是手机,子类别可以是三星或 iPhone。又一个考试...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.