选择选项的值将在表单上返回 erro 时丢失

value of the select option going to be lost when it return a erro on the form

本文关键字：erro 返回 表单 选项 选择      更新时间：2023-09-26

我知道这听起来很相似，但我找不到有用的文章。我在我的网站上有用于选择类别的选项 html 标签，但最终用户选择的值消失了（来到已选择的第一个值）。在一个例子中，我有这个标签

<select name="type" >
    <option value="">select a category</option>
    <option value="car">car</option>
    <option value="van">van</option>
    <option>
</select>

在示例中，当浏览器首次加载时，第一个选择框处于选中状态，任何用户都可以选择任何值，并且它不能为空。如果用户选择"van"并且已经在表单中填写了其他字段，但如果它在将值插入我的数据库之前返回错误， 此选择框值已重置为第一个值（"选择类别"）。我想再防止这种情况发生。我希望任何专家都能在这一点上帮助我。谢谢！

我想我理解你的问题。

网页的访问者填写许多数据字段，其中一个是选择控件。但是，如果将数据提交到数据库时出现问题，则在向用户重新显示页面时将擦除这些值。这是对的吗？

如果是这样，有几种方法可以解决它。

（1） 客户端字段验证：在提交表单之前，在允许表单继续提交之前，测试字段的值以确保它们有效。像这样：

javascript/jQuery： 

$(document).ready(function(){
    $('#myFormID').submit(function(e){
        var first_name = $('#firstname').val();
        var last_name = $('#lastname').val();
        if (firstname=="" || lastname==""){
            alert('Please complete all fields')
            e.preventDefault();
        }
    });
}); //END document.ready

（2）阿贾克斯。Ajax 是一种允许您在不离开/刷新页面的情况下将数据提交到服务器（类似于使用表单）的方法。如果出现问题，可以更新页面，告诉用户要修复的内容 - 并保留用户的所有更改。您可以将<form>容器与 AJAX 一起使用，但这不是必需的。你可以只使用 DIV，AJAX 也会一样工作。实际上，使用表单时，始终必须使用 event.preventDefault() 来阻止表单尝试离开页面（其默认行为）。

javascript/jQuery：

$(document).ready(function(){
    $('#myFormID').submit(function(e){
        var first_name = $('#firstname').val();
        var last_name = $('#lastname').val();
        if (firstname=="" || lastname==""){
            alert('Please complete all fields')
            e.preventDefault();
        }
    });
    $('#myFormID').submit(function(e){
        var first_name = $('#firstname').val();
        var last_name = $('#lastname').val();
        if (firstname=="" || lastname==""){
            alert('Please complete all fields')
            e.preventDefault();
        }
        $.ajax({
            type: 'post',
             url: 'add_the_data.php',
            data: 'fn=' +firstname+ '&ln=' +lastname,
            success: function(d){
                if (d == 1){
                    //Success
                    $('#firstname').val('');
                    $('#lastname').val('');
                    alert('Form submission was successful');
                }else
                    //Fail
                    alert('Data was not submitted. Please try again.')
                    $('#firstname').focus();
                }
            }
        });
    }); //End Submit
}); //END document.ready

add_the_data.php

<?php
    $fn = $_POST['fn'];
    $ln = $_POST['ln'];
    //Do your database entry here
    $out = add_the_data_function($fn, $ln); //returns 1 or 0
    echo out;

引用：

有关 AJAX 的更多信息，一些简单示例

相关文章：