【问题标题】:Submit Only One of Two toggling forms仅提交两种切换形式中的一种
【发布时间】:2013-05-15 19:30:18
【问题描述】:

我有两种不同的形式,它们被包含在一个 php 文件中。它们的可见性基于 onClick JS 切换功能。切换效果很好。但是,如果我只填写其中一个表格并单击其各自的提交按钮,我将返回到同一页面,而不是我在浏览器中指定的 action.php 文件:

http://localhost/?user_temp=f&pass_temp1=f&pass_temp2=ff&email_temp=f&answer1=3&submitbtn=Signup+Now

还有这个 Javascript 错误:“TypeError undefined document.hform.sSecureUser

两个表单也有自己的 javascripts 到 MD5 一些数据和 sSecureUser 来自注册表单。

有趣的是,如果我要删除其中一个包含表单,只留下提交表单,可以说,它会起作用。似乎这些表单的 javascript 相互冲突:/ ...

我尝试了this,但它对我不起作用,因为我的每个表单都使用 java 脚本。请提前帮助和感谢!!!...如果您想查看我的任何表单、javascript 或 php 文件,请告诉我...

切换代码:

<div>
<a href="/forms/login-form.php" onclick="toggle_visibility('login-div'); return false;">Login</a>
    <div id="login-div" style="display:none">
        <?php include($_SERVER['DOCUMENT_ROOT'].'/forms/login-form.php');?>         
    </div>
<a href="/forms/signup-form.php" onclick="toggle_visibility('signup-div'); return false;">Sign up</a>
    <div id="signup-div" style="display:none">
        <?php include($_SERVER['DOCUMENT_ROOT'].'/forms/signup-form.php'); ?>           
    </div>
        <script type="text/javascript">
            <!--
                function toggle_visibility(id) {
                        var e = document.getElementById(id);
                       if(e.style.display == 'block'){
                          e.style.display = 'none';
                          }
                       else{
                          e.style.display = 'block';
                          }
                }
            //-->
        </script>       
</div>

登录表格:

<div id="hasJavaScript1" style="display:none">
    <form name="login">
        Username:
        <input type="text" name="user_temp" size=32 maxlength=32><br>
        Password:
        <input type="password" name="pass_temp" size=32 maxlength=32><br>
        <input onClick="passResponse(); return false;" type="submit" name="submitbtn" value="Login now">
    </form>

    <form action="/action/login-action.php" METHOD="POST" name="hform">
        <input type="hidden" name="secureuser">
        <input type="hidden" name="securepass">
    </form>
</div>

<script language="javascript" src="/js/md5.js"></script>
<script language="javascript">
<!--
document.getElementById('hasJavaScript1').style.display = 'block';

function passResponse() {
document.hform.secureuser.value = MD5(document.login.user_temp.value);
document.hform.securepass.value = MD5(document.login.pass_temp.value);
document.login.pass_temp.value = "";
document.hform.submit();

}
// -->
</script>

注册表格:

<?php include ($_SERVER['DOCUMENT_ROOT'].'/functions/functions.php');?>
<div id="hasJavaScript" style="display:none">
<form name="signup">
    <label>Username</label> <input type="text" name="user_temp" size=32 maxlength=32><span>alphanumeric, no spaces</span><br>
    <label>Type password</label> <input type="password" name="pass_temp1" size=32 maxlength=32><span>alphanumeric, 8-12 long</span><br>
    <label>Retype password</label> <input type="password" name="pass_temp2" size=32 maxlength=32><br>
    <label>Email</label> <input type="text" name="email_temp" size=32 maxlength=32><br>
    <label> What is: </label><?php $captchaArray = myCaptcha(); echo $captchaArray['equation'];?><br>
    <label>Answer</label><input type="text" name="answer1">
    <input onClick="passResponse1(); return false;" type="submit" name="submitbtn" value="Signup Now">
</form>

<form action="/action/signup-action.php" METHOD="POST" name="signup-hform">
        <input type="hidden" name="sSecureUser">
        <input type="hidden" name="sSecurePass1">
        <input type="hidden" name="sSecurePass2">
        <input type="hidden" name="secureEmail">
        <input type="hidden" name="answer2">
        <input type="hidden" name="checker" value=".<?php echo $captchaArray['answer'];?> .">
</form>
</div>


<script language="javascript" src="/js/md5.js"></script>


  <script language="javascript">
<!--
document.getElementById('hasJavaScript').style.display = 'block';

function passResponse1() {
document.signup-hform.sSecureUser.value = MD5(document.signup.user_temp.value);
document.signup-hform.sSecurePass1.value = MD5(document.signup.pass_temp1.value);
document.signup.pass_temp1.value = "";
document.signup-hform.sSecurePass2.value = MD5(document.signup.pass_temp2.value);
document.signup.pass_temp2.value = "";
document.signup-hform.secureEmail.value = MD5(document.signup.email_temp.value);
document.signup-hform.answer2.value = document.signup.answer1.value;
document.signup.answer1.value = "";
document.signup-hform.submit();

}
// -->
</script>

【问题讨论】:

  • 你能显示一些代码吗???
  • 更新感谢关注@ManishJangir
  • 我不明白你想用多种形式完成什么。目的是什么?
  • 基本上我希望能够拥有一个用户可以登录或注册的页面,而不会被定向到另一个页面。我这样做是为了方便用户。使用这两个下拉菜单,用户不必懒惰地点击另一个页面。
  • 好的,但是为什么有隐藏字段的额外表单呢?为什么不只有一个表格并提交呢?无论如何,您都在提交隐藏的表格,这就是我没有得到的。你可能有一个正当的理由,我只是没有看到它。

标签: php javascript html submit undefined


【解决方案1】:

我看到的一个问题是您没有在隐藏字段中指定任何值属性或值:

<input type="hidden" name="sSecureUser">
<input type="hidden" name="sSecurePass1">
<input type="hidden" name="sSecurePass2">
<input type="hidden" name="secureEmail">
<input type="hidden" name="answer2">

但是在你的 JS 中,你试图访问 value 属性。

document.hform.sSecureUser.value = ...

尝试为这些添加值。我还会为您提供隐藏表单 ID,并使用 document.getElementById() 语法而不是 document.hform.sSecureUser 语法。

就您的表单提交而言,您正在抑制第一个表单的操作,尝试为第二个表单中的隐藏字段填写值,然后提交。您的两个脚本都对表单 "hform" 使用相同的名称。它们必须是独一无二的。我也会给他们一个唯一的 ID。

另一个可能的问题是这一行:

<input type="hidden" name="checker" value=".<?php echo $captchaArray['answer'];?> .">

您正在使用 .用于字符串连接,但它不在 echo/print 语句中。我认为应该是:

<input type="hidden" name="checker" value="<?php echo $captchaArray['answer'];?>">

【讨论】:

  • 我认为 JS 的工作方式是 document.hform.sSecureUser 从 document.signup.user_temp.value 中获取值(在 NON HIDDEN FORM 中定义)。然后将该值传递给 hform.... 至于提交的名称。你说的对。我更改了第二个并将更新代码。现在我只提交登录表单,即使在单击注册提交按钮时也是如此。但至少我被带到了一些行动页面
  • 如果我对 Javascript 有错误,请纠正我^^.. 立即更新代码以向您展示我所做的事情@revent
  • 看起来更好,但你的 JavaScript 函数也应该有唯一的名称。
  • 好吧,我想我很接近。我将注册表单的 JavaScript 函数命名为 passResponse1 。登录表单运行良好。只是当我使用提交按钮时,我得到的注册表单:passResponse1 is not defined... 更改代码以反映现在
  • 还有:document.signup-hform.sSecureUser.value = MD5(document.signup.user_temp.value);左侧分配无效
猜你喜欢
  • 1970-01-01
  • 2015-11-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-01-19
  • 1970-01-01
  • 2012-10-23
  • 1970-01-01
相关资源
最近更新 更多