表单提交后，它不会清除或重置 html 元素。

Question

我有一个简单的表单布局，需要用户输入代码。现在该代码将确定要执行的 php 脚本，但这不是我的问题。您会看到，当用户输入错误内容时，该页面会执行它应该执行的操作，并向用户显示一条错误消息，内容为……错误代码 yadadada。但是当用户返回输入正确的代码时，它仍然给出错误..除非用户刷新页面并在第一次尝试时输入正确的代码，然后它才会允许他们通过。

我必须拥有那个

event.preventDefault();

因为否则如果用户输入了错误的代码，它会自动刷新页面并且不会让用户知道代码是错误的。我怎样才能克服这个问题？我尝试将 html 字段设置为空白，但这似乎没有帮助

<form id="formRSVP" method="post" style="text-align: center;">
                <div class="form-group">
                    <label for="rsvpCode"><span id="rsvpTitle">RSVP Code:  </span></label>
                    <br />
                    <span id="formErrorMsg" style="color:red;"></span>
                    <input id= "rsvpCodeInput" type="code" class="form-control" name="rsvpCodeInput" placeholder="Enter RSVP Code here..">
                </div>
                <div id="rsvpFormSubmit">
                    <button type="submit" class="btn btn-default">Submit</button>
                </div>
                <script>
                    $("#rsvpFormSubmit").click(function(){
                        var userInput = $('#rsvpCodeInput').val().toLowerCase();
                        $('#formRSVP').submit(function(event){
                            if(userInput === 'emoya' || userInput === 'rehersal'){
                                if(userInput === 'emoya'){
                                    $('#formRSVP').attr("action","rsvp_wedding.php");
                                }
                                else if(userInput === 'rehersal'){
                                    $('#formRSVP').attr("action","rsvp_rehersal.php");
                                }
                                else{
                                    alert("This shouldn't be displaying, if it is, please email: duan_uys@icloud.com.");    
                                }
                                return;
                            }
                            else{
                                event.preventDefault();
                                $('#formErrorMsg').text('Confirmation Code Invalid. Please try again.').show();
                                alert('For testing purposes, type in either: emoya or rehersal');
                                $("#rsvpCodeInput").val('');
                            }
                        });
                    });
                </script>
            </form>

Answer 1

您的问题很可能是因为 userInput 在第一次输入后从未改变 。

我敢打赌你按回车键提交它，这会绕过你的变量分配。尝试从 .submit() 的外部移除 .click()，然后将 var userInput = $('#rsvpCodeInput').val().toLowerCase(); 放在 .submit() 的内部。

.click() 已经是与 .submit() 一起发生的已知事件（实际上反之亦然）。单击按钮时，使用它会额外触发 .submit()。

表单提交后，它不会清除或重置 html 元素。

After Form Submission, it does not clear or reset the html element.

html

javascript

css

jquery