javascript - 为js页面创建表单 Action

Question

我想创建登录表单，然后结果转到另一个页面，使用js捕获值并创建流程。

我已使用 onclick 成功创建了它，但我想将 onclick 更改为 onsubmit，因为我不想单击该按钮，只需按“Enter”键盘，该过程即可运行。我已经尝试将onclick更改为onsubmit流程，但仍然无法获取js页面上的值。

这是登录表单

  <form >
                <div class="input-group form-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                    </div>
                    <input type="text" class="form-control" placeholder="Phone Number" name="phone_number" id="phone_number">

                </div>
                <div class="input-group form-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fas fa-key"></i></span>
                    </div>
                    <input type="password" class="form-control" placeholder="Password" name="password" id="password">
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <div class="form-group">
                    <input type="button" value="Login" class="btn float-justify login_btn" onClick="login()">
                </div>
            </form>

    <script src="<?= base_url() ?>assets/js-process/login/login.js" type="text/javascript"></script>

这是js页面

  function login()
  {

var phone_number = $('#phone_number').val();
var password = $('#password').val();

console.log(phone_number)
  }

我把onclick改成了onsubmit，但是js页面又取不到值了。

这是我的改变

 <form id="myform" onsubmit="login()">
  ......
 <div class="form-group">
   <input type="submit" value="Submit" class="btn float-justify login_btn">
 </div>

你知道我的代码哪里出错了吗？

谢谢

Answer 1

据我所知，一切都很好，现在应该关注两件事 首先是你正在使用的jquery，但我看不到它的链接 其次检查您的基本网址，它是否正确生成

下面你可以看到它在 onclick 上的工作情况

与提交时的方式相同，但您必须在函数中传递事件，以便可以停止其默认操作。您可以使用 event.preventDefault();

function login(e)
  {
e.preventDefault();
var phone_number = $('#phone_number').val();
var password = $('#password').val();

alert(phone_number)
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onSubmit="login(event)">
                <div class="input-group form-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                    </div>
                    <input type="text" class="form-control" placeholder="Phone Number" name="phone_number" id="phone_number">

                </div>
                <div class="input-group form-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fas fa-key"></i></span>
                    </div>
                    <input type="password" class="form-control" placeholder="Password" name="password" id="password">
                </div>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <div class="form-group">
                    <input type="submit" value="Login" class="btn float-justify login_btn" >
                </div>
            </form>