无法保存到数据库时使用javascript .change功能
问题描述:
我有这个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>
答
你的问题是让所有的输入字段命名为相同的东西。这会混淆服务器端的php脚本,因为输入名称是区分值的方式。您可能只想为交易金额设置一个输入字段,并以其他方式指示付款。
答
当您使用样式display: none
你只隐藏输入。它仍然发送提交。贝宝是最后一个,所以最后的值是什么都不是,因为你没有在隐藏的输入中写任何东西。您必须将输入的名称更改为个人。
似乎没有一个实际的表单元素,只是一系列的输入,所以不可能说出您的提交方法可能会发生什么。我会指出,你的问题很大一部分可能源于你的所有输入元素具有相同的名称。由于name属性是表单提交在数据服务器端区分不同元素的方式,因此您之前的所有数据都被您最后定义的名为'transaction_amount'的元素覆盖了。 – Ryan
我试图将php插入该片段,但它没有工作,我也在考虑名称元素..如果我不想使用不同的名称,数组可以工作吗? –
您需要为每个输入元素使用不同的名称,否则浏览器将只覆盖所有内容。如果你不想在'transaction_amount'上有五种不同的变化形式,可以考虑使用一个输入字段,然后是一个单选按钮或者其他类型的付款类型? – Ryan