关于form表单提交的问题

个人遇到的几个问题：

1.提交form表单，必须获取到input里面的值

2.针对以下代码将div里面的值赋给input，先获取div的值，在jquery里面 var typetext = $(this).text(); 然后将typetext放到input中，$("#type").val(typetext);"#type"是input的ID；

3.form表单提交验证，如果是button或者是submit都要在form里面加入onsubmit<form action="" onsubmit = "return xx()">这里"return"  是为了防止验证不通过就不会提交到后台。

欢迎评论留言?

---

<%--==========整房=========--%>
<div id="yuansus" style="display: block;">
    <form action="${pageContext.request.contextPath}/searchList/Thewholeroom" method="post" onsubmit="return msg1()">
    <div class="zh_list">
        <div class="zh_list_title">预算 （万）</div>
        <div class="zh_list_row" id="quanbuyanse">
             <c:forEach items="${budgetPriceList}" var="budgetPriceList" >
                     <div class="price">${budgetPriceList.value}万</div>
             </c:forEach>
            <input type="hidden" class="pricered"></input>
            <%--将div中的数据放到input中的value里面--%>
            <input type="hidden" id="price" name="price" value="" />
        </div>
    </div>

    <div class="zh_list">
        <div class="zh_list_title">风格</div>
        <div class="zh_list_row" id="styleList">
            <select id="style" name="style" class="select_xia">
                <c:forEach items="${styleList}" var="styleList">
                    <option class="sl" value="${styleList.value}">${styleList.value}</option>
                </c:forEach>
         </select>
        </div>
    </div>
    <div class="zh_list">
        <div class="zh_list_title">类型</div>
        <div class="zh_list_row" id="tp">
            <div class="typeLx" ><p>住宅区-</p></div>
            <div class="typeLx"><p>别墅</p></div>
            <div class="typeLx"><p>商业</p></div>
            <div class="typeLx"><p>写字楼</p></div>
            <div class="typeLx"><p>公共区域</p></div>
        </div>
        <input type="hidden" id="type" name="type" value="" />
    </div>
    <div class="zh_list">
        <div class="zh_list_title">房型</div>
        <div class="zh_list_row" id="rm">
            <div class="zhList">两室</div>
            <div class="zhList">三室</div>
            <div class="zhList">四室</div>
            <div class="zhList">五室</div>
            <div class="zhList">五室以上</div>
        </div>
        <input type="hidden" id="room" name="room" value="" />
    </div>
    <div class="zh_list">
        <div class="zh_list_title">装修时间</div>
        <div class="zh_list_row" id="dt">
            <div class="rowList">已经开工</div>
            <div class="rowList">未来一个月</div>
            <div class="rowList">未来三个月</div>
            <div class="rowList">未来半年</div>
            <div class="rowList">未来一年</div>
        </div>
        <input type="hidden" id="decorateTime" name="decorateTime" value="" />
    </div>
        <div class="decorate_submit">
            <button>制定专属方案</button>
            <input type="hidden" id="msg" value="${msg}">
        </div>

    </form>
</div>

<!--以下是jQuery部分-->
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    /*====================================整房=====================================================================*/
    /*进行form表单提交验证*/
    function msg1(){
        if($('#price').val()==''){
            alert('预算不能为空');
            return false
        }else if($('#type').val()==''){
            alert('类型不能为空');
            return false
        }else if($('#room').val()==''){
            alert('房型不能为空');
            return false
        }else if($('#decorateTime').val()==''){
            alert('装修时间不能为空');
            return false
        }else{
            alert('添加成功！')
            return true;
        }
    }
    /*预算*/
    $(function () {
        $(".price").click(function () {//给div1添加点击事件
            $("#quanbuyanse").find("div").attr("class","");
           var budgettext = $(this).text();//这样无论你点哪一个div都 可以获它里面的值
            $("#price").val(budgettext);
            if (budgettext){
                $(this).addClass('zh_choose');
            }
        })
    });
    /*类型*/
    $(function() {
        $(".typeLx").click(function () {//给div1添加点击事件
            $("#tp").find("div").attr("class","");
            var typetext = $(this).text();//这样无论你点哪一个div都 可以获它里面的值
             $("#type").val(typetext);
            if (typetext){
                $(this).addClass('zh_choose');
            }
        })
    });
    /*房型*/
    $(function() {
        $(".zhList").click(function () {//给div1添加点击事件
            $("#rm").find("div").attr("class","");
            var roomtext = $(this).text();//这样无论你点哪一个div都 可以获它里面的值
            $("#room").val(roomtext);
            if (roomtext){
                $(this).addClass('zh_choose');
            }
        })
    });
    /*装修时间*/
    $(function() {
        $(".rowList").click(function () {//给div1添加点击事件
            $("#dt").find("div").attr("class","");
            var timetext = $(this).text();//这样无论你点哪一个div都 可以获它里面的值decorateTime
            $("#decorateTime").val(timetext);
            if (timetext){
                $(this).addClass('zh_choose');
            }
        })
    });
</script>

可以把这个添加的功能都给完善：

控制器controller代码奉上：

/*
 * 专属方案   房型-空间-产品
 * */
@Controller
@RequestMapping("searchList")
public class searchController extends BaseController {

    @Autowired
    private OfficialTypeService myqImageOfficialService;
    @Autowired
    private ElementService elementService;
    @Autowired
    private ProductwebService productwebService;
    @Autowired
    private ProductCaseService productCaseService;
    @Autowired
    private WholeRoomService wholeRoomService;
    @Autowired
    private WholeSpaceService wholeSpaceService;

    @Autowired
    private WholeDecorateService wholeDecorateService;

    //遍历案列
    private void productcaseId(ProductCase productCase, HttpServletRequest request, HttpServletResponse response, Model model) {
        List<ProductCase> productcasepage = productCaseService.findList(productCase);
        productcasepage.forEach(value -> {
            if (value.getCaseImg() != null && !value.getCaseImg().equals("")) {
                String[] imgs = value.getCaseImg().replace("|", ",").split(",");
                value.setImg(imgs);
            } else {
                value.setImg(new String[]{"", "image/default_picture.jpg"});
            }
        });
        model.addAttribute("productCase", productCase);
        model.addAttribute("productcasepage", productcasepage);
    }

    //遍历产品
    private void productwebId(Productweb productweb, HttpServletRequest request, HttpServletResponse response, Model model) {
        List<Productweb> productwebpage = productwebService.findList(productweb);
        productwebpage.forEach(value -> {
            if (value.getPicrul() != null && !value.getPicrul().equals("")) {
                String[] imgs = value.getPicrul().replace("|", ",").split(",");
                value.setImg(imgs);
            } else {
                value.setImg(new String[]{"", "image/default_picture.jpg"});
            }
        });
        model.addAttribute("productweb", productweb);
        model.addAttribute("productwebpage", productwebpage);
    }

    //遍历元素
    private void elementId(Model model, HttpServletRequest request, HttpServletResponse response, Element element) {
        List<Element> elementpage = elementService.findList(element);
        elementpage.forEach(ele -> {
            if (ele.getPicrul() != null && !ele.getPicrul().equals("")) {
                String[] imgs = ele.getPicrul().replace("|", ",").split(",");
                ele.setImg(imgs);
            } else {
                ele.setImg(new String[]{"", "image/default_picture.jpg"});
            }
        });
        model.addAttribute("elementpage", elementpage);
        model.addAttribute("element", element);
    }


    //重定向到allList
    @RequestMapping("reAllList")
    public String reAllList(){

        return "redirect:/searchList/allList";
    }

    //遍历显示元素、产品、案列。条件查询
    @RequestMapping("/allList")
    public String allClass(String state, HttpSession session,Model model, HttpServletRequest request, HttpServletResponse response) {
        session.setAttribute("state",state);
        User user = UserUtils.getUser();
        if (user.getId() == null) {
            //  没有登录跳转到登录页面
            return "modules/move/login";
        }
        List<Dict> materialList = myqImageOfficialService.findListByType("build");//获取字典中的材质
        List<Dict> styleList = myqImageOfficialService.findListByType("style");        //获取字典中的设计风格
        List<Dict> budgetPriceList = myqImageOfficialService.findListByType("budgetPrice");        //预算金额
        List<Dict> placeList = myqImageOfficialService.findListByType("place");        //地点
        List<Dict> sizeList = myqImageOfficialService.findListByType("priceRange");        //房间大小
        List<Dict> productClassList = myqImageOfficialService.findListByType("productClass");//产品分类

        model.addAttribute("materialList", materialList);
        model.addAttribute("styleList", styleList);
        model.addAttribute("budgetPriceList", budgetPriceList);
        model.addAttribute("placeList", placeList);
        model.addAttribute("sizeList", sizeList);
        model.addAttribute("productClassList", productClassList);
        return "modules/search/SearchList";
    }

    //专属方案整房
    @RequestMapping("Thewholeroom" )
    public String wholeroom(WholeRoom wholeRoom, Model model,HttpServletRequest request,HttpSession session, HttpServletResponse response) {
        //获取当前登录人的信息
        User user = UserUtils.getUser();
        //生成一个UUID
        String id= IdGen.uuid();
        //通过添加ID获取ID数据
            wholeRoom.setUserId(user.getId());
         wholeRoom.setId(id);
         //添加的接口
           wholeRoomService.insert(wholeRoom);
        return "redirect:/searchList/reAllList";
    }
｝
<=========此部分之时关于整房部分========>

dao层：

/**
 * 专属方案房型DAO接口
 * @author hf.z
 * @version 2018-11-05
 */
@MyBatisDao
public interface WholeRoomDao extends CrudDao<WholeRoom> {

    //添加房型
    void insert(WholeRoom wholeRoom);
	
}

service兼impl：

/**
 * 专属方案房型Service
 * @author G
 * @version 2018-11-05
 */
@Service
@Transactional(readOnly = true)
public class WholeRoomService extends CrudService<WholeRoomDao, WholeRoom> {

        @Transactional(readOnly = false)
        //添加的接口
	public void insert(WholeRoom wholeRoom) {
		dao.insert(wholeRoom);
	}