简单的Java Web项目(1)——JS获取表单值，处理后写入表单文本框

最新推荐文章于 2023-09-14 18:12:19 发布

rookie_zfy

最新推荐文章于 2023-09-14 18:12:19 发布

阅读量7.4k

点赞数 15

分类专栏： Java Web程序设计文章标签： html javascript 表单

本文链接：https://blog.csdn.net/zfy_rookie/article/details/66009029

版权

Java Web程序设计专栏收录该内容

2 篇文章 0 订阅

订阅专栏

环境和开发工具：myEclipse10、Tomcat7.0、JDK1.8

这里写图片描述

用表单输入10本书的价格，然后显示这10本书中最高价格，最低价格和平均价格。
index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>  
  <body>
    <script type="text/javascript">
        function fun(){
            var sum=0;var max=0;var min=1000000000;
            var x=document.getElementsByName("b");
            var tmp=0.0;
            for(var i=0;i<x.length;i++){
                if(x[i].value==""){
                    tmp=0.0;
                    alert("请输入全部10本书的价格!");
                    sum=0.0;
                    min=0.0;
                    max=0.0;
                    break;
                }
                else{
                    tmp=parseFloat(x[i].value);
                }
                sum=sum+tmp;
                if(max<tmp){max=tmp;}
                if(min>tmp){min=tmp;}
            }

            document.getElementById("max").value=max;
            document.getElementById("min").value=min;
            document.getElementById("sum").value=sum;
            return;
        }
    </script>
    <p>请输入10本书的价格</p>
    <form name="bookprice">
        book01<input name="b" type="text"><BR>
        book02<input name="b" type="text"><BR>
        book03<input name="b" type="text"><BR>
        book04<input name="b" type="text"><BR>
        book05<input name="b" type="text"><BR>
        book06<input name="b" type="text"><BR>
        book07<input name="b" type="text"><BR>
        book08<input name="b" type="text"><BR>
        book09<input name="b" type="text"><BR>
        book10<input name="b" type="text"><BR>
        <input type="button" onclick="fun()" value="提交"><BR>
        最高价格<input id="max" type="text"  readonly><BR>
        最低价格<input id="min" type="text"  readonly><BR>
        价格总和<input id="sum" type="text"  readonly><BR>
    </form>
  </body>
</html>

这是一般的写法，可以看到程序中写了10个表单input输入框来给用户输入书的价格，这样写是很繁琐的，可以用jsp程序段<%%>来简化代码，如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>  
  <body>
    <script type="text/javascript">
        function fun(){
            var sum=0;var max=0;var min=1000000000;
            var x=document.getElementsByName("b");
            var tmp=0.0;
            for(var i=0;i<x.length;i++){
                if(x[i].value==""){
                    tmp=0.0;
                    alert("请输入全部10本书的价格!");
                    sum=0.0;
                    min=0.0;
                    max=0.0;
                    break;
                }
                else{
                    tmp=parseFloat(x[i].value);
                }
                sum=sum+tmp;
                if(max<tmp){max=tmp;}
                if(min>tmp){min=tmp;}
            }

            document.getElementById("max").value=max;
            document.getElementById("min").value=min;
            document.getElementById("sum").value=sum;
            return;
        }
    </script>
    <p>请输入10本书的价格</p>
    <form name="bookprice">
        <%      
        for(int i=1;i<=10;i++){
            %>book<%= i%><input name="b" type="text"><BR><%
        }
         %>
        <input type="button" onclick="fun()" value="提交"><BR>
        最高价格<input id="max" type="text"  readonly><BR>
        最低价格<input id="min" type="text"  readonly><BR>
        价格总和<input id="sum" type="text"  readonly><BR>
    </form>
  </body>
</html>

总结：
1.js获取表单值

var x=document.getElementsByName("name");

这个语句获取名为“name”的对象，当名为“name”的元素只有一个时，x为单个值；当有多个同名元素时，x为数组，此时用x[i]来依次获取元素。

2.js设置表单值

 document.getElementById("max").value=max;

本题将名为”max”的input文本框值设为变量max

3.将input输入框设置为不可编辑形式
此处用“readonly”，还有另一个“disabled”，也可以达到这个目的，这两者的区别在于使用disabled后，用户无法编辑输入框，并且无法在js或者jsp程序段中获取input输入框中的值，即将元素锁定；而readonly只会使得用户不能编辑输入框，在js中仍能通过document对象访问获取值。

最高价格<input id="max" type="text" readonly ><BR>

这两者具体的区别见：
http://www.nowamagic.net/html/html_ReadonlyAndDisabled.php

rookie_zfy

关注

15
点赞
踩
61

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录