显示和隐藏带条件的必需表格

时间:2019-01-30 12:38:21

标签: php html required

我有一个任务,当星级低于3时将出现一个表格,必须填写(必填)。但是如果星级超过3,则无需显示该表格,也无需填写。

当星号小于3时,表单将被隐藏并显示

<div id="masukan">
     <label>Masukan Untuk Kami </label>
     <textarea name="masukan" id="masukan" class="form-control" placeholder="Kritik Dan Saran Membangun Anda" required=""></textarea></div>

因为逻辑是当评分低于3时,用户必须填写表格(显示),如果评分高于3,则用户不必填写表格(隐藏)。问题是保存到用户给出3星评级的数据库时。

我现在拥有的代码如下:

<div id="add_data_Modal" class="modal fade">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <h4 class="modal-title">Berikan Pendapatmu Tentang Bagaimana Kami !!</h4>

   </div>
   <div class="modal-body">
    <form method="post" id="insert_form">
     <label>Tanggal Lahir</label>
     <input type="date" name="tgl_lahir" id="tgl_lahir" class="form-control" value="Tanggal Lahir Anda !"  required="" />
     <br />
     <label>Pekerjaan</label>
     <input type="text" name="pekerjaan" id="pekerjaan" class="form-control" placeholder="Tuliskan Pekerjaan Utama Anda!"  required="" />
     <br />  
     <label>Rating Kepuasan</label><br/>
                      <fieldset id='demo3' class="rating">
                        <input class="stars" type="radio" id="star53" name="rating" value="5" />
                        <label class = "full" for="star53" title="5 Bintang"></label>
                        <input class="stars" type="radio" id="star4half3" name="rating" value="4.5" />
                        <label class="half" for="star4half3" title="4,5 Bintang"></label>
                        <input class="stars" type="radio" id="star43" name="rating" value="4" />
                        <label class = "full" for="star43" title="4 Bintang"></label>
                        <input class="stars" type="radio" id="star3half3" name="rating" value="3.5" />
                        <label class="half" for="star3half3" title="3,5 Bintang"></label>
                        <input class="stars" type="radio" id="star33" name="rating" value="3" />
                        <label class = "full" for="star33" title="3 Bintang"></label>
                        <input class="stars" type="radio" id="star2half3" name="rating" value="2.5" />
                        <label class="half" for="star2half3" title="2,5 Bintang"></label>
                        <input class="stars" type="radio" id="star23" name="rating" value="2" />
                        <label class = "full" for="star23" title="2 Bintang"></label>
                        <input class="stars" type="radio" id="star1half3" name="rating" value="1.5" />
                        <label class="half" for="star1half3" title="1,5 Bintang"></label>
                        <input class="stars" type="radio" id="star13" name="rating" value="1" />
                        <label class = "full" for="star13" title="1 Bintang"></label>
                        <input class="stars" type="radio" id="starhalf3" name="rating" value="0.5" />
                        <label class="half" for="starhalf3" title="0,5 Bintang"></label>
                    </fieldset>
     <br />
     <br />
     <div id="masukan">
     <label>Masukan Untuk Kami </label>
     <textarea name="masukan" id="masukan" class="form-control" placeholder="Kritik Dan Saran Membangun Anda" required=""></textarea></div>
     <br />
     <label>Email Anda</label><br/>
     <input type="text" name="email_member" id="email_member" class="form-control" readonly value="<?php echo $email_member;?>" />
     <br />
     <br/>


     <input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />

    </form>
   </div>
  </div>
 </div>
</div>

<script> 

$(document).ready(function(){


 $('#insert_form').on("submit", function(event){  
  event.preventDefault();  
  if($('#tgl_lahir').val() == "")  
  {  
   alert("Tanggal Lahir harus di isi");  
  }  
  else if($('#pekerjaan').val() == '')  
  {  
   alert("Pekerjaan harus di isi");  
  }  

  else  
  {  
   $.ajax({  
    url:"insert.php",  
    method:"POST",  
    data:$('#insert_form').serialize(),  
    beforeSend:function(){  
     $('#insert').val("Inserting");  
    },  
    success:function(data){  
     $('#insert_form')[0].reset();  
     $('#add_data_Modal').modal('hide');  
     $('#employee_table').html(data);  
    }  
   });  
  }  
 });
});  

$('input[type=radio][name=rating]').change(function() {
 if ($(this ).val() <=3) {
  $ ('#masukan').show();
 }
 else {
  $('#masukan').hide();
 }
});
 </script>

和此proses.php

<?php

include"page/koneksi.php";

try{

$tgl_lahir = $_POST["tgl_lahir"];
$pekerjaan = $_POST["pekerjaan"];
$rating    = $_POST["rating"];
$masukan   = $_POST["masukan"];
$email_member = $_POST["email_member"];

if (isset($tgl_lahir) AND isset($pekerjaan) AND isset($rating) AND isset($masukan) AND isset($email_member)) {
    $query = $db_con->prepare("insert into tb_voting (tgl_lahir,pekerjaan,kepuasan,masukan,email_member) 
        values ('$tgl_lahir','$pekerjaan','$rating','$masukan','$email_member')"); }

    $query->execute($_POST);
    echo "Data telah disimpan";
}catch(PDOException $e){
    echo "Error! gagal menyimpan:".$e->getMessage();  
}
?>

0 个答案:

没有答案