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 在第一次输入后永远不会更改。

我打赌你输入提交它并绕过你的变量赋值。尝试从.click()的外部移除.submit()，并将var userInput = $('#rsvpCodeInput').val().toLowerCase();放在.submit()内。

.click()已经是.submit()发生的理解事件（实际上反之亦然）。单击按钮时，它会发出额外的.submit()点火。

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

1 个答案: