Eko Setiawan
Eko Setiawan

Reputation: 35

How to optionally remove some form query params?

Basically, I have a form with two input fields. A and B.

When I submit the form, it is submitted with these param, values

A=a&B=b

I have a radio button on the form, which if clicked will hide the input field B.

Now, what I want is that if the form is submitted now, it is submitted like this

A=a

B should be completely ignored and not even the default value of B should be submitted. I want to achieve this with a single form.

Here are the details of my situation.

I made a form and I possessed two radio buttons. If I click the radio button A, it will bring one input the date, and if I click the radio button B, it will bring up two input dates. but when I want to return to the radio button A and I submit the form, he displays the value of the input date to the second.

How to do in order to input the date that I hide not appear on the parameters?

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <style type='text/css'>
        @font-face {
            font-family: 'Pacifico';
            font-style: normal;
            font-weight: 400;
            src: local('Pacifico Regular'), local(Pacifico-Regular), url(font/Pacifico-Regular.woff2) format("woff2");
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000
        }
    </style>
    <link rel="stylesheet" type="text/css" href="../css/jquery-ui.min.css" />
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

    <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="../js/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="../css/datepicker/jquery-ui.css">
    <script src="../js/datepicker/jquery-1.12.4.js"></script>
    <script src="../js/datepicker/jquery-ui.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#tgl").datepicker({
                //minDate: -1, maxDate: "+1D",
                changeMonth: true,
                changeYear: true,
                todayBtn: "linked",
                language: "id",
                autoclose: true,
                todayHighlight: true,
                dateFormat: 'ddMyy'
            });
        });
        $(function() {
            $("#tgl2").datepicker({
                //minDate: -1, maxDate: "+1D",
                changeMonth: true,
                changeYear: true,
                todayBtn: "linked",
                language: "id",
                autoclose: true,
                todayHighlight: true,
                dateFormat: 'ddMyy'
            });
        });
    </script>
    <script>
        $(document).ready(function() {

            $("div.desc").prop('disabled', false).hide("slow");

            $("input[name$='choice_tgl']").click(function() {
                var test = $(this).val();
                $("div.desc").hide("slow");
                $("#div_tgl" + test).prop('disabled', false).show("slow");
            });
        });
    </script>
    <!-- Inline CSS based on choices in "Settings" tab -->
    <style>
        .bootstrap-iso .formden_header h2,
        .bootstrap-iso .formden_header p,
        .bootstrap-iso form {
            font-family: Arial, Helvetica, sans-serif;
            color: black
        }

        .bootstrap-iso form button,
        .bootstrap-iso form button:hover {
            color: white !important;
        }

        .asteriskField {
            color: red;
        }
    </style>
</head>

<!-- HTML Form (wrapped in a .bootstrap-iso div) -->
<div class="panel panel-primary">
    <div class="panel-heading"><b>MENU BANTU SALES</b></div>
    <div class="panel-body">
        <div class="bootstrap-iso">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <form id="form_sales" method="get" action="sales.php">
                            <div class="form-group ">
                                <label class="control-label requiredField" for="masalah">
                                    TOKO
                                    <span class="asteriskField">
        *
       </span>
                                </label>
                                <select class="select form-control" name="act" required>
                                    <option value="">- PILIH TOKO -</option>
                                    <option value="all">#### ALL TOKO ####</option>
                                    <option value="2D01">2D01 - PERUM OMA [PEOM]</option><option value="2D02">2D02 - BOTANIA BATAM [BOTA]</option><option value="2D03">2D03 - PUTRI HIJAU [PUHI]</option><option value="2D04">2D04 - TIBAN [TIBA]</option><option value="2D05">2D05 - PERMATA LAGUNA [PELA]</option><option value="2D06">2D06 - PERUM PEMDA II [PPII]</option><option value="2D07">2D07 - MERAPI SUBUR [MESU]</option><option value="2D08">2D08 - SAGUBA [SGUA]</option><option value="2D09">2D09 - TAMAN CIPTA INDAH [TCPI]</option><option value="2D10">2D10 - MITRA CENTRE [MICE]</option><option value="2D11">2D11 - TIBAN GLOBAL [TGLO]</option><option value="2D12">2D12 - SIMPANG BSI [SPBI]</option><option value="2D13">2D13 - PINKY AVIARI [PIRI]</option><option value="2D14">2D14 - PUTRA JAYA [PURJ]</option><option value="2D15">2D15 - TMN LAGUNA INDAH [TLIH]</option><option value="2D16">2D16 - LEGENDA MALAKA [LEKA]</option><option value="2D17">2D17 - LEGENDA JUNCTION [LEJU]</option><option value="2D18">2D18 - KUDA PUTIH [KUPU]</option><option value="2D19">2D19 - BENGKONG INDAH [BKIH]</option><option value="2D20">2D20 - TIBAN MC DERMOT [TMDE]</option><option value="2D21">2D21 - BUANA INDAH [BUIN]</option><option value="2D22">2D22 - KOMP. GMP [KGMP]</option><option value="2D23">2D23 - BENGKONG PALAPA [BEPA]</option><option value="2D24">2D24 - CENTRAL LEGEND POINT [CLEP]</option><option value="2D25">2D25 - GRIYA FULI [GRFU]</option><option value="2D26">2D26 - DAPUR 12 [DP121]</option><option value="2D27">2D27 - AVIARI 2 [AVI2]</option><option value="2D28">2D28 - MARCHELIA [MCHA]</option><option value="2D29">2D29 - VALLY PARK [VARK]</option><option value="2D30">2D30 - PRIMA GARDEN [PIGA]</option><option value="2D31">2D31 - SIMPANG NATO [SITO]</option><option value="2D32">2D32 - HANG TUAH [HATU]</option><option value="2D33">2D33 - PANTAI GADING [PADI]</option><option value="2D34">2D34 - TAMAN RAYA [TAMA]</option><option value="2D35">2D35 - RKT AVIARI [RKTA]</option><option value="2D36">2D36 - PUTRA JAYA BINTAN [PJAB]</option><option value="2D37">2D37 - SERAYA [SEAY]</option><option value="2D38">2D38 - KINTAMANI [KINI]</option><option value="2D39">2D39 - PHOENIX [PHOX]</option><option value="2D40">2D40 - NASA SENTOSA [NASE]</option><option value="2D41">2D41 - SAN FRANSISCO[SFCO]</option><option value="2D42">2D42 - SUNGAI PANAS [SNAS]</option><option value="2D43">2D43 - AIR MAS [AMAS]</option><option value="2D44">2D44 - TAMAN CARINA [TMCR]</option><option value="2D45">2D45 - MITRA RAYA [MIYA]</option><option value="2D46">2D46 - MARBELLA 2 [MAR2]</option><option value="2D47">2D47 - HANG LEKIR [HALE]</option><option value="2D48">2D48 - BENGKONG RATU [BGRT]</option><option value="2D49">2D49 - ROYAL SINCOM [ROSI]</option><option value="2D50">2D50 - GRAHA TIRTA INDAH [GRTI]</option><option value="2D51">2D51 - MARBELLA [MELA]</option><option value="2D52">2D52 - PURIMAS/F [PUMS]</option><option value="2D53">2D53 - JODOH SQUARE [JOSU]</option><option value="2D54">2D54 - OZON [OZON]</option><option value="2D55">2D55 - GOLDEN PRAWN [GOWN]</option><option value="2D56">2D56 - NEW HOLIDAY [NEHO]</option><option value="2D57">2D57 - BUANA IMPIAN/F [BUIM]</option><option value="2D58">2D58 - PANTAI GADING [PAIG]</option><option value="2D59">2D59 - CITRA NUSA NIAGA [CINA]</option><option value="2D60">2D60 - SURYA MANDIRI [SUMI]</option><option value="2D61">2D61 - PERMATA HIJAU [PEHI]</option><option value="2D62">2D62 - BALOI CENTRE [BACE]</option><option value="2D63">2D63 - BDR HANG NADIM [HGNM]</option><option value="2D64">2D64 - PENUIN CENTRE [PECE]</option><option value="2D65">2D65 - GENTA 1 [GENT]</option><option value="2D66">2D66 - DUTA MAS [DUMA]</option><option value="2D67">2D67 - SAWANG PERMAI[SAPE]</option><option value="2D68">2D68 - VILLA TAMAN BUNGA [VATA]</option><option value="2D69">2D69 - KARTINI [KITI]</option><option value="2D70">2D70 - BUANA VISTA [BVTA]</option><option value="2D71">2D71 - BUNGA RAYA [BAAY]</option><option value="2D72">2D72 - BOTANIA GARDEN [BOGA]</option><option value="2D73">2D73 - MELCEM [MELM]</option><option value="2D74">2D74 - GMP 2 [GMP2]</option><option value="2D75">2D75 - GOLDEN LAND [GOLA]</option><option value="2D76">2D76 - MEGA LEGENDA [MEDA]</option><option value="2D77">2D77 - TUNAS 2 [TUN2]</option><option value="2D78">2D78 - GRIYA KURNIA DJAYA [GIYA]</option><option value="2D79">2D79 - SRIJAYA ABADI [SAAB]</option><option value="2D80">2D80 - BLOK 3 [BLK3]</option><option value="2D81">2D81 - ALIBABA [ALIA]</option><option value="2D82">2D82 - MEDITERANIA [MEIA]</option><option value="2D83">2D83 - SAGULUNG PERMAI [SGPR]</option><option value="2D84">2D84 - CIPTA SARANA [CTRN]</option><option value="2D85">2D85 - SEI HARAPAN [SIHA]</option><option value="2D86">2D86 - NAGOYA NEWTOWN [NWTN]</option><option value="2D87">2D87 - CENDANA [CEND]</option><option value="2D88">2D88 - BUKIT KEMUNING [BKKM]</option><option value="2D89">2D89 - LUCKY PERMAI [LCPM]</option><option value="2D90">2D90 - HARAPAN BISNISCENTER/F [HABC]</option><option value="2D91">2D91 - GAJAH MADA/F [GAAD]</option><option value="2D92">2D92 - SEI PANAS 2 [SIPS]</option><option value="2D93">2D93 - CENTRE PARK [CNPK]</option><option value="2D94">2D94 - HAPPY GARDEN [HPGD]</option><option value="2D95">2D95 - TAMAN CIPTA ASRI [TACA]</option><option value="2D96">2D96 - PERUM TAMAN RAYA III [PETR]</option><option value="2D97">2D97 - TAMAN KOTA MAS [TAKS]</option><option value="2D98">2D98 - GRIYA PRATAMA [GITA]</option><option value="2D99">2D99 - TUNAS REGENCY [TARY]</option><option value="2DA1">2DA1 - KAVLING LAMA [KILA]</option><option value="2DA2">2DA2 - PUSKOPKAR [PUKO]</option><option value="2DA3">2DA3 - BUKIT BERUNTUNG [BIBE]</option><option value="2DA4">2DA4 - PEMDA 1 [PEM1]</option><option value="2DA5">2DA5 - TIBAN CENTRE/F [TBCE]</option><option value="2DA6">2DA6 - TIBAN III [TIAN]</option><option value="2DA7">2DA7 - TIBAN LESTARI [TALE]</option><option value="2DA8">2DA8 - BATAM PARK [BAPA]</option><option value="2DA9">2DA9 - ANGGREK SARI [ANSA]</option><option value="2DB1">2DB1 - AVIARI GRIYA PRATAMA [AGIP]</option><option value="2DB2">2DB2 - SPBU KDA [SPBD]</option><option value="2DB3">2DB3 - DERMAGA SUKAJADI [DESU]</option><option value="2DB4">2DB4 - SEI PANCUR [SIPU]</option><option value="2DB5">2DB5 - NAGOYA PARADISE/F [NAPE]</option><option value="2DB6">2DB6 - PUNGGUR [PUGR]</option><option value="2DB7">2DB7 - TIBAN KOPERASI [TIKO]</option><option value="2DB8">2DB8 - SIMPANG 4 MANGSANG [S4MA]</option><option value="2DB9">2DB9 - KAVLING PELOPOR [KIPR]</option><option value="2DC1">2DC1 - PANDAWA/F [PNAW]</option><option value="2DC2">2DC2 - PONDOK PRATIWI [POPA]</option><option value="2DC3">2DC3 - GREEN LAGUNA [GENA]</option><option value="2DC4">2DC4 - KAPITA PLAZA/F [KAZA]</option><option value="2DC5">2DC5 - PURI AGUNG [PUNG]</option><option value="2DC6">2DC6 - MANDALAY [MALY]</option><option value="2DC7">2DC7 - BIDA AYU [BIYU]</option><option value="2DC8">2DC8 - GLORY HOME [GOHO]</option><option value="2DC9">2DC9 - LAKSAMANA BINTAN [LABI]</option><option value="2DD1">2DD1 - CAHAYA GARDEN [CHGA]</option><option value="2DD2">2DD2 - BENGKONG PERMAI [BEPE]</option><option value="2DD3">2DD3 - PINTU 3 BIDA AYU [P3BA]</option><option value="2DD4">2DD4 - BENGKONG SADAI [BESI]</option><option value="2DD5">2DD5 - RAYA TIBAN/F [RYTI]</option><option value="2DD6">2DD6 - NAGOYA 1[NGY1]</option><option value="2DD7">2DD7 - MELCEM 2 [MEL2]</option><option value="2DD8">2DD8 - AKU TAHU [AKTH]</option><option value="2DD9">2DD9 - CIPTA PURI [CAPI]</option><option value="2DE1">2DE1 - NAGOYA [NAGA]</option><option value="2DE2">2DE2 - HANG KESTURI [HAKE]</option><option value="2DE3">2DE3 - ALADIN [ALAI]</option><option value="2DE4">2DE4 - PUTRI HIJAU 2 [PUH2]</option><option value="2DE5">2DE5 - KAVLING BARU [KVBA]</option><option value="2DE6">2DE6 - KAVLING MANGSANG [KVMG]</option><option value="2DE7">2DE7 - TIBAN IMPIAN [TIPI]</option><option value="2DE8">2DE8 - SPBU NONGSA/F [SNON]</option><option value="2DE9">2DE9 - SP HANG LEKIR 1 [SPHL]</option><option value="2DF1">2DF1 - MEDITERANIA 2 [MED2]</option><option value="2DF2">2DF2 - BENGKONG HARAPAN/F [BEHA]</option><option value="2DF3">2DF3 - TIBAN FORTUNE [TIFO]</option><option value="2DF4">2DF4 - CIPTA MANDIRI [CTMR]</option><option value="2DF5">2DF5 - KOMPLEK MANGSANG [KOMA]</option><option value="2DF6">2DF6 - TANJUNG SENGKUANG [TGSE]</option><option value="2DF7">2DF7 - BUKIT CITRA LESTARI [BUCL]</option><option value="2DF8">2DF8 - PELABUHAN SEKUPANG [PSFT]</option>                                </select>
                            </div>
                            <div>
                                <input type="radio" name="choice_tgl" value="1" /> PER TANGGAL
                            </div>
                            <div>
                                <input type="radio" name="choice_tgl" checked="checked" value="2" /> PER RANGE TANGGAL
                            </div>
                            <div class="form-group ">
                                <label class="control-label requiredField" for="tgl">
                                    TANGGAL
                                    <span class="asteriskField">
        *
       </span>
                                </label>
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class=" glyphicon glyphicon-calendar">
                                        </i>
                                    </div>
                                    <input class="form-control" id="tgl" name="tgl" placeholder="" type="text" readonly required/>
                                </div>
                            </div>
                            <div id="div_tgl2" class="desc form-group" style="display:none;">
                                <label class="control-label requiredField" for="tgl2">
                                    S/D TANGGAL
                                    <span class="asteriskField">
        *
       </span>
                                </label>
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class=" glyphicon glyphicon-calendar">
                                        </i>
                                    </div>
                                    <input class="form-control" id="tgl2" name="tgl2" placeholder="" type="text" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div>
                                    <button class="btn btn-primary " name="kirim" value="request" type="submit" onclick="return confirm('Apakah anda yakin untuk mengirimnya?">
                                        Submit
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel-footer"><b>NB : </b>Jika masalah masih berlanjut bisa langsung menghubungi departemen terkait.</div>
</div>

</html>

This is the form:

This form

and result parameter https://10.234.94.107/cth/sales.php?act=all&choice_tgl=1&tgl=10Oct2016&tgl2=06Oct2016&kirim=request

how to not send parameters tgl2=06Oct2016 ?

Upvotes: 2

Views: 133

Answers (1)

Yasser Hussain
Yasser Hussain

Reputation: 854

My solution is that instead of hiding the optional datepicker field, you remove it from the form completely. This way it will not be submitted along with the form.

If the user clicks on the radio button and wants the second field, we'll have to dynamically create an element and insert it in the form.

Here is the code for that -

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <style type='text/css'>
        @font-face {
            font-family: 'Pacifico';
            font-style: normal;
            font-weight: 400;
            src: local('Pacifico Regular'), local(Pacifico-Regular), url(font/Pacifico-Regular.woff2) format("woff2");
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000
        }
    </style>

    <!--
    <link rel="stylesheet" type="text/css" href="../css/jquery-ui.min.css" />-->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]--><!--

    <script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="../js/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="../css/datepicker/jquery-ui.css">
    <script src="../js/datepicker/jquery-1.12.4.js"></script>
    <script src="../js/datepicker/jquery-ui.js"></script>
    -->
    <script type="text/javascript">
        function readyDatePicker1() {
          $(function() {
            $("#tgl").datepicker({
                //minDate: -1, maxDate: "+1D",
                changeMonth: true,
                changeYear: true,
                todayBtn: "linked",
                language: "id",
                autoclose: true,
                todayHighlight: true,
                dateFormat: 'ddMyy'
            });
          });
        }

        function readyDatePicker2(){
          $(function() {
            $("#tgl2").datepicker({
                //minDate: -1, maxDate: "+1D",
                changeMonth: true,
                changeYear: true,
                todayBtn: "linked",
                language: "id",
                autoclose: true,
                todayHighlight: true,
                dateFormat: 'ddMyy'
            });
          });
        }

        $("document").ready(function(){
          readyDatePicker1();
        });
        
        
    </script>
    <script>
        $(document).ready(function() {

            $("div.desc").prop('disabled', false).hide("slow");

            $("input[name$='choice_tgl']").click(function() {
                var test = $(this).val();
                

                if (test === "1") {
                  if ($("form #div_tgl2").length > 0) {
                    $("form #div_tgl2").remove();
                  }
                } else if(test == "2") {
                  if ($("form #div_tgl2").length === 0) {
                    var tgl2 = $("#div_tgl2_proto").clone();
                    tgl2.insertAfter("#div_tgl1");
                    tgl2.attr("id", "div_tgl2");
                    tgl2.find("#tgl2_proto").attr("id","tgl2");                    
                    tgl2.show();
                    readyDatePicker2();
                  }
                }
                /*
                $("div.desc").hide("slow");
                $("#div_tgl" + test).prop('disabled', false).show("slow");
                */
            });
        });
    </script>
    <!-- Inline CSS based on choices in "Settings" tab -->
    <style>
        .bootstrap-iso .formden_header h2,
        .bootstrap-iso .formden_header p,
        .bootstrap-iso form {
            font-family: Arial, Helvetica, sans-serif;
            color: black
        }

        .bootstrap-iso form button,
        .bootstrap-iso form button:hover {
            color: white !important;
        }

        .asteriskField {
            color: red;
        }
    </style>
</head>

<!-- HTML Form (wrapped in a .bootstrap-iso div) -->
<div class="panel panel-primary">
    <div class="panel-heading"><b>MENU BANTU SALES</b></div>
    <div class="panel-body">
        <div class="bootstrap-iso">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <form id="form_sales" method="get" action="sales.php">
                            <div class="form-group ">
                                <label class="control-label requiredField" for="masalah">
                                    TOKO
                                    <span class="asteriskField">
        *
       </span>
                                </label>
                                <select class="select form-control" name="act" required>
                                    <option value="">- PILIH TOKO -</option>
                                    <option value="all">#### ALL TOKO ####</option>
                                    <option value="2D01">2D01 - PERUM OMA [PEOM]</option><option value="2D02">2D02 - BOTANIA BATAM [BOTA]</option><option value="2D03">2D03 - PUTRI HIJAU [PUHI]</option><option value="2D04">2D04 - TIBAN [TIBA]</option><option value="2D05">2D05 - PERMATA LAGUNA [PELA]</option><option value="2D06">2D06 - PERUM PEMDA II [PPII]</option><option value="2D07">2D07 - MERAPI SUBUR [MESU]</option><option value="2D08">2D08 - SAGUBA [SGUA]</option><option value="2D09">2D09 - TAMAN CIPTA INDAH [TCPI]</option><option value="2D10">2D10 - MITRA CENTRE [MICE]</option><option value="2D11">2D11 - TIBAN GLOBAL [TGLO]</option><option value="2D12">2D12 - SIMPANG BSI [SPBI]</option><option value="2D13">2D13 - PINKY AVIARI [PIRI]</option><option value="2D14">2D14 - PUTRA JAYA [PURJ]</option><option value="2D15">2D15 - TMN LAGUNA INDAH [TLIH]</option><option value="2D16">2D16 - LEGENDA MALAKA [LEKA]</option><option value="2D17">2D17 - LEGENDA JUNCTION [LEJU]</option><option value="2D18">2D18 - KUDA PUTIH [KUPU]</option><option value="2D19">2D19 - BENGKONG INDAH [BKIH]</option><option value="2D20">2D20 - TIBAN MC DERMOT [TMDE]</option><option value="2D21">2D21 - BUANA INDAH [BUIN]</option><option value="2D22">2D22 - KOMP. GMP [KGMP]</option><option value="2D23">2D23 - BENGKONG PALAPA [BEPA]</option><option value="2D24">2D24 - CENTRAL LEGEND POINT [CLEP]</option><option value="2D25">2D25 - GRIYA FULI [GRFU]</option><option value="2D26">2D26 - DAPUR 12 [DP121]</option><option value="2D27">2D27 - AVIARI 2 [AVI2]</option><option value="2D28">2D28 - MARCHELIA [MCHA]</option><option value="2D29">2D29 - VALLY PARK [VARK]</option><option value="2D30">2D30 - PRIMA GARDEN [PIGA]</option><option value="2D31">2D31 - SIMPANG NATO [SITO]</option><option value="2D32">2D32 - HANG TUAH [HATU]</option><option value="2D33">2D33 - PANTAI GADING [PADI]</option><option value="2D34">2D34 - TAMAN RAYA [TAMA]</option><option value="2D35">2D35 - RKT AVIARI [RKTA]</option><option value="2D36">2D36 - PUTRA JAYA BINTAN [PJAB]</option><option value="2D37">2D37 - SERAYA [SEAY]</option><option value="2D38">2D38 - KINTAMANI [KINI]</option><option value="2D39">2D39 - PHOENIX [PHOX]</option><option value="2D40">2D40 - NASA SENTOSA [NASE]</option><option value="2D41">2D41 - SAN FRANSISCO[SFCO]</option><option value="2D42">2D42 - SUNGAI PANAS [SNAS]</option><option value="2D43">2D43 - AIR MAS [AMAS]</option><option value="2D44">2D44 - TAMAN CARINA [TMCR]</option><option value="2D45">2D45 - MITRA RAYA [MIYA]</option><option value="2D46">2D46 - MARBELLA 2 [MAR2]</option><option value="2D47">2D47 - HANG LEKIR [HALE]</option><option value="2D48">2D48 - BENGKONG RATU [BGRT]</option><option value="2D49">2D49 - ROYAL SINCOM [ROSI]</option><option value="2D50">2D50 - GRAHA TIRTA INDAH [GRTI]</option><option value="2D51">2D51 - MARBELLA [MELA]</option><option value="2D52">2D52 - PURIMAS/F [PUMS]</option><option value="2D53">2D53 - JODOH SQUARE [JOSU]</option><option value="2D54">2D54 - OZON [OZON]</option><option value="2D55">2D55 - GOLDEN PRAWN [GOWN]</option><option value="2D56">2D56 - NEW HOLIDAY [NEHO]</option><option value="2D57">2D57 - BUANA IMPIAN/F [BUIM]</option><option value="2D58">2D58 - PANTAI GADING [PAIG]</option><option value="2D59">2D59 - CITRA NUSA NIAGA [CINA]</option><option value="2D60">2D60 - SURYA MANDIRI [SUMI]</option><option value="2D61">2D61 - PERMATA HIJAU [PEHI]</option><option value="2D62">2D62 - BALOI CENTRE [BACE]</option><option value="2D63">2D63 - BDR HANG NADIM [HGNM]</option><option value="2D64">2D64 - PENUIN CENTRE [PECE]</option><option value="2D65">2D65 - GENTA 1 [GENT]</option><option value="2D66">2D66 - DUTA MAS [DUMA]</option><option value="2D67">2D67 - SAWANG PERMAI[SAPE]</option><option value="2D68">2D68 - VILLA TAMAN BUNGA [VATA]</option><option value="2D69">2D69 - KARTINI [KITI]</option><option value="2D70">2D70 - BUANA VISTA [BVTA]</option><option value="2D71">2D71 - BUNGA RAYA [BAAY]</option><option value="2D72">2D72 - BOTANIA GARDEN [BOGA]</option><option value="2D73">2D73 - MELCEM [MELM]</option><option value="2D74">2D74 - GMP 2 [GMP2]</option><option value="2D75">2D75 - GOLDEN LAND [GOLA]</option><option value="2D76">2D76 - MEGA LEGENDA [MEDA]</option><option value="2D77">2D77 - TUNAS 2 [TUN2]</option><option value="2D78">2D78 - GRIYA KURNIA DJAYA [GIYA]</option><option value="2D79">2D79 - SRIJAYA ABADI [SAAB]</option><option value="2D80">2D80 - BLOK 3 [BLK3]</option><option value="2D81">2D81 - ALIBABA [ALIA]</option><option value="2D82">2D82 - MEDITERANIA [MEIA]</option><option value="2D83">2D83 - SAGULUNG PERMAI [SGPR]</option><option value="2D84">2D84 - CIPTA SARANA [CTRN]</option><option value="2D85">2D85 - SEI HARAPAN [SIHA]</option><option value="2D86">2D86 - NAGOYA NEWTOWN [NWTN]</option><option value="2D87">2D87 - CENDANA [CEND]</option><option value="2D88">2D88 - BUKIT KEMUNING [BKKM]</option><option value="2D89">2D89 - LUCKY PERMAI [LCPM]</option><option value="2D90">2D90 - HARAPAN BISNISCENTER/F [HABC]</option><option value="2D91">2D91 - GAJAH MADA/F [GAAD]</option><option value="2D92">2D92 - SEI PANAS 2 [SIPS]</option><option value="2D93">2D93 - CENTRE PARK [CNPK]</option><option value="2D94">2D94 - HAPPY GARDEN [HPGD]</option><option value="2D95">2D95 - TAMAN CIPTA ASRI [TACA]</option><option value="2D96">2D96 - PERUM TAMAN RAYA III [PETR]</option><option value="2D97">2D97 - TAMAN KOTA MAS [TAKS]</option><option value="2D98">2D98 - GRIYA PRATAMA [GITA]</option><option value="2D99">2D99 - TUNAS REGENCY [TARY]</option><option value="2DA1">2DA1 - KAVLING LAMA [KILA]</option><option value="2DA2">2DA2 - PUSKOPKAR [PUKO]</option><option value="2DA3">2DA3 - BUKIT BERUNTUNG [BIBE]</option><option value="2DA4">2DA4 - PEMDA 1 [PEM1]</option><option value="2DA5">2DA5 - TIBAN CENTRE/F [TBCE]</option><option value="2DA6">2DA6 - TIBAN III [TIAN]</option><option value="2DA7">2DA7 - TIBAN LESTARI [TALE]</option><option value="2DA8">2DA8 - BATAM PARK [BAPA]</option><option value="2DA9">2DA9 - ANGGREK SARI [ANSA]</option><option value="2DB1">2DB1 - AVIARI GRIYA PRATAMA [AGIP]</option><option value="2DB2">2DB2 - SPBU KDA [SPBD]</option><option value="2DB3">2DB3 - DERMAGA SUKAJADI [DESU]</option><option value="2DB4">2DB4 - SEI PANCUR [SIPU]</option><option value="2DB5">2DB5 - NAGOYA PARADISE/F [NAPE]</option><option value="2DB6">2DB6 - PUNGGUR [PUGR]</option><option value="2DB7">2DB7 - TIBAN KOPERASI [TIKO]</option><option value="2DB8">2DB8 - SIMPANG 4 MANGSANG [S4MA]</option><option value="2DB9">2DB9 - KAVLING PELOPOR [KIPR]</option><option value="2DC1">2DC1 - PANDAWA/F [PNAW]</option><option value="2DC2">2DC2 - PONDOK PRATIWI [POPA]</option><option value="2DC3">2DC3 - GREEN LAGUNA [GENA]</option><option value="2DC4">2DC4 - KAPITA PLAZA/F [KAZA]</option><option value="2DC5">2DC5 - PURI AGUNG [PUNG]</option><option value="2DC6">2DC6 - MANDALAY [MALY]</option><option value="2DC7">2DC7 - BIDA AYU [BIYU]</option><option value="2DC8">2DC8 - GLORY HOME [GOHO]</option><option value="2DC9">2DC9 - LAKSAMANA BINTAN [LABI]</option><option value="2DD1">2DD1 - CAHAYA GARDEN [CHGA]</option><option value="2DD2">2DD2 - BENGKONG PERMAI [BEPE]</option><option value="2DD3">2DD3 - PINTU 3 BIDA AYU [P3BA]</option><option value="2DD4">2DD4 - BENGKONG SADAI [BESI]</option><option value="2DD5">2DD5 - RAYA TIBAN/F [RYTI]</option><option value="2DD6">2DD6 - NAGOYA 1[NGY1]</option><option value="2DD7">2DD7 - MELCEM 2 [MEL2]</option><option value="2DD8">2DD8 - AKU TAHU [AKTH]</option><option value="2DD9">2DD9 - CIPTA PURI [CAPI]</option><option value="2DE1">2DE1 - NAGOYA [NAGA]</option><option value="2DE2">2DE2 - HANG KESTURI [HAKE]</option><option value="2DE3">2DE3 - ALADIN [ALAI]</option><option value="2DE4">2DE4 - PUTRI HIJAU 2 [PUH2]</option><option value="2DE5">2DE5 - KAVLING BARU [KVBA]</option><option value="2DE6">2DE6 - KAVLING MANGSANG [KVMG]</option><option value="2DE7">2DE7 - TIBAN IMPIAN [TIPI]</option><option value="2DE8">2DE8 - SPBU NONGSA/F [SNON]</option><option value="2DE9">2DE9 - SP HANG LEKIR 1 [SPHL]</option><option value="2DF1">2DF1 - MEDITERANIA 2 [MED2]</option><option value="2DF2">2DF2 - BENGKONG HARAPAN/F [BEHA]</option><option value="2DF3">2DF3 - TIBAN FORTUNE [TIFO]</option><option value="2DF4">2DF4 - CIPTA MANDIRI [CTMR]</option><option value="2DF5">2DF5 - KOMPLEK MANGSANG [KOMA]</option><option value="2DF6">2DF6 - TANJUNG SENGKUANG [TGSE]</option><option value="2DF7">2DF7 - BUKIT CITRA LESTARI [BUCL]</option><option value="2DF8">2DF8 - PELABUHAN SEKUPANG [PSFT]</option>                                </select>
                            </div>
                            <div>
                                <input type="radio" name="choice_tgl" value="1" /> PER TANGGAL
                            </div>
                            <div>
                                <input type="radio" name="choice_tgl" checked="checked" value="2" /> PER RANGE TANGGAL
                            </div>
                            <div id="div_tgl1" class="form-group ">
                                <label class="control-label requiredField" for="tgl">
                                    TANGGAL
                                    <span class="asteriskField">
        *
       </span>
                                </label>
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class=" glyphicon glyphicon-calendar">
                                        </i>
                                    </div>
                                    <input class="form-control" id="tgl" name="tgl" placeholder="" type="text" readonly required/>
                                </div>
                            </div>


                            








                            <div class="form-group">
                                <div>
                                    <button class="btn btn-primary " name="kirim" value="request" type="submit" onclick="return confirm('Apakah anda yakin untuk mengirimnya?">
                                        Submit
                                    </button>
                                </div>
                            </div>
                        </form>



                        <div id="div_tgl2_proto" class="desc form-group" style="display:none;">
                            <label class="control-label requiredField" for="tgl2">
                                S/D TANGGAL
                                <span class="asteriskField">
    *
   </span>
                            </label>
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class=" glyphicon glyphicon-calendar">
                                    </i>
                                </div>
                                <input class="form-control" id="tgl2_proto" name="tgl2" placeholder="" type="text" readonly required />
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel-footer"><b>NB : </b>Jika masalah masih berlanjut bisa langsung menghubungi departemen terkait.</div>
</div>

</html>

Upvotes: 1

Related Questions