<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<script type="text/javascript">
    $(document).ready(function(){
        var ajaxLoading=false;
        $("#saveModel").click(function(){
          if(!ajaxLoading){
            ajaxLoading=true;
            var manufacturer = $("#manufacturers option:selected").val();
            var type = $("#types option:selected").val();
            var modelName = $("#modelNames option:selected").val();
            if(manufacturer==""){
                alert("select manufacturer");
            }else if(type==""){
                alert("select cpe type");
            }else if(modelName ==""){
                alert("select model name");
            } else {
                $.ajax({
                        url: "saveNewModel.action",
                        data:{
                             type:type,
                             manufacturer:manufacturer,
                             modelName:modelName
                             },
                        type:"post",
                        success:function(data) {
                            alert(data);
                            if(data=='success') {
                               $("#manufacturers").val("");
                               $("#types").val("");
                               $("#modelNames").val("--Select Model--");
                            }
                        }
                });
            }
            ajaxLoading=false;
          }
         });
    });
</script>
<style type="text/css">

     .parts{
            width: 200px;
            display: block;
            margin-left: 0px;
            float: left;
     }

     .partsType{
            margin-left: 50px;
     }

     .partModel{
           width: 440px;
           display: block;
           margin-left: 350px;
           float: left;
           margin-top: 50px;
     }

     .title{
           width: 200px;
     }

     .titleModel{
           width: 440px;
     }

     #first{
           width: 980px;
           height: 50px;
           line-height: 50px;
           font-size: 22px ;
           text-align:center;
           margin-bottom: 70px;
           font-style: italic;
          margin-top: 40px;
     }

     #saveModel{
           float: left;
           margin-left: 380px;
           margin-top: 0px;
     }

</style>
 <div id="first">Adding new model</div>
<div style="width: 800px;margin-left: 100px;display: block;padding-left: 100px;height: 150px;">
    <div class="parts">
        <div class="title">Manufacturer :</div>
        <s:select list="manufacturers"  id="manufacturers" listKey="manufacturerId"  listValue="name"  headerKey="" headerValue="--Select Manufacturer--"  name="manufacturers"/>
    </div>
    <div class="parts partsType">
        <div class="title">Device Type :</div>
        <s:select list="types" id="types"  listKey="value"  listValue="title"  headerKey="" headerValue="--Select Type--"  name="types"/>
    </div>
    <div class="parts">
        <div class="title">Model :</div>
        <s:select list="modelNames" id="modelNames"  listKey="model"  listValue="model"  headerKey="" headerValue="--Select Model--"  name="modelNames"/>
    </div>
</div>
    <button id="saveModel">Save New Model</button>

