我有這個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>
似乎沒有一個實際的表單元素,只是一系列的輸入,所以不可能說出您的提交方法可能會發生什麼。我會指出,你的問題很大一部分可能源於你的所有輸入元素具有相同的名稱。由於name屬性是表單提交在數據服務器端區分不同元素的方式,因此您之前的所有數據都被您最後定義的名爲'transaction_amount'的元素覆蓋了。 – Ryan
我試圖將php插入該片段,但它沒有工作,我也在考慮名稱元素..如果我不想使用不同的名稱,數組可以工作嗎? –
您需要爲每個輸入元素使用不同的名稱,否則瀏覽器將只覆蓋所有內容。如果你不想在'transaction_amount'上有五種不同的變化形式,可以考慮使用一個輸入字段,然後是一個單選按鈕或者其他類型的付款類型? – Ryan