【问题标题】:JQuery Form Submission not Storing Value?JQuery表单提交不存储价值?
【发布时间】:2019-11-22 17:48:26
【问题描述】:

我有一个用于验证用户输入的自定义方法,但我的表单似乎没有提交。此外,在我第一次提交后,URL 发生了变化,并且 jquery 仅在 URL 更改后运行。

此代码的目的是检查提交的信息是否在数据库中。该函数运行,但名称字段的值似乎没有在提交时存储,因此我不断收到名称错误。

这是我的代码:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>Smiles Galore (SG)</title>
    <script>
    $(document).ready(function(){
        $('#target').on('submit', function(){
                var emailChecker = $('#email').val();
                var idChecker = $('#number').val();
                var passCheck = $('#pwd').val();
                var userName = $('#text').val;
                if (userName.length <2){
                    alert("Please enter a name");
                }
                else{   
                    if (idChecker.toString().length != 8){
                        alert("That's not a proper input for ID. Please provide a proper ID");
                    }
                    else{
                        if (!hasUpperCase(passCheck)){
                            alert("That's not a password. Enter a proper password.");
                        }
                        else if(!/[0-9]/.test(passCheck)){
                            alert("That's not a password. Enter a proper password.");
                        }
                        else if(passCheck.length > 8){
                            alert("That's not a password. Enter a proper password.");
                        }
                        else{
                            Verification(userName,emailChecker,passCheck,idChecker);
                        }
                    }
                }
        function hasUpperCase(word){
            return word.toLowerCase()!=word;
        }

        function Verification(userName1,emailCheck1,passChecker,idCheck){
            var selection = $("list").val();
            alert("Hello");
            $.post('Access.php',{'Patron Email Address':emailCheck1,'Patron Name':userName1,'Patron ID':idCheck,'Patron Password':passChecker},function(data){
                if (data=='0'){
                    alert("The email is incorrect");
                    return;
                }
                else{
                    alert("You good");
                    if (selection == "Search for Appointment"){
                        $.post('Process.php',{'Patron Email Address':emailCheck1},function(){});
                    }
                    else if (selection == "Schedule an Appointment"){
                    return;
                    }
                    else if (selection == "Cancel an Appointment"){
                    return;
                    }
                    else if (selection == "Create/Register an Account"){
                    return;
                    }
                    return; 
                }
            }); 
        }
        return false;
        });
        });
    </script>
</head>
<body>
        <form id="target">
        <div class="form-group">
            <label for="text">Name:</label>
            <input type="text" class="form-control" id="text">
        </div>
        <div class="form-group">
            <label for="email">Email:</label>
            <input type="text" class="form-control" id="email">
        </div>
        <div class="form-group">
            <label for="pwd">Password:</label>
            <input type="password" class="form-control" id="pwd">
        </div>
        <div class="form-group">
            <label for="number">ID:</label>
            <input type="number" class="form-control" id="number">
        </div><br>
        <label for="list">Select an Option:</label><br>
        <select name="Select an Option:" id="list">
            <option value="Schedule an Appointment">Schedule an Appointment</option>
            <option value="Cancel an Appointment">Cancel an Appointment</option>
            <option value="Search for Appointment">Search for Appointment(s)</option>
            <option value="Create/Register an Account">Create/Register an Account</option>
        </select><br>
        <br><div>
            <input type="submit" class="btn btn-primary mb-2" value="Continue">
        </div>
        </form> 
</body>

【问题讨论】:

    标签: javascript php jquery html


    【解决方案1】:

    val 后面没有 () 来表示名称,就像在其他变量上一样。

    var userName = $('#text').val; 更改为var userName = $('#text').val();

    这将解决你的名字问题。

    还注意到您的 jquery 选择器中没有 # selection

    var selection = $("list").val(); 更改为var selection = $("#list").val();

    【讨论】:

    • 我似乎遇到了另一个问题,即 post 语句甚至不起作用。我不确定这里出了什么问题。
    • @InDoingIt 我的更改是否为您解决了名称问题?
    • 是的,我的整个验证功能都有效。我的新问题似乎与帖子有关。它甚至不起作用。我在第一篇文章的功能之后写了一个警报,它不起作用。
    • @InDoingIt 好的,因为这是一个新问题,它需要是一个新问题。如果我解决了您最初的问题,您能否投票并将其标记为已接受的答案,以便解决这个问题。然后问一个关于 post 方法不起作用的新问题,我也很乐意为您提供帮助。只需发布一个新问题并解决这个问题。
    猜你喜欢
    • 1970-01-01
    • 2011-03-08
    • 1970-01-01
    • 1970-01-01
    • 2013-09-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多