2016-12-05 136 views
0

我有這個JavaScript在這裏應該顯示/隱藏基於選擇框的選擇一個div。當我嘗試將其插入數據庫時​​,它只插入最後一個選項(paypal)。無法保存到數據庫時使用javascript .change功能

例如,如果我選擇一個現金選項,它會在數據庫中插入一個空白字段。而如果我選擇貝寶,它會插入它..其餘的選項也一樣。只有貝寶正在插入。

(我從事我的英語不好,我的意大利麪條代碼道歉)

$(document).ready(function(){ 
 
    $("#payment").change(function(){ 
 
     $(this).find("option:selected").each(function(){ 
 
      if($(this).attr("value")=="bank"){ 
 
       $(".box1").not(".bank").hide(); 
 
       $(".bank").show(); 
 
      } 
 
      else if($(this).attr("value")=="cash"){ 
 
       $(".box1").not(".cash").hide(); 
 
       $(".cash").show(); 
 
      } 
 
      else if($(this).attr("value")=="cheque"){ 
 
       $(".box1").not(".cheque").hide(); 
 
       $(".cheque").show(); 
 
      } 
 
      else if($(this).attr("value")=="invoice"){ 
 
       $(".box1").not(".invoice").hide(); 
 
       $(".invoice").show(); 
 
      } 
 
      else if($(this).attr("value")=="paypal"){ 
 
       $(".box1").not(".paypal").hide(); 
 
       $(".paypal").show(); 
 
      } 
 
      else{ 
 
       $(".box1").hide(); 
 
      } 
 
     }); 
 
    }).change(); 
 
});
<style type="text/css"> 
 
    .box{ 
 
     display: none; 
 
     } 
 
    .box1{ 
 
     display: none; 
 

 
    } 
 
    .income{ background: #fff; } 
 
    .expense{ background: #fff; } 
 
    .blue{ background: #fff; } 
 
    .cash{ background: #fff; } 
 
    .card{ background: #fff; } 
 
    .cheque{ background: #fff; } 
 
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
      <div class="input-group"> 
 
       <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> 
 
       <select id="payment" name="payment_type" class="form-control" required> 
 
       <option value="" disabled selected>Select Payment Type</option> 
 
       <option value="bank">Bank Transfer</option> 
 
       <option value="cash">Cash</option> 
 
       <option value="cheque">Cheque</option> 
 
       <option value="invoice">Invoice</option> 
 
       <option value="paypal">Paypal</option> 
 
       </select> 
 

 
      </div></div> 
 

 
      <div class="form-group bank box1"> 
 
      <div class="input-group"> 
 
       <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span> 
 
      <input type="text" name="transaction_amount" class="form-control" placeholder="Bank Account" maxlength="40" /> 
 
       </div> 
 
       
 
      </div> 
 

 
      <div class="form-group cash box1"> 
 
      <div class="input-group"> 
 
       <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span> 
 
      <input type="text" name="transaction_amount" class="form-control" placeholder="Cash Amount" maxlength="40" /> 
 
       </div> 
 
       
 
      </div> 
 

 
      <div class="form-group cheque box1"> 
 
      <div class="input-group"> 
 
       <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span> 
 
      <input type="text" name="transaction_amount" class="form-control" placeholder="Cheque Reference" maxlength="40" /> 
 
       </div> 
 
       
 
      </div> 
 

 
      <div class="form-group invoice box1"> 
 
      <div class="input-group"> 
 
       <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span> 
 
      <input type="text" name="transaction_" class="form-control" placeholder="Invoice Number" maxlength="40" /> 
 
       </div> 
 
       
 
      </div>  
 

 
      <div class="form-group paypal box1"> 
 
      <div class="input-group"> 
 
       <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span> 
 
      <input type="text" name="transaction_amount" class="form-control" placeholder="Paypal Reference" maxlength="40" /> 
 
       </div> 
 
       
 
      </div>  
 

 
     

+1

似乎沒有一個實際的表單元素,只是一系列的輸入,所以不可能說出您的提交方法可能會發生什麼。我會指出,你的問題很大一部分可能源於你的所有輸入元素具有相同的名稱。由於name屬性是表單提交在數據服務器端區分不同元素的方式,因此您之前的所有數據都被您最後定義的名爲'transaction_amount'的元素覆蓋了。 – Ryan

+0

我試圖將php插入該片段,但它沒有工作,我也在考慮名稱元素..如果我不想使用不同的名稱,數組可以工作嗎? –

+0

您需要爲每個輸入元素使用不同的名稱,否則瀏覽器將只覆蓋所有內容。如果你不想在'transaction_amount'上有五種不同的變化形式,可以考慮使用一個輸入字段,然後是一個單選按鈕或者其他類型的付款類型? – Ryan

回答

0

你的問題是讓所有的輸入字段命名爲相同的東西。這會混淆服務器端的php腳本,因爲輸入名稱是區分值的方式。您可能只想爲交易金額設置一個輸入字段,並以其他方式指示付款。

0

當您使用樣式display: none你只隱藏輸入。它仍然發送提交。貝寶是最後一個,所以最後的值是什麼都不是,因爲你沒有在隱藏的輸入中寫任何東西。您必須將輸入的名稱更改爲個人。