当用户尝试提交表单时，submit事件将发送到元素。它只能附加到表单元素。可以通过单击显式<input type =“submit”>，<input type =“image”>或<button type =“submit”>，或者在某些表单元素具有焦点时按Enter键来提交表单。
livewire 表单提交按钮重新加载页面并附加一个“？”在网址末尾
这是我的 livewire 组件在视图中的命名位置 {{ __('位置管理') }} 这是我的 Livewire 组件，在视图中命名为位置 <div> <x-slot name="title"> {{ __('Location Management') }} </x-slot> <x-slot name="content"> <!-- /Add modal --> <div wire:ignore.self class="modal fade" id="modal-add" > <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Create New Location</h4> <button type="button" class="close" data-dismiss="modal" aria- label="Close"> <span aria-hidden="true">×</span> </button> </div> <form wire:submit.prevent="store" action="#" > <div class="modal-body"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="location_name">Location Name</label> <input type="text" class="form-control" placeholder="Enter Location Name" wire:model="location" id="location" required> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="status">Select Status</label> <select class="form-control" wire:model="status" id="status" required> <option value="Active">Active</option> <option value="Disabled">Disabled</option> </select> </div> </div> </div> </div> <div class="modal-footer justify-content-between"> <button type="button" class="btn btn-default" >Close</button> <button type="submit" class="btn btn-primary" >Save changes</button> </div> </form> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> <!-- /edit modal --> <div class="modal fade" id="modal-edit"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Edit Location</h4> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="exampleInputEmail1">Location Name</label> <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter Route Name"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label>Select Status</label> <select class="form-control"> <option>Active</option> <option>Disabled</option> </select> </div> </div> </div> </div> <div class="modal-footer justify-content-between"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" wire:model="isSubmitting">Save changes</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-header"> <div class="button-group"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-add">Create</button> <div class="float-right"> <button type="button" class="btn btn-secondary">Import</button> <button id="exportBtn" type="button" class="btn btn-secondary">Export</button> </div> </div> </div> <!-- /.card-header --> <div class="card-body"> <div class="row"> <div class="col-md-12"> <div class="gv"> <div class="table-responsive"> <table id="datatable" class="grid table table-striped table-bordered" style="width:100%"> <thead> <tr> <th>Location</th> <th>Status</th> <th>Created_at</th> <th>Action</th> </tr> </thead> <tbody> @foreach ($records as $record) <tr> <td>{{ $record->location_name }}</td> <td>{{ $record->status }}</td> <td>{{ $record->created_at }}</td> <td> <a href="#" data-toggle="modal" data-target="#modal-edit"><i class="pr-2 fa fa-edit text-green"></i></a> <a href="#" wire:click="deleteLocation({{ $record->id }})"><i class="fa fa-trash text-red"></i></a> </td> </tr> @endforeach </tbody> <tfoot> <tr> <th>Location</th> <th>Status</th> <th>Created_at</th> <th>Action</th> </tr> </tfoot> </table> </div> </div> </div> </div> </div> <!-- /.card-body --> </div> <!-- /.card --> </div> <!-- /.col --> </div> <!-- /.row --> </x-slot> </div> 这是我的后端代码 <?php namespace App\Livewire; use App\Models\Location; use Illuminate\Support\Facades\Log; use Illuminate\Support\Facades\Session; use Livewire\Component; class Locations extends Component { public $location_name; public $status; public $records; // Define a public property to hold the locations public function mount() { // Fetch locations from the database $this->records = Location::all(); } public function store() { dd($this->location_name, $this->status); Location::create([ 'location_name' => $this->location_name, 'status' => $this->status, ]); // Reset form fields after submission $this->reset(['location_name', 'status']); Session::flash('message', 'Data Saved Successfully'); Session::flash('alert-class', 'alert-success'); } public function deleteLocation($locationId) { // Find the location by ID $location = Location::findOrFail($locationId); // Delete the location $location->delete(); // Fetch locations again after deletion $this->records = Location::all(); // Optionally, you can display a success message session()->flash('message', 'Location deleted successfully.'); } public function render() { return view('livewire.locations'); } } 下面是我的控制器 <?php namespace App\Livewire; use App\Models\Location; use Illuminate\Support\Facades\Log; use Illuminate\Support\Facades\Session; use Livewire\Component; class Locations extends Component { public $location_name; public $status; public $records; // Define a public property to hold the locations public function mount() { // Fetch locations from the database $this->records = Location::all(); } public function store() { dd($this->location_name, $this->status); Location::create([ 'location_name' => $this->location_name, 'status' => $this->status, ]); // Reset form fields after submission $this->reset(['location_name', 'status']); Session::flash('message', 'Data Saved Successfully'); Session::flash('alert-class', 'alert-success'); } public function deleteLocation($locationId) { // Find the location by ID $location = Location::findOrFail($locationId); // Delete the location $location->delete(); // Fetch locations again after deletion $this->records = Location::all(); // Optionally, you can display a success message session()->flash('message', 'Location deleted successfully.'); } public function render() { return view('livewire.locations'); } } 在过去的三天里，我一直在努力解决有关使用 Livewire 在 Laravel 应用程序中提交表单的持续问题。尽管进行了大量的研究和实验，我仍然无法在不触发页面重新加载的情况下实现提交表单的所需功能。 问题的关键在于将 Livewire 与 Bootstrap 模式集成以创建无缝的用户体验。虽然我已成功设置模式并使用wire:model将表单字段连接到Livewire属性，但每次尝试提交表单都会导致不良的页面刷新。 我广泛探索了 Livewire 的文档，尝试了各种方法，例如使用wire:submit.prevent来拦截表单提交并防止默认行为。虽然这种方法可以防止页面重新加载，但它并不能解决在不中断用户流的情况下触发服务器端操作的根本问题。 此外，我在 Livewire 组件中无缝编排服务器端操作时遇到了挑战。虽然我了解基本的生命周期挂钩（例如 mount()），但我很难在不遇到意外行为的情况下执行更复杂的操作（例如数据库更新或 API 调用）。 尽管我尽了最大努力，但我还是遇到了障碍，需要指导来克服这些挑战。我相信可能存在我忽略的特定于 Livewire 的细微差别或最佳实践，并且我渴望从其他人的经验和见解中学习。 总之，我的主要目标是无需重新加载页面即可提交表单。 好吧，经过多次尝试，我找到了解决方案， 问题出在两个文件中，app.blade（布局模板）和locations.blade .i 将我的位置内容包含在内容标签中，而不是仅将其包含在 div 标签中，而不是使用 {{$我在 app.blade 中使用了 {{$slot}} 的内容}}
<form name="contactForm" class="customform" action="contact.php" method="post"> <div class="s-12"> <div class="margin"> <div class="s-12 m-12 l-6"> <input id="v1" name="Name" class="Name" placeholder="Name" title="Name" type="text" required> <p class="name-error form-error">Please enter your name.</p> </div> <div class="s-12 m-12 l-6"> <input id="v2" name="Email" class="Email" placeholder="Email" title="Email" type="text" required> <p class="email-error form-error">Please enter your e-mail.</p> </div> </div> </div> <div class="s-12"> <input id="v3" name="Subject" class="Subject" placeholder="Subject" title="Subject" type="text" required> <p class="subject-error form-error">Please enter the subject.</p> </div> <div class="s-12"> <textarea id="v4" name="Message" class="Message" placeholder="Message" rows="3" required></textarea> <p class="message-error form-error">Please enter your message.</p> </div> <div class="s-12"><button onsubmit="A1" class="s-12 submit-form button background-primary text-white" type="submit">Submit</button></div> </form> <script> function A1() { alert("Thank You!"); return true; } </script> 表单中的所有内容都工作正常，但单击提交后未显示消息框！我只是希望弹出一个消息框，显示“提交已发送！”一旦用户单击“提交”就会出现。我尝试了 onclick="active" 但这个问题是即使整个表单留空它也会弹出。 onsubmit 事件的正确位置是在 <form> 标签内，而不是在按钮元素上。当在表单中使用类型为 submit 的按钮或输入时，必须将“onsubmit”事件附加到 <form> 标签本身。 这是更正后的版本形式： <form name="contactForm" class="customform" action="contact.php" method="post" onsubmit="A1()"> <div class="s-12"> <div class="margin"> <div class="s-12 m-12 l-6"> <input id="v1" name="Name" class="Name" placeholder="Name" title="Name" type="text" required> <p class="name-error form-error">Please enter your name.</p> </div> <div class="s-12 m-12 l-6"> <input id="v2" name="Email" class="Email" placeholder="Email" title="Email" type="text" required> <p class="email-error form-error">Please enter your e-mail.</p> </div> </div> </div> <div class="s-12"> <input id="v3" name="Subject" class="Subject" placeholder="Subject" title="Subject" type="text" required> <p class="subject-error form-error">Please enter the subject.</p> </div> <div class="s-12"> <textarea id="v4" name="Message" class="Message" placeholder="Message" rows="3" required></textarea> <p class="message-error form-error">Please enter your message.</p> </div> <div class="s-12"><button onsubmit="A1" class="s-12 submit-form button background-primary text-white" type="submit">Submit</button></div> </form> <script> function A1() { alert("Thank You!"); return true; } </script> 要让用户点击提交后弹出消息框，需要调整标签中的onsubmit属性，以正确调用A1()函数。目前，它只是将属性设置为“A1”，但应该是 onsubmit="return A1()" 才能正确调用该函数并处理表单提交。这是带有消息框的更正后的表格： <form name="contactForm" class="customform" action="contact.php" method="post" onsubmit="return A1()"> <div class="s-12"> <div class="margin"> <div class="s-12 m-12 l-6"> <input id="v1" name="Name" class="Name" placeholder="Name" title="Name" type="text" required> <p class="name-error form-error">Please enter your name.</p> </div> <div class="s-12 m-12 l-6"> <input id="v2" name="Email" class="Email" placeholder="Email" title="Email" type="text" required> <p class="email-error form-error">Please enter your e-mail.</p> </div> </div> </div> <div class="s-12"> <input id="v3" name="Subject" class="Subject" placeholder="Subject" title="Subject" type="text" required> <p class="subject-error form-error">Please enter the subject.</p> </div> <div class="s-12"> <textarea id="v4" name="Message" class="Message" placeholder="Message" rows="3" required></textarea> <p class="message-error form-error">Please enter your message.</p> </div> <div class="s-12"><button class="s-12 submit-form button background-primary text-white" type="submit">Submit</button></div> </form> <script> function A1() { alert("Submission has been sent!"); return true; } </script> 此更改将确保仅在表单提交成功时才弹出消息框。
我正在使用 CI 为客户创建一个项目，我有一个提交按钮作为图像，但它似乎没有提交表单，我目前拥有的代码是。 我正在使用 CI 为客户创建一个项目，我有一个提交按钮作为图像，但它似乎没有提交表单，我目前拥有的代码是。 <input type="image" name="trialSubmit" id="trialSubmit" src="<?php echo base_url().'images/subscribe_free.jpg'; ?>" style="height:29px;width:207px;border-width:0px;" /> 我现在必须使用的代码如下 <input type="submit" name="trialSubmit" value=" Subscribe Free " id="" class="button" /> 如果有人能解释为什么它不能处理图像，那就太紧张了。 干杯， 是否适用于所有浏览器？还是IE特定的？如果您添加一个 onclick 事件只是为了测试呢？ onclick="javascript:document.formidhere.submit()" 我建议使用 <input type="submit" /> 或我的偏好是使用 <button type="submit>，因为浏览器与 <input type="image" /> 不一致，只需使用以下内容设置按钮样式： button{ background:url('/images/subscribe_free.jpg') no-repeat; height:29px; width:207px; border:0; } 尝试添加 value="trialSubmit" 以获取要提交的图像。似乎对我有用。 您还可以看看这个答案是否有帮助： 图像提交按钮 **inside the view(as comerciales in my case)**, <form action= "<?php echo site_url()?>/admin/doupload" method="post" enctype="multipart/form-data" > <b> Select the image to upload( Maximum size 500 kb, jpg, jpeg): </b> <input style="color:#00A76F" type="file" name="fileToUpload" id="fileToUpload"> <div class="input-group" style="left:10%;width:85%;"> <input class="btn btn-success pull-right" style="background:#00A76F" type="submit" value="Upload Image" name="submit"> </div> </form> <div class="modal-body"> <div id="user_data"> <?php if (!empty($massage)){ echo $massage ; } ?> </div> **inside the controller define a method** public function doupload(){ $root1 = $_SERVER['DOCUMENT_ROOT'];; $target_dir = $root1."/nawaloka/uploads/"; // $target_dir = $root1."/nawaloka/application/"; $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]); $uploadOk = 1; $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION); // Check if file already exists // Check file size if ($_FILES["fileToUpload"]["size"] > 500000) { $data['massage']= "Sorry, your file is too large."; $partials = array('content' => 'Admin/comerciales'); $this->template->load('template/admin_template', $partials,$data); $uploadOk = 0; } if (is_dir($target_dir) && is_writable($target_dir)) { // do upload logic here } else { echo 'Upload directory is not writable, or does not exist.'; } // Allow certain file formats if($imageFileType != "jpg" && $imageFileType != "jpeg" ) { $data['massage']= "Sorry, only JPG, JPEG files are allowed."; $partials = array('content' => 'Admin/comerciales'); $this->template->load('template/admin_template', $partials,$data); $uploadOk = 0; } // Check if $uploadOk is set to 0 by an error if ($uploadOk == 0) { $data['massage']= "Sorry, your file was not uploaded."; $partials = array('content' => 'Admin/comerciales'); $this->template->load('template/admin_template', $partials,$data); // if everything is ok, try to upload file } else { array_map('unlink', glob("/var/www/html/nawaloka/uploads/*")); if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"],"/var/www/html/nawaloka/uploads/shamith.jpg")) { $data['massage']= "The image ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded."; $partials = array('content' => 'Admin/comerciales'); $this->template->load('template/admin_template', $partials,$data); //echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded."; } else { $data['massage']= "Sorry, there was an error while uploading your file."; $partials = array('content' => 'Admin/comerciales'); $this->template->load('template/admin_template', $partials,$data); } } }
我继承了一个带有已停止工作的 PHP 表单的网站。编码水平超出了我的技能，但是我认为可能有一个简单的解决方案，就像以前的表单一样。有没有...
我正在使用 angular2 的模板表单组件，提交表单后无法在我的名字输入元素中设置焦点。表单重置正常，但无法设置焦点。
我想在ajax检查后将焦点返回到html元素（触发我的表单的提交）。因为我的表单总是被提交，最后一个焦点元素始终是提交按钮。 我怎样才能...
这是我在Firefox中通过Firebug找到的。 禁用输入的值将不会被提交 在其他浏览器中也是这样吗？ 如果是的话，原因是什么？
使用 javascript 验证 html 中的输入文本字段
需要函数() { var empt = document.forms["form1"]["Name"].value; 如果（空==“”） { Alert("请输入一个值"); </desc> <question vote="9"> <pre><code><script type='text/javascript'> function required() { var empt = document.forms["form1"]["Name"].value; if (empt == "") { alert("Please input a Value"); return false; } } </script> <form name="form1" method="" action=""> <input type="text" name="name" value="Name"/><br /> <input type="text" name="address line1" value="Address Line 1"/><br /> </code></pre> <p>我有多个输入文本字段，每个输入字段都有其默认值。在提交表格之前，我必须验证是否已填写所有字段。到目前为止，我得到了 javascript 来检查 null，因为不同的文本框有不同的默认值。如何编写 JavaScript 来验证用户已输入数据？我的意思是，脚本必须识别输入数据不是默认数据和空数据。</p> </question> <answer tick="true" vote="6"> <p>如果您不使用 jQuery，那么我只需编写一个验证方法，您可以在提交表单时触发该方法。该方法可以验证文本字段以确保它们不为空或默认值。该方法将返回一个布尔值，如果它为 false，您可以触发警报并分配类以突出显示未通过验证的字段。</p> <p>HTML：</p> <pre><code><form name="form1" method="" action="" onsubmit="return validateForm(this)"> <input type="text" name="name" value="Name"/><br /> <input type="text" name="addressLine01" value="Address Line 1"/><br /> <input type="submit"/> </form> </code></pre> <p>JavaScript：</p> <pre><code>function validateForm(form) { var nameField = form.name; var addressLine01 = form.addressLine01; if (isNotEmpty(nameField)) { if(isNotEmpty(addressLine01)) { return true; { { return false; } function isNotEmpty(field) { var fieldData = field.value; if (fieldData.length == 0 || fieldData == "" || fieldData == fieldData) { field.className = "FieldError"; //Classs to highlight error alert("Please correct the errors in order to continue."); return false; } else { field.className = "FieldOk"; //Resets field back to default return true; //Submits form } } </code></pre> <p>validateForm 方法分配要验证的元素，然后在本例中调用 isNotEmpty 方法来验证字段是否为空或尚未更改默认值。它不断调用 inNotEmpty 方法，直到返回 true 值，或者如果该字段的条件失败，它将返回 false。</p> <p>尝试一下，如果有帮助或者您有任何疑问，请告诉我。当然，您可以编写其他自定义方法来仅验证数字、电子邮件地址、有效 URL 等。</p> <p>如果您使用 jQuery，我会考虑尝试 jQuery 验证插件。我在最近的几个项目中一直使用它，它非常好。有机会的话去看看。 <a href="http://docs.jquery.com/Plugins/Validation" rel="noreferrer">http://docs.jquery.com/Plugins/Validation</a></p> </answer> <answer tick="false" vote="3"> <pre><code><form name="myForm" id="myForm" method="post" onsubmit="return validateForm();"> First Name: <input type="text" id="name" /> <br /> <span id="nameErrMsg" class="error"></span> <br /> <!-- ... all your other stuff ... --> </form> <p> 1.word should be atleast 5 letter<br> 2.No space should be encountered<br> 3.No numbers and special characters allowed<br> 4.letters can be repeated upto 3(eg: aa is allowed aaa is not allowed) </p> <button id="validateTestButton" value="Validate now" onclick="validateForm();">Validate now</button> validateForm = function () { return checkName(); } function checkName() { var x = document.myForm; var input = x.name.value; var errMsgHolder = document.getElementById('nameErrMsg'); if (input.length < 5) { errMsgHolder.innerHTML = 'Please enter a name with at least 5 letters'; return false; } else if (!(/^\S{3,}$/.test(input))) { errMsgHolder.innerHTML = 'Name cannot contain whitespace'; return false; }else if(!(/^[a-zA-Z]+$/.test(input))) { errMsgHolder.innerHTML= 'Only alphabets allowed' } else if(!(/^(?:(\w)(?!\1\1))+$/.test(input))) { errMsgHolder.innerHTML= 'per 3 alphabets allowed' } else { errMsgHolder.innerHTML = ''; return undefined; } } .error { color: #E00000; } </code></pre> </answer> <answer tick="false" vote="0"> <pre><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Validation</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> var tags = document.getElementsByTagName("input"); var radiotags = document.getElementsByName("gender"); var compareValidator = ['compare']; var formtag = document.getElementsByTagName("form"); function validation(){ for(var i=0;i<tags.length;i++){ var tagid = tags[i].id; var tagval = tags[i].value; var tagtit = tags[i].title; var tagclass = tags[i].className; //Validation for Textbox Start if(tags[i].type == "text"){ if(tagval == "" || tagval == null){ var lbl = $(tags[i]).prev().text(); lbl = lbl.replace(/ : /g,'') //alert("Please Enter "+lbl); $(".span"+tagid).remove(); $("#"+tagid).after("<span style='color:red;' class='span"+tagid+"'>Please Enter "+lbl+"</span>"); $("#"+tagid).focus(); //return false; } else if(tagval != "" || tagval != null){ $(".span"+tagid).remove(); } //Validation for compare text in two text boxes Start //put two tags with same class name and put class name in compareValidator. for(var j=0;j<compareValidator.length;j++){ if((tagval != "") && (tagclass.indexOf(compareValidator[j]) != -1)){ if(($('.'+compareValidator[j]).first().val()) != ($('.'+compareValidator[j]).last().val())){ $("."+compareValidator[j]+":last").after("<span style='color:red;' class='span"+tagid+"'>Invalid Text</span>"); $("span").prev("span").remove(); $("."+compareValidator[j]+":last").focus(); //return false; } } } //Validation for compare text in two text boxes End //Validation for Email Start if((tagval != "") && (tagclass.indexOf('email') != -1)){ //enter class = email where you want to use email validator var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ if (reg.test(tagval)){ $(".span"+tagid).remove(); return true; } else{ $(".span"+tagid).remove(); $("#"+tagid).after("<span style='color:red;' class='span"+tagid+"'>Email is Invalid</span>"); $("#"+tagid).focus(); return false; } } //Validation for Email End } //Validation for Textbox End //Validation for Radio Start else if(tags[i].type == "radio"){ //enter class = gender where you want to use gender validator if((radiotags[0].checked == false) && (radiotags[1].checked == false)){ $(".span"+tagid).remove(); //$("#"+tagid").after("<span style='color:red;' class='span"+tagid+"'>Please Select Your Gender </span>"); $(".gender:last").next().after("<span style='color:red;' class='span"+tagid+"'> Please Select Your Gender</span>"); $("#"+tagid).focus(); i += 1; } else{ $(".span"+tagid).remove(); } } //Validation for Radio End else{ } } //return false; } function Validate(){ if(!validation()){ return false; } return true; } function onloadevents(){ tags[tags.length -1].onclick = function(){ //return Validate(); } for(var j=0;j<formtag.length;j++){ formtag[j].onsubmit = function(){ return Validate(); } } for(var i=0;i<tags.length;i++){ var tagid = tags[i].id; var tagval = tags[i].value; var tagtit = tags[i].title; var tagclass = tags[i].className; if((tags[i].type == "text") && (tagclass.indexOf('numeric') != -1)){ //enter class = numeric where you want to use numeric validator document.getElementById(tagid).onkeypress = function(){ numeric(event); } } } } function numeric(event){ var KeyBoardCode = (event.which) ? event.which : event.keyCode; if (KeyBoardCode > 31 && (KeyBoardCode < 48 || KeyBoardCode > 57)){ event.preventDefault(); $(".spannum").remove(); //$(".numeric").after("<span class='spannum'>Numeric Keys Please</span>"); //$(".numeric").focus(); return false; } $(".spannum").remove(); return true; } if (document.addEventListener) { document.addEventListener("DOMContentLoaded", onloadevents, false); } //window.onload = onloadevents; </script> </head> <body> <form method="post"> <label for="fname">Test 1 : </label><input type="text" title="Test 1" id="fname" class="form1"><br> <label for="fname1">Test 2 : </label><input type="text" title="Test 2" id="fname1" class="form1 compare"><br> <label for="fname2">Test 3 : </label><input type="text" title="Test 3" id="fname2" class="form1 compare"><br> <label for="gender">Gender : </label> <input type="radio" title="Male" id="fname3" class="gender" name="gender" value="Male"><label for="gender">Male</label> <input type="radio" title="Female" id="fname4" class="gender" name="gender" value="Female"><label for="gender">Female</label><br> <label for="fname5">Mobile : </label><input type="text" title="Mobile" id="fname5" class="numeric"><br> <label for="fname6">Email : </label><input type="text" title="Email" id="fname6" class="email"><br> <input type="submit" id="sub" value="Submit"> </form> </body> </html> </code></pre> </answer> <answer tick="false" vote="0"> <pre><code>function hasValue( val ) { // Return true if text input is valid/ not-empty return val.replace(/\s+/, '').length; // boolean } </code></pre> <p>对于多个元素，您可以在输入元素内部传递它们的值并将其循环到该函数参数中。</p> <p>如果用户插入一个或多个空格，由于正则表达式<pre><code>s+</code></pre>，该函数将返回 false。</p> </answer> <answer tick="false" vote="0"> <pre><code><pre><form name="myform" action="saveNew" method="post" enctype="multipart/form-data"> <input type="text" id="name" name="name" /> <input type="submit"/> </form></pre> <script language="JavaScript" type="text/javascript"> var frmvalidator = new Validator("myform"); frmvalidator.EnableFocusOnError(false); frmvalidator.EnableMsgsTogether(); frmvalidator.addValidation("name","req","Plese Enter Name"); </script> before using above code you have to add the gen_validatorv31.js js file </code></pre> </answer> <answer tick="false" vote="0"> <p>为了灵活性和其他您可能需要验证的地方。您可以使用以下功能。</p> <pre><code>`function validateOnlyTextField(element) { var str = element.value; if(!(/^[a-zA-Z, ]+$/.test(str))){ // console.log('String contain number characters'); str = str.substr(0, str.length -1); element.value = str; } }` </code></pre> <p>然后在您的 html 部分使用以下事件。</p> <p><pre><code><input type="text" id="names" onkeyup="validateOnlyTextField(this)" /></code></pre></p> <p>您可以随时重复使用该功能。 </p> </answer> <answer tick="false" vote="0"> <p>如何只允许文字不包含数字？我想要一个用户名输入只允许文本而不包含任何数字。请帮忙</p> </answer> </body></html>
这是页面的代码，其中表单数据应该显示在文本框中，但它甚至不定向到此页面并停留在同一页面上..页面只是在单击提交时闪烁而不是......
如何阻止机器人使用 .submit() 绕过我的“必填”字段？
我有一个表单会产生大量垃圾邮件。我已完成所需的所有输入并附加了验证码。这没有产生任何影响。 我假设机器人出于某种原因正在使用 form.submit()
我使用 Joomla 扩展表单（转换表单），并且希望仅允许用户在将给定列表中的某个关键字键入给定文本字段（类似于代码）时提交该表单。
我正在开发一个 NextJS 14 项目，并努力实现新的服务器操作功能，该功能在一段时间前引入了我的 NextJS 作为常规 API 调用的替代方案。这是一个精简版...
HTML 表单问题 - form.addEventListener 不起作用
我正在构建一个网络应用程序，但无法让我的表单提交响应。我正在使用 firebase，希望将响应存储在数据库中。 我的 HTML 表单代码： 我正在构建一个网络应用程序，但无法让我的表单提交响应。我正在使用 firebase，希望将响应存储在数据库中。 我的 HTML 表单代码： <form action="#" method="POST" class="u-clearfix u-form-spacing-10 u-form-vertical u-inner-form" style="padding: 10px;" id="waitlist"> <div class="u-form-group u-form-name"> <label for="name" class="u-label">Name</label> <input type="text" placeholder="Enter your Name" id="name" name="name" class="u-grey-10 u-input u-input-rectangle u-radius-10" required="" autocomplete="name"> </div> <div class="u-form-email u-form-group"> <label for="email" class="u-label">Email</label> <input type="email" placeholder="Enter a valid email address" id="email" name="email" class="u-grey-10 u-input u-input-rectangle u-radius-10" required="" autocomplete="name"> </div> <div class="u-form-group u-form-phone u-form-group-3"> <label for="phone" class="u-label">Phone(Optional)</label> <input type="tel" pattern="[\(\-]?([0-9]{3})[\)\-]?[\/\s]?([0-9\-]{3,9})" placeholder="Enter Phone #" id="phone" name="phone" class="u-grey-10 u-input u-input-rectangle u-radius-10" autocomplete="tel"> </div> <div class="u-align-left u-form-group u-form-submit"> <button type="submit" class="u-active-palette-3-base u-border-none u-btn u-btn-round u-btn-submit u-button-style u-hover-palette-3-base u-palette-1-base u-radius-10 u-btn-1">Submit</button> </div> </form> 我的Javascript： <script type="module"> document.addEventListener("DOMContentLoaded", function () { console.log("Page fully loaded"); const form = document.querySelector("#waitlist"); const thankYouMessage = document.getElementById("thank-you-message"); if (!form) { console.error("Form #waitlist not found"); return; } form.addEventListener("submit", async function (e) { e.preventDefault(); try { console.log("Form submitted"); const name = document.getElementById("name").value; const email = document.getElementById("email").value; const phone = document.getElementById("phone").value; const collectionRef = collection(firestore, 'responses'); await addDoc(collectionRef, { name: name, email: email, phone: phone, timestamp: firebase.firestore.FieldValue.serverTimestamp() }); document.getElementById("name").value = ""; document.getElementById("email").value = ""; document.getElementById("phone").value = ""; thankYouMessage.style.display = "block"; } catch (error) { console.error("Error adding response. Please try again later.", error); thankYouMessage.innerText = "Sorry, something went wrong. Please try again."; thankYouMessage.style.color = "red"; thankYouMessage.style.display = "block"; } }); }); </script> 我正在尝试在网络控制台中使用断点，我发现一切都“很好”，直到到达下面的行，然后它一直跳到底部。 form.addEventListener("submit", async function (e) { 我是个十足的菜鸟，还没有像我现在知道的那样使用 github。我的网站加载正确，但我只有一种表单。当我点击提交时，什么也没有发生。在后端，它卡在 addEventListener 的那一行上。 我遇到的一些错误： (index):299 未捕获类型错误：form.addEventListener 不是函数 在 HTML 文档中。 （（索引）：299：12） DOMException：无法在“Element”上执行“querySelectorAll” （但我没有在代码的任何部分使用 querySelectorALL。） 使用 document.getElementById 而不是 querySelector。 form = document.getElementById("#awaitlist") form.addEventListener("submit", async function() {})
我在一个php页面中有多个表单， 我像这样在parentForm数组中添加了表单 ParentForm.push($('.js-address-form 表单')); 问题是当我提交一份表单时 onsubmit 事件被触发......
我的带有selenium的python程序有一个奇怪的行为：当我在调试模式下启动它但在正常模式下启动它时它运行得很好。在正常模式下不考虑 FromDate。 我以为...
我正在尝试将 POST 请求发送到 javascript 弹出窗口。我可以使用新选项卡来完成此操作，但想使用弹出窗口来完成。 var mapForm = document.createElement("form"); 地图表单.target =
“event.preventDefault();”不适用于提交按钮
问题是，当我单击提交按钮时，页面正在重新加载，从而阻止代码工作，尽管我有“event.preventDefault();”。 HTML： 问题是，当我单击提交按钮时，页面正在重新加载，从而阻止代码工作，尽管我有“event.preventDefault();”。 HTML： <form class="links-add-container hidden"> <input type="text" class="links-name-input links-input" spellcheck="false" placeholder="Название ссылки" /> <input type="text" class="links-link-input links-input" spellcheck="false" placeholder="Ссылка" /> <button class="links-add-button button submit-button" type="submit"> <i class="fas fa-plus-square"></i> </button> </form> JS： const addLinkButton = document.querySelector(".links-add-button"); addLinkButton.addEventListener("click", addLink); function addLink(event) { event.preventDefault(); //the actual code. It doesn't work because of the page reload. } 我尝试更改“按钮”上按钮的类型，但这导致了另一个问题。页面不会重新加载，但代码不起作用。当我单击按钮时没有任何反应，甚至控制台中的错误也不会出现。 我应该补充一点，这是我的旧代码，半年前我使用它时没有出现这样的问题。我很可能错过了一些明显的东西，但我不明白是什么。请帮忙。 您的 JavaScript 事件侦听器似乎正确阻止了默认的表单提交行为。但是，该问题可能与您在表单中使用 <button> 有关。当表单中有 <button> 且未指定 type 属性时，它默认为 "submit"，导致表单提交。 在您的情况下，您正在阻止默认行为，但由于按钮具有默认的 type "submit"，因此它可能仍会触发表单提交。要解决此问题，请将按钮的 type 属性明确设置为 "button" 以防止其触发表单提交： html <form class="links-add-container hidden"> <input type="text" class="links-name-input links-input" spellcheck="false" placeholder="Название ссылки" /> <input type="text" class="links-link-input links-input" spellcheck="false" placeholder="Ссылка" /> <button class="links-add-button button submit-button" type="button"> <i class="fas fa-plus-square"></i> </button> </form> 现在，使用 type="button"，单击按钮将不会触发表单提交，并且 addLink 函数内的 JavaScript 代码应该按预期工作。 确保检查您的环境中是否有任何其他脚本或更改可能会影响行为，因为提供的代码应该会阻止提交表单。
我是 Google Apps 脚本的新手，刚刚开始了解其工作原理。一位团队成员为我正在做的一些工作编写了一个简单的脚本。该脚本本质上是在以下任意一个
表单提交被取消，因为表单未连接 - Laravel 8 中的 VueJs
我想测试控制台日志中的响应。我正在使用谷歌检查工具。我在网络>>XHR 中看不到任何响应。但我看到“表单提交被取消，因为 f...
Formsubmit.co 表单在reactapp 中不起作用
我在我的反应应用程序简单个人网站上的电子邮件表单中添加了表单提交服务。但它似乎不起作用。它什么也不做。那里额外的 javascript 是否会干扰