Question

我是初学javascript用户，我正在尝试将此html表单传递给此javascript函数并输出名称变量但是当我单击按钮提交时发生的所有情况是表单输入清除并且它留在表单上而不是传递给javascript。

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



    <title>Life Insurance Calculator</title>


        <script type="text/javascript">

        var title = "Welcome to Life Insurance Co..!";
                    //Declaring  variable title             

        document.writeln(title.fontsize(8).fontcolor('red')); 
                   //Printing out the title on the page

        function Name(form){

        var customername = document.getElementByID("name").value;
        document.write(customername);
    }

    </script> 


</head>

 <body>



    <form name = "LifeCalcForm" action="" method="get">
    <p>To get a life insurance quote, please tell us about yourself.</p>
    <p><i>Note:only those under the age of 80 and non-smokers may apply</i></p>
    <p>Enter your name: <input type="text" name="name" /></p>



    <input type="submit" value="Calculate" onClick="Name(this.form)">
        </form>


  </body>

</html>

Answer 1

在页面加载后（具体地，在加载事件之后）执行document.write(customername);时，它将首先清除整个页面（包括脚本）并编写新内容。

取而代之的是：

alert(customername);

清除提醒后（例如点击“确定”），表单将会提交并重新加载页面。

顺便说一句，由于您在调用中传递了对函数的引用，并且表单控件具有名称，您可以使用：

alert(form.name.value);

请注意，表单控件名称和ID用于创建form object的属性，因此使用名称为“name”的表单控件会覆盖表单自己的名称属性（表单也具有类似提交，操作，元素，重置等等。因此，永远不要使用可能与标准表单属性名称相同的控件名称，使用“userName”等内容。

按照惯例，变量名称是为构造函数保留的，因此对于普通函数使用小写。此外，函数是做事情所以通常最好使用描述它的功能的动词，例如。

function getUserName(form) {
  return form.userName.value;
}

Answer 2

试试这个：

<html>

 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



        <title>Life Insurance Calculator</title>


           <script type="text/javascript">

    var title = "Welcome to Life Insurance Co..!";
//    Declaring  variable title

    document.writeln(title.fontsize(8).fontcolor('red'));
//    Printing out the title on the page

    function Name(){
        var customername = document.getElementById("name").value;
        document.write(customername);
    }

</script>


    </head>

     <body>



        <form name = "LifeCalcForm" action="" method="get">
    <p>To get a life insurance quote, please tell us about yourself.</p>
    <p><i>Note:only those under the age of 80 and non-smokers may apply</i></p>
    <p>Enter your name: <input type="text" id="name" name="name" /></p>



    <input type="button" value="Calculate" onClick="Name()">
</form>


      </body>

    </html>

尝试通过javascript提交html表单变量时没有任何反应

2 个答案: