master

分支 (1)

管理

管理

master

tencent_map_demo
/
shifei_basics.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>施肥基础信息</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.validate.min.js"></script>
</head>

<body class="back">

	<ul class="for_ul shifei_ul clearfix">
    	<li><a href="javascript:;" class="for">基础信息</a></li>
        <li><a href="javascript:;" class="for_one">土壤养分</a></li>
        <li><a href="javascript:;" class="for_two">配方条件</a></li>
    </ul>

    <div class="shifei_box" style="display:block;">
        <ul class="que_ul fore_ul">
            <li class="clearfix">
                <span class="que_left">经度</span>
                <span class="que_right">700.7653</span>
            </li>

            <li class="clearfix">
                <span class="que_left">土壤类型</span>
                <span class="que_right">水稻土-淹育型-沙泥型-山
    沙泥田</span>
            </li>

            <li class="clearfix">
                <span class="que_left">所属区域</span>
                <span class="que_right">勐海线勐海镇曼袄村民居委会</span>
            </li>
        </ul>
    </div>
    <div class="shifei_box">
    	<ul class="que_ul fore_ul">
        <li class="clearfix">
            <span class="que_left">经度</span>
            <span class="que_right">800.7653</span>
        </li>

        <li class="clearfix">
            <span class="que_left">土壤类型</span>
            <span class="que_right">水稻土-淹育型-沙泥型-山
沙泥田</span>
        </li>

        <li class="clearfix">
            <span class="que_left">所属区域</span>
            <span class="que_right">勐海线勐海镇曼袄村民居委会</span>
        </li>
    </ul>
    </div>

    <div class="shifei_box">
    	<form class="cond_form" id="condForm">
        <div class="cond_top">
            <em class="cond_tit">请输入农户名</em>
            <input type="text" class="cond_txt" name="riceTxt1" id="riceTxt1" value="" placeholder="水稻一">
        </div>
        <div class="cond_div clearfix">
        	<span class="cond_span">请选择目标作物</span>
            <select id="targetCrop" name="targetCrop">
                <option value="">请选择</option>
                <option value="0">好孩子</option>
                <option value="1">好孩子</option>
            </select>
        </div>

        <div class="cond_top">
            <em class="cond_tit">该地块近三年目标作物平均产量(kg/亩)</em>
            <input type="text" class="cond_txt" id="riceTxt2" name="riceTxt2" value="" placeholder="水稻一">
        </div>
        <div class="cond_top">
            <em class="cond_tit">预计施入农家肥料(kg/亩）</em>
            <input type="text" class="cond_txt" id="riceTxt3" name="riceTxt3" value="" placeholder="水稻一">
        </div>
         <div class="cond_top">
            <em class="cond_tit">目标产量(kg/亩)</em>
            <input type="text" class="cond_txt" id="riceTxt4" name="riceTxt4" value="" placeholder="水稻一">
        </div>

        <div class="cond_div clearfix">
        	<span class="cond_span">土壤肥力</span>
            <select id="soilFertility" name="soilFertility">
                <option value="">请选择</option>
                <option value="0">好孩子</option>
                <option value="1">好孩子</option>
            </select>
        </div>
        <div class="cond_top">
            <em class="cond_tit">目标产量(kg/亩)</em>
            <input type="text" class="cond_txt" id="riceTxt5" name="riceTxt5" value="" placeholder="水稻一">
        </div>
        <div class="cond_div cond_inner clearfix">
        	<span class="cond_span">土壤肥力</span>
            <select id="soilFertilityList" name="soilFertilityList">
                <option value="">请选择</option>
                <option value="0">好孩子</option>
                <option value="1">好孩子</option>
            </select>
        </div>

        <div class="cond_div cond_inner clearfix">
        	<span class="cond_span">请选择目标作物</span>
            <select id="soilFertilityList2" name="soilFertilityList2">
                <option value="">请选择</option>
                <option value="0">好孩子</option>
                <option value="1">好孩子</option>
            </select>
        </div>
        <div class="cond_div cond_inner clearfix">
        	<span class="cond_span">请选择目标作物</span>
            <select id="soilFertilityList3" name="soilFertilityList3">
                <option value="">请选择</option>
                <option value="0">好孩子</option>
                <option value="1">好孩子</option>
            </select>
        </div>
        <div class="cond_div cond_inner clearfix">
            <span class="cond_span">请选择目标作物</span>
            <select id="soilFertilityList4" name="soilFertilityList4">
                <option value="">请选择</option>
                <option value="0">好孩子</option>
                <option value="1">好孩子</option>
            </select>
        </div>


        <!-- <em class="cond_sub">确认提交</em> -->
        <input type="submit" name="" class="cond_sub" value="确认提交">
        <input type="button" name="" value="添加到我的地块" class="dikuai_sub">
    </form>
    </div>

	<div class="praylay" style="display: none;"></div>
    <div class="success_box" style="display: none;">
        <div class="ok_bg"></div>
        <p class="txt_ok">添加完成</p>
        <em class="ok_txt">完成</em>
    </div>
</body>


<script>
$(function(){
	$('.for_ul a').click(function(){
		$('.for_ul a').removeClass('for')
		$('.shifei_box').hide()
		var index=$('.for_ul a').index(this);
		$('.for_ul a').eq(index).addClass('for')
		$('.shifei_box').eq(index).show()
	})

    $('.dikuai_sub').click(function(){
        $('.success_box , .praylay').show();
    })
    $('.ok_txt').click(function(){
        $('.success_box , .praylay').hide();
    })


    $('body').on('click','.close' ,function(){
        $('.elastic').remove()
    })

    var validator = $("#condForm").validate({
            rules: {
                targetCrop: {
                    required: true
                },
                soilFertility: {
                    required: true
                },
                soilFertilityList: {
                    required: true
                },
                soilFertilityList2: {
                    required: true
                },
                soilFertilityList3: {
                    required: true
                },
                soilFertilityList4: {
                    required: true
                },
                riceTxt1:{
                    required: true
                },
                riceTxt2:{
                    required: true
                },
                riceTxt3:{
                    required: true
                },
                riceTxt4:{
                    required: true,
                    equalTo2: "#riceTxt2"
                },
                riceTxt5:{
                    required: true
                }
            },
            messages: {
                targetCrop: {
                    required: "请选择"
                },
                soilFertility: {
                    required: "请选择"
                },
                soilFertilityList: {
                    required: "请选择"
                },
                soilFertilityList2: {
                    required: "请选择"
                },
                soilFertilityList3: {
                    required: "请选择"
                },
                soilFertilityList4: {
                    required: "请选择"
                },
                riceTxt1:{
                    required: "请输入"
                },
                riceTxt2:{
                    required: "请输入"
                },
                riceTxt3:{
                    required: "请输入"
                },
                riceTxt4:{
                    required: "请输入",
                    equalTo2: '请输入0.8倍至1.2倍之间的数'
                },
                riceTxt5:{
                    required: "请输入"
                }
            },
            submitHandler: function(form) {
                var riceTxt1 = $('#riceTxt1').val();
                var options1=$('#targetCrop option:selected');
                var options1Val = options1.val();
                var options1Txt = options1.text();
                var riceTxt2 = $('#riceTxt2').val();
                var riceTxt3 = $('#riceTxt3').val();
                var riceTxt4 = $('#riceTxt4').val();
                var options2=$('#soilFertility option:selected');
                var options2Val = options2.val();
                var options2Txt = options2.text();
                var riceTxt5 = $('#riceTxt5').val();
                var options3=$('#soilFertilityList option:selected');
                var options3Val = options3.val();
                var options3Txt = options3.text();
                var options4=$('#soilFertilityList2 option:selected');
                var options4Val = options4.val();
                var options4Txt = options4.text();
                var options5=$('#soilFertilityList3 option:selected');
                var options5Val = options5.val();
                var options5Txt = options5.text();
                var options6=$('#soilFertilityList4 option:selected');
                var options6Val = options6.val();
                var options6Txt = options6.text();

                //获取select下拉的value值
                console.log(options1Val , options2Val ,options3Val ,options4Val , options5Val , options6Val)
                var elasticHtml = '';
                elasticHtml +='<div class="elastic" id="elasticPop" >'
                elasticHtml +='    <p>作物：'+ riceTxt1 +'</p>'
                elasticHtml +='    <p>肥力：'+ options1Txt +'</p>'
                elasticHtml +='    <p>氮肥：'+ riceTxt2 +'</p>'
                elasticHtml +='    <p>磷肥：'+ riceTxt3 +'</p>'
                elasticHtml +='    <p>钾肥：'+ riceTxt4 +'</p>'
                elasticHtml +='    <p>作物：'+ options2Txt +'</p>'
                elasticHtml +='    <p>肥力：'+ riceTxt5 +'</p>'
                elasticHtml +='    <p>氮肥：'+ options3Txt +'</p>'
                elasticHtml +='    <p>磷肥：'+ options4Txt +'</p>'
                elasticHtml +='    <p>钾肥：'+ options5Txt +'</p>'
                elasticHtml +='    <p>钾肥：'+ options6Txt +'</p>'
                elasticHtml +='    <input type="submit" name="" value="确认提交" id="elaBtn" class="ela_btn">'
                elasticHtml +='    <a href="javascript:;" class="close"></a>'
                elasticHtml +='</div>'

                $('body').append(elasticHtml)
                var elasticPopHeight = $('#elasticPop').height();
                $('#elasticPop').css({'margin-top':-(elasticPopHeight/2)+"px"});

                $('.elastic').show()
            }
        });

        $('body').on('click' , '#elaBtn' , function(){
            $$.ajax({
                url: '/path/to/file',
                type: 'default GET (Other values: POST)',
                dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
                data: {param1: 'value1'},
            })
            .done(function() {
                console.log("success");
            })
            .fail(function() {
                console.log("error");
            })

        })
})
</script>
</html>