Question

<!DOCTYPE html>
<html>
    <head>
        <title>Get Value form Textbox</title>
    </head>
    <body>
        <form>
            First Name:<input type="text" id="firstname" value="firstname"> Last Name:<input type="text" id="lastname" value="lastname">

这是我认为导致问题的脚本，我不确定这是否是用于获取文本框值的正确方法

            <script>
                var first_name = document.getElementById("firstname");
                var last_name = document.getElementById("lastname");
            </script>

            <p></p>
            <input type="submit" value="Submit" onclick="my_checker(first_name, last_name);">
        </form>
        <script>
            function my_checker(fName, lName)
            {
                alert("Hello " + fname + " " + lname);
            }
        </script>
    </body>
</html>

Answer 1

我认为这就是你想要的。

＆＃13;

function my_checker(){
      var fname = document.getElementById("firstname").value;
      var lname = document.getElementById("lastname").value;
      alert("Hello " + fname + " " + lname);
}

＆＃13;

    <head>
        <title>Get Value form Textbox</title>
    </head>
    <body>
        <form>
            First Name:<input type="text" id="firstname" value="firstname"> Last Name:<input type="text" id="lastname" value="lastname">
              <p></p>
            <input type="submit" value="Submit" onclick="my_checker();">
        </form>

＆＃13;

Answer 2

这个不是正确的方法，但仍然...... 如果你想要代码有两个错误，你接收的第一个变量和尝试提醒两者是不同的（fName，lName）/（fname，lname）。其次要访问价值你需要document.getElementById（“firstname”）。value tag

<script>
            var first_name = document.getElementById("firstname").value;
            var last_name = document.getElementById("lastname").value;
        </script>

            <p></p>
            <input type="submit" value="Submit" onclick="my_checker(first_name, last_name);">
        </form>
        <script>
            function my_checker(fname, lname)
            {
                alert("Hello " + fname + " " + lname);
            }
        </script>
    </body>
</html>

Answer 3

以下是如何构建它。

请注意，您应该使用eventListeners而不是内联javascript - 并始终将您的js与html分开...您不会在html标记中随机添加脚本。

<!DOCTYPE html>
<html>
    <head>
        <title>Get Value form Textbox</title>
    </head>
    <body>
        <form>
            First Name:<input type="text" id="firstname" value="firstname"> 
            Last Name:<input type="text" id="lastname" value="lastname">
            <p></p>
            <input type="submit" value="Submit" id="submitBtn">
        </form>
        <script>            
            document.getElementById('submitBtn').addEventListener('click', function(e) {
              e.preventDefault(); // important to stop the form from actually submitting.
              var fname = document.getElementById("firstname").value;
              var lname = document.getElementById("lastname").value;
              alert("Hello " + fname + " " + lname);
            });    
        </script>
    </body>
</html>

Answer 4

脚本应为var first_name = document.getElementById("firstname").value;

如何获取HTML文本框所包含的值

4 个答案: