forms 相关问题

我尝试使用 jquery 提交表单。表单提交正确，但提交后未清除表单。这是我的 jquery 代码 $（文档）。</desc> <question vote="1"> <p>我尝试使用 jquery 提交表单。表单提交正确，但是提交后没有清除表单。</p> <p>这是我的jquery代码</p> <pre><code><script type="text/javascript"> $(document).ready(function(){ $("#save").click(function(){ $("#myform").submit(); $("#myform")[0].reset(); }); }); </script> </code></pre> <p>这是我的表格</p> <pre><code><form action="http://localhost/newsletter/index.php/email/send" method="post" accept-charset="utf-8" id="myform" name="myforms"> <p> <label for="name">Email Address </label> <input type="text" name="email" id="email" value="<?php echo set_value('email');?>"> <input type="button" value="Go" id="save"></p> </form> </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>$("#myform").get(0).reset();</code></pre> 代替 <pre><code>$("#myform")[0].reset();</code></pre> 吗？</p> </answer> <answer tick="false" vote="0"> <p>你可以这么做。</p> <pre><code>document.getElementById("myform").reset(); </code></pre> </answer> </body></html>

jquery html forms

回答 0 投票 0

隐藏 Flutter Form Builder 上的字段

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

flutter forms field hide formbuilder

回答 2 投票 0

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

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

angular forms validation

回答 1 投票 0

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

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

flutter forms user-experience

回答 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>

javascript html forms dom

回答 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 })

javascript jquery forms datepicker momentjs

回答 1 投票 0

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

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

laravel forms validation laravel-request

回答 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>

angular forms input angular-forms

回答 2 投票 0

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

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

javascript html forms radio-button

回答 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;">  {% 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>  <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 错误。

javascript python-3.x django forms django-forms

回答 1 投票 0

forms 相关问题

最新问题