モーダルウインドウでフォーム

モーダルウインドウ上でタブメニューを付け、ログインと新規登録を行えるようにしたいです。
そこで、以下のhtmlを書きました。

php
1<section id="modalwindow">
2        <div id="mask" class="hidden"></div>
3
4        <div id="window" class="hidden">
5          <div id="close" class="hidden">☓ 閉じる</div><br>
6
7          <div id="tabmenu">
8            <ul class="tab">
9              <li><a href="#" data-id="login" class="active menu_item">ログイン</a></li>
10              <li><a href="#" data-id="sigup" class="menu_item">新規登録</a></li>
11            </ul>
12            <div class="tabmenu active" id="login">
13              <div id="box">
14                <form action="" method="post" id="login">
15                  <p>
16                    <input type="text" name="email" placeholder="メールアドレス" value="<?= isset($app->getValues()->email) ? h($app->getValues()->email) : ''; ?>">
17                  </p>
18                  <p>
19                    <input type="password" name="password" placeholder="パスワード">
20                  </p>
21                  <p class="err"><?= h($app->getErrors('login')); ?></p>
22                  <div class="btn" onclick="document.getElementById('login').submit();">ログイン</div>
23                  <input type="hidden" name="token" value="<?= h($_SESSION['token']); ?>">
24                  <input type="hidden" name="posttype" value="login">
25                </form>
26              </div>
27            </div>
28            <div class="tabmenu" id="sigup">
29              <div id="box">
30                <form action="" method="post" id="signup">
31                  <p>
32                    <input type="text" name="email" placeholder="メールアドレス" value="<?= isset($app->getValues()->email) ? h($app->getValues()->email) : ''; ?>">
33                  </p>
34                  <p class="err"><?= h($app->getErrors('email')); ?></p>
35                  <p>
36                    <input type="password" name="password" placeholder="パスワード">
37                  </p>
38                  <p class="err"><?= h($app->getErrors('password')); ?></p>
39                  <div class="btn" onclick="document.getElementById('signup').submit();">新規登録</div>
40                  <input type="hidden" name="token" value="<?= h($_SESSION['token']); ?>">
41                  <input type="hidden" name="posttype" value="signup">
42                </form>
43              </div>
44            </div>
45          </div>
46          <script src="./javascript/tabmenu.js"></script>
47        </div>
48      </section>

こうすると、
このように表示され、一応入力することができます。
ですが、ログインのフォームが送信されません。（新規登録は送信されます。）
しかも、ログインのフォーム部分以外をコメントにし実行すると、送信されます。
なので、コード敵問題では無いと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

id属性の値はユニークにしてください。

以下のようにするとログインフォームでもsubmitが実行されましたが、いかがでしょうか。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<section id="modalwindow">
15    <div id="mask" class="hidden"></div>
16
17    <div id="window" class="hidden">
18        <div id="close" class="hidden">☓ 閉じる</div>
19        <br>
20
21        <div id="tabmenu">
22            <ul class="tab">
23                <li><a href="#" data-id="login" class="active menu_item">ログイン</a></li>
24                <li><a href="#" data-id="sigup" class="menu_item">新規登録</a></li>
25            </ul>
26            <div class="tabmenu active" id="login1">
27                <div id="box1">
28                    <form action="" method="post" id="login2">
29                        <p>
30                            <input type="text" name="email" placeholder="メールアドレス"
31                                   value="<?= isset($app->getValues()->email) ? h($app->getValues()->email) : ''; ?>">
32                        </p>
33                        <p>
34                            <input type="password" name="password" placeholder="パスワード">
35                        </p>
36                        <p class="err"><?= h($app->getErrors('login')); ?></p>
37                        <div class="btn" onclick="document.getElementById('login2').submit();">ログイン</div>
38                        <input type="hidden" name="token" value="<?= h($_SESSION['token']); ?>">
39                        <input type="hidden" name="posttype" value="login">
40                    </form>
41                </div>
42            </div>
43            <div class="tabmenu" id="sigup1">
44                <div id="box2">
45                    <form action="" method="post" id="signup2">
46                        <p>
47                            <input type="text" name="email" placeholder="メールアドレス"
48                                   value="<?= isset($app->getValues()->email) ? h($app->getValues()->email) : ''; ?>">
49                        </p>
50                        <p class="err"><?= h($app->getErrors('email')); ?></p>
51                        <p>
52                            <input type="password" name="password" placeholder="パスワード">
53                        </p>
54                        <p class="err"><?= h($app->getErrors('password')); ?></p>
55                        <div class="btn" onclick="document.getElementById('signup2').submit();">新規登録</div>
56                        <input type="hidden" name="token" value="<?= h($_SESSION['token']); ?>">
57                        <input type="hidden" name="posttype" value="signup">
58                    </form>
59                </div>
60            </div>
61        </div>
62        <script src="./javascript/tabmenu.js"></script>
63    </div>
64</section>
65</body>
66</html>