forms 相关问题

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

如果我在数字输入中输入非数字,如何才能看到 HTML5 验证错误?

我正在参加 freeCodeCamp 响应式星期三设计挑战,我需要构建一个调查表,但我遇到了一些验证错误的问题。这是要求:“如果我输入非 nu...

回答 1 投票 0

动态添加项目到清单(这是一个表单)

我想创建一个表单,用于将项目添加到清单中,其中项目的最小值为 1,但最大值未知。为了实现这一点,我尝试将 formControls 动态添加到表单中。我有几个

回答 1 投票 0

Laravel 通过克隆表单实现同名多个输入字段

在注册过程中,用户可以提供多个过去的工作经验详细信息,但最初只有一个表单,用户可以通过单击“添加”按钮添加更多字段,我使用克隆方法克隆整个原始信息...

回答 1 投票 0

NextJS 14.0.3 - 未捕获(承诺中)错误:NEXT_REDIRECT

我有一个登录页面,登录成功后我需要重定向到应用程序部分,如果没有用户登录,应用程序部分会重定向到登录。 AuthGuard 组件中的重定向效果很好: 导入 {

回答 1 投票 0

在php表单中以固定格式输入手机号码

我在 php 中有一个小表单,其中有一个手机号码输入字段。目前我输入的手机号码以 09 开头,最多 11 位数字。目前我可以输入电话号码...

回答 2 投票 0

当我向上移动列表时,列表框中的工具提示文本未更新

我有一个 powershell 脚本,我在其中查找一些文件并对其进行排序以填充多选列表框。我添加了一个函数和一个处理程序,以显示带有“上次修改”日期的工具提示...

回答 1 投票 0

mysql 更新正在更新所有行而不是一行

我遇到了一个问题,我似乎无法弄清楚出了什么问题。我知道 SQL 注入,但考虑到用户,我并不担心。 好吧,我遇到的问题是我更新的时候。如果我把 $updatet...

回答 1 投票 0

C# Windows 窗体 SQL 语法不正确,接近错误,无缘无故

在我的代码中,有一个列我称为[产品名称],它在我的sql服务器中完全定义,应该没有问题。这段代码需要将 TextBox1 中的数据添加到该列,但我...

回答 1 投票 0

Django 表单 FileField 错误“此字段为必填项”

我使用 django 生成的表单视图收到此字段为必填错误。 我有一个扫描模型,如下所示: 类扫描(模型.模型): device = models.ForeignKey(Device, nul...

回答 1 投票 0

HTML 登录按钮无法点击,工作正常,并且 zxcvbn 结果未显示

密码流星应用程序,但 html 按钮不起作用。在js中,我尝试使用zxcvbn进行计算,但我猜有些变量是空的。但是当我尝试解析对象按钮时不起作用。什么...

回答 1 投票 0

在 jquery 中提交后清除表单输入字段

我尝试使用 jquery 提交表单。表单提交正确,但提交后未清除表单。 这是我的 jquery 代码 $(文档)。</desc> <question vote="1"> <p>我尝试使用 jquery 提交表单。表单提交正确,但是提交后没有清除表单。</p> <p>这是我的jquery代码</p> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; $(document).ready(function(){ $(&#34;#save&#34;).click(function(){ $(&#34;#myform&#34;).submit(); $(&#34;#myform&#34;)[0].reset(); }); }); &lt;/script&gt; </code></pre> <p>这是我的表格</p> <pre><code>&lt;form action=&#34;http://localhost/newsletter/index.php/email/send&#34; method=&#34;post&#34; accept-charset=&#34;utf-8&#34; id=&#34;myform&#34; name=&#34;myforms&#34;&gt; &lt;p&gt; &lt;label for=&#34;name&#34;&gt;Email Address &lt;/label&gt; &lt;input type=&#34;text&#34; name=&#34;email&#34; id=&#34;email&#34; value=&#34;&lt;?php echo set_value(&#39;email&#39;);?&gt;&#34;&gt; &lt;input type=&#34;button&#34; value=&#34;Go&#34; id=&#34;save&#34;&gt;&lt;/p&gt; &lt;/form&gt; </code></pre> <p>我只想在提交后清除表单,但无法重置字段,数据已提交并仍然保留在字段中..请问有什么建议吗?</p> </question> <answer tick="false" vote="0"> <p>这是因为你使用了CodeIgniter的功能<pre><code>set_value</code></pre>。其中将包含提交的电子邮件。您可能在控制器中使用表单验证库,在其中添加一些逻辑,以便您的视图“知道”验证成功时不应显示电子邮件。</p> </answer> <answer tick="false" vote="0"> <p>您尝试过使用 <pre><code>$(&#34;#myform&#34;).get(0).reset();</code></pre> 代替 <pre><code>$(&#34;#myform&#34;)[0].reset();</code></pre> 吗?</p> </answer> <answer tick="false" vote="0"> <p>你可以这么做。</p> <pre><code>document.getElementById(&#34;myform&#34;).reset(); </code></pre> </answer> </body></html>

回答 0 投票 0

隐藏 Flutter Form Builder 上的字段

假设我们想在表单提交时传递一个 ID,但我们不希望用户看到它,在 flutter_form_builder 上:^7.1.1 没有隐藏字段的选项,有什么解决方法吗?

回答 2 投票 0

Angular:嵌套形式的 ExpressionChangedAfterChecked,并由子级添加验证器

我正在尝试将 Angular 中的表单传递给 Angular 中的子组件。在子组件中,我动态地向表单添加一些控件并使用自定义控件(子组件的子组件

回答 1 投票 0

Flutter Form 获取所有表单字段的有效性且不报错

基本上,我正在寻找 FormFieldState.isValid 但寻找 FormState。 所以挑战是我想动态启用/禁用我的表单提交按钮,具体取决于所有表单字段是否...

回答 3 投票 0

无法使用 JavaScript 从输入中删除图像

我在 HTML 和 JavaScript 下面有这段代码。有一段 PHP 代码正在成功将所有内容发送到数据库,无需显示。 我在 HTML 和 JavaScript 下面有这段代码。有一段 PHP 代码正在成功将所有内容发送到数据库,无需显示。 <form action="" method="post" enctype="multipart/form-data"> <label for="titulo">Título:</label> <input type="text" id="titulo" name="titulo" required><br><br> <label for="descricao">Descrição:</label><br> <textarea id="descricao" name="descricao" required></textarea><br><br> <div id="preview"></div> <label for="imagens">Imagens:</label> <input type="file" id="imagens" name="imagens[]" multiple accept="image/*"> <small>(Você pode selecionar várias imagens segurando a tecla Ctrl)</small><br><br> <input type="submit" value="Cadastrar Anúncio"> </form> <script> (function() { function previewImages() { var input = document.getElementById("imagens"); var preview = document.getElementById("preview"); preview.innerHTML = ""; // Limpa a prévia de imagens anterior if (input.files && input.files.length > 0) { for (var i = 0; i < input.files.length; i++) { var reader = new FileReader(); reader.onload = function(e) { var imageContainer = document.createElement("div"); imageContainer.className = "image-container"; var image = document.createElement("img"); image.src = e.target.result; image.style.maxWidth = "100px"; // Define a largura máxima das miniaturas imageContainer.appendChild(image); var deleteButton = document.createElement("button"); deleteButton.innerText = "Deletar"; deleteButton.className = "delete-button"; deleteButton.addEventListener("click", function() { // Função para deletar a imagem imageContainer.parentNode.removeChild(imageContainer); // Desanexar a imagem do input file //input.value = ""; }); imageContainer.appendChild(deleteButton); preview.appendChild(imageContainer); }; reader.readAsDataURL(input.files[i]); } } } // Adicione o evento onchange ao campo de entrada de arquivo fora das tags HTML var imagensInput = document.getElementById("imagens"); imagensInput.onchange = previewImages; })(); </script> 问题是基于以下事实:当我单击图像缩略图下方出现的“删除”按钮时,我认为它实际上删除了缩略图并似乎删除了临时文件。 这是已经显示的代码的独立部分,负责删除图像缩略图。 var deleteButton = document.createElement("button"); deleteButton.innerText = "Deletar"; deleteButton.className = "delete-button"; deleteButton.addEventListener("click", function() { // Função para deletar a imagem imageContainer.parentNode.removeChild(imageContainer); // Desanexar a imagem do input file //input.value = ""; }); imageContainer.appendChild(deleteButton); preview.appendChild(imageContainer); 但是,附加到输入的所有图像(为多个文件制作)都会发送到数据库,包括通过按钮删除的图像。 正确的做法是保留通过按钮删除的图像并防止其发送到数据库。 我已经阅读了其他线程中提供此解决方案的答案: reader.onload = function(e) { //rest of code omitted input.value = ""; }); 但这不起作用,因为当您插入这行代码时,所有图像都会被删除,而不是唯一选择的图像。 如何解决? 这是一个很长的示例,但我的想法是维护所选文件的数组(此处为 Map 对象)。可以从该数组中添加文件(用于添加一个或多个文件的文件选择器)或删除文件(您的删除按钮)。最后(在提交事件上)您可以创建一个 formData 对象并添加数组中所有表单字段和文件的值。让 JavaScript 通过以 formData 对象作为主体的获取请求来处理提交事件。 var images = new Map(); const preview = document.getElementById('preview'); document.forms.form01.addEventListener('submit', e => { e.preventDefault(); let data = new FormData(e.target); data.delete('images'); images.forEach((file, id) => { let blob = dataURItoBlob(file.src); data.append('images[]', blob, file.name); }); fetch('post.php', { method: 'POST', body: data }); }); document.forms.form01.images.addEventListener('input', e => { let input = e.target; [...input.files].forEach(file => { let reader = new FileReader(); reader.fileinfo = { name: file.name, lastModified: file.lastModified, size: file.size, type: file.type }; reader.addEventListener('load', e => { let file = e.target.fileinfo; file.src = e.target.result; images.set(`id${file.lastModified}${file.size}`, file); previewImages(); }); reader.readAsDataURL(file); }); input.value = ""; }); document.forms.form01.addEventListener('click', e => { switch (e.target.name) { case 'delete': images.delete(e.target.value); previewImages(); break; case 'browse': e.target.form.images.click(); break; } }); function previewImages() { // add images to the preview div if not already there images.forEach((file, id) => { if (!preview.querySelector(`#${id}`)) { let imageContainer = document.createElement("div"); imageContainer.className = "image-container"; imageContainer.id = id; let image = document.createElement("img"); image.src = file.src; image.style.maxWidth = "100px"; // Define a largura máxima das miniaturas imageContainer.appendChild(image); var deleteButton = document.createElement("button"); deleteButton.innerText = "Deletar"; deleteButton.name = "delete"; deleteButton.type = "button"; deleteButton.value = id; imageContainer.appendChild(deleteButton); preview.appendChild(imageContainer); } }); // remove images from preview if not in the Map object preview.querySelectorAll('.image-container').forEach(div => { if (!images.has(div.id)) { div.remove(); } }); } function dataURItoBlob(dataURI) { let byteString = atob(dataURI.split(',')[1]); let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; let ab = new ArrayBuffer(byteString.length); let ia = new Uint8Array(ab); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ab], { type: mimeString }); } <form name="form01" action="" method="post" enctype="multipart/form-data"> <label for="titulo">Título:</label> <input type="text" id="titulo" name="titulo" required><br><br> <label for="descricao">Descrição:</label><br> <textarea id="descricao" name="descricao" required></textarea><br><br> <div id="preview"></div> <label>Imagens: <button type="button" name="browse">Browse…</button> <input type="file" name="images" multiple accept="image/*" style="display:none"> </label> <small>(Você pode selecionar várias imagens segurando a tecla Ctrl)</small><br><br> <input type="submit" value="Cadastrar Anúncio"> </form>

回答 1 投票 0

一个日期选择器值自动出现在第二个日期选择器中?

我有一个包含日历/日期选择器两个字段的表单。 1号场 我有一个包含日历/日期选择器两个字段的表单.. 1号场 <input id="gnd_institutiondate_val" class="form-control" placeholder="DD-MM-YYYY" data-date-format="DD-MM-YYYY" data-inputmask="'mask': '99-99-9999'" required="" name="gnd_institutiondate" type="text"> 2号场 <input id="gnd_courtregisterdate_val" class="form-control" placeholder="DD-MM-YYYY" data-date-format="DD-MM-YYYY" data-inputmask="'mask': '99-99-9999'" required="" name="gnd_courtregisterdate" type="text"> 我希望当我从字段 1(日历/日期选择器)中选择日期时,它会自动填充到字段 2(日历/日期选择器)中。 (使用 Moment.js 、 DataTables、Select2、JQuery (javascript 库)和 UI 框架是 bootstrap。) 我想链接两个日期选择器,以便在一个日期选择器中选择日期时,第二个日期选择器会自动采用相同的日期。 请为我建议一个 javascript 代码或任何 chrome 扩展...我是编码新手... 以下代码适用于另一个相同的字段。 setTimeout(function() { var institutionNoInput = document.getElementById("gnd_institutionno"); var courtRegisterNoInput = document.getElementById("gnd_courtregisterno"); institutionNoInput.addEventListener("input", function() { courtRegisterNoInput.value = institutionNoInput.value; }); }, 1000); // You can adjust the timeout value (in milliseconds) as needed enter code here document.getElementById('date1').addEventListener('change',(e)=>{ document.getElementById('date2').value=e.target.value })

回答 1 投票 0

如何验证 Laravel 请求文件上的表单数据加密值

这是我的代码“FormRequest”类 公共函数规则() { 返回 [ 'person_id' => '必填|数字', '名称' => '必需|最大:32', ]; } 公共职能

回答 1 投票 0

如何在 Angular 中创建带有输入的自定义组件并将其绑定到表单?

假设我们有这样的东西 ... 假设我们有这样的东西 <form #f="ngForm" (ngSubmit)="onSubmit()"> <rc-some-component ngModel name="someComponent"></rc-some-component> <label for="fname">First name:</label> <input ngModel type="text" id="fname" name="fname"><br><br> </form> rc-some-component 的组件是: <div> //...some html <input ngModel name="someComponent" type="file" class="d-none" (change)="onUploadImage()" /> </div> 当我尝试检查 onSubmit 上发送的数据时,我只从 fname 获取数据。这意味着我无法从 rc-some-component 内部的输入获取数据。我该如何尝试解决这样的问题? 我应该创建类似 ControlValueAccesor 的东西吗? 我只想在调用 onSubmit 时访问输入数据(来自此自定义组件)(这样我就可以在 this.formName.value 中检查它) 您需要实现 ControlValueAccessor 接口,如果您有兴趣添加验证,甚至可能还需要实现 Validator 接口。 我写了一篇关于自定义表单控件的文章,您可以查看。 我还创建了这个 StackBlitz 演示,它正是您所寻找的。 如果您使用 FormGroup 和 FormControls 构建表单,这里是一个解决方案 首先,在您的子组件上,您需要使用 <div [formGroup]="nameOfFG"> 打包输入,在您的输入上,您需要设置属性 formControl="nameOfFC'。 在您的类中,您唯一需要做的就是提供@Input 属性。在这种情况下,您需要 @Input nameOfFG:FormGroup 和 @Input nameOfFC:string 。然后,在父 component.html 中,您需要输入这些值 - 您的 nameOfFG 和 nameOfFC。表单需要位于 [] 中,因为您将从组件中绑定它。 <custom-component [nameOfFG]="fromGroup" nameOfFC="formControl"></custom-component> 然后,在父类中只需使用您正在使用的 formControl 初始化 ngOnInit() 中的 formgroup。 如果您仍然想反其道而行之,请查看EventEmitter。基本上在子组件上,当输入更改时将调用 EventEmitter,通过 @Output 导出,然后可以使用它来更改父类中的变量 - <custom-component (event)="changeYourVariable()"></custom-component>

回答 2 投票 0

如何使用键盘箭头禁用单选按钮选择的更改?

我有一个带有 6 个单选按钮的 HTML 表单。每个单选按钮在被选中时都会对后端进行 API 调用并获取一些数据以填充表单中的下一个选择输入。如果一个人选择了一个...

回答 1 投票 0

尝试将 JavaScript 中的表单数据发送到我的 Django Url 时,ROM Djanjo 出现错误 500

我正在尝试在 Djanjo 中构建一个待办事项列表,并且在尝试构建编辑视图功能时遇到问题,下面是我的 home.html 文件 我正在尝试在 Djanjo 中构建一个待办事项列表,但在尝试构建编辑视图功能时遇到问题,下面是我的 home.html 文件 <div class="col-md-7 col-lg-7" style="height: 450px; overflow: scroll;"> <!-- List of all the tasks for the day --> {% for task in tasks %} <div class="card m-1"> <div class="card-body"> <span id="task_{{ task.pk }}_text">{{ task.task }}</span> <span style="position: relative; float: right;"> <a href="{% url 'mark_as_done' task.pk %}"class="btn btn-success"><i class="fa fa-check"></i> Mark as Done</a> <a href="{% url 'delete_task' task.pk %}" class="btn btn-danger"><i class="fa fa-trash"></i></a> <!-- When this button is clicked, a textbox/form will appear, after it appears and you press submit task is updated --> <a onclick="showTextBox('{{ task.pk }}')" class="btn btn-primary"><i class="fa fa-pencil"></i></a> <form id="textbox_{{ task.pk }}" onsubmit="saveValue(event, '{{ task.pk }}')" method="post"> {% csrf_token %} <input type="text" id="inputValue_{{ task.pk }}" name="edited_task" placeholder="Update task"> <input type="submit" value="Submit"> </form> </span> </div> </div> {% endfor %} </div>`` 接下来是我的脚本,我尝试将数据发送到后端 <script> function showTextBox(key){ /*console.log(100); console.log(`textbox_${key}`);*/ var textbox = document.getElementById(`textbox_${key}`); textbox.classList.toggle('hidden-textbox'); } function saveValue(event,key){ /*each task object has a primary key associated to it*/ event.preventDefault(); var primary_key=key; var enteredValue = document.getElementById(`inputValue_${primary_key}`).value; const base="{% url 'edit' 123 %}".slice(0, -4); const url=`${base}${primary_key}/`; fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token }}' }, body: JSON.stringify({ value: enteredValue }), }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); } </script> 下面是我的urls.py from django.urls import path from . import views urlpatterns=[ path('addTask/',views.addTask, name="addTask"), path('mark_as_done/<int:pk>',views.mark_as_done, name="mark_as_done"), path('mark_as_undone/<int:pk>',views.mark_as_undone, name="mark_as_undone" ), path('edit/<int:pk>/',views.edit, name="edit"), path('delete_task/<int:pk>/',views.delete_task, name="delete_task") ] 下面是views.py def edit(request,pk): enteredValue= request.POST.get('edited_task') get_task=get_object_or_404(Task,pk=pk) get_task.task=enteredValue get_task.save() return redirect('home') 最后但并非最不重要的是 models.py from django.db import models # Create your models here. class Task(models.Model): task = models.CharField(max_length=300) is_completed= models.BooleanField(default=False) created_at=models.DateTimeField(auto_now_add=True) updated_at=models.DateTimeField(auto_now=True) def __str__(self): return self.task 除了编辑功能之外,一切都按预期工作。关于问题可能是什么的任何想法吗? 我尝试了故障排除和调试代码,我认为这可能与我的 fetch 中的 url 有关,但我尝试了很多不同的变体,但没有任何效果。我希望将任务更改为您在表单中提交的任何内容。 如果您的 IntegrityError 是 None 类型,似乎会出现问题 enteredValue 。确保您发送的值有效。 此外,像这样修改你的edit视图来处理这种情况 enteredValue = request.POST.get('edited_task') get_task = get_object_or_404(Task, pk=pk) if enteredValue is not None: get_task.task = enteredValue get_task.save() return redirect('home') 这样,您只会在提供非 NULL 值时更新任务,这将避免 not NULL CONSTRAINT 错误。

回答 1 投票 0

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