-3
私がやってみたいのは、フォームを作成することです。彼らが見る最初の質問と唯一の質問は、彼らが州を選ぶことを可能にするドロップダウンです。彼らが選択した状態を保留にしたら、その選択に従ってチェックリストを選択します。チェックリストには約20の選択肢がありますが、今のところ6つです。チャレンジ：PHP、JQuery、Javascript、HTMLチェックボックス価格見積もり
ユーザーは、チェックリストを確認し、必要な項目を確認できます。アイテムがチェックされると、その下に別のdivが表示され、このアイテムを購入する年数と数量を入力するようユーザーに促します。私はこれまでに得たものです。
しかし、ここで私はここにいて、私がやろうとしていることがあります。私はサービス料、ライセンス料、訓練時間の隠された入力値を追加しました。ユーザーが項目をチェックすると、jQueryを使用してtotal_serviceを取得するためにサービス料金の年数を計算します。次に、total_serviceとライセンス料を加えてitem_costを取得します。次に、item_costは、total_item_costを取得する数量を掛けます。
次に、商品説明、サービス料金、年数、ライセンス料金、数量、トレーニング時間をショッピングカートのようなライン、部門または表に表示したり、表示したり、一覧表示したいと考えています。アイテムがチェックされるたびに、以下の各アイテムが表示されます。
最後に、リストの最後に、アイテムの合計費用と合計トレーニング時間が必要です。
今、私は年のドロップダウンに問題があります。それはそれ自体をリセットするようです。そして計算の問題。限りフォームまで、フォームを提出すると、人々の電子メールなどに行くだろうjqueryコードを最初に取得しようとしています。
アドバイスは素晴らしいです。コードは以下の通りです...ここで
<style>
.box {
display: none;
}
</style>
<form name="" id="myForm" method="post" class="" action="http://demo.camavision.com/VCSWeb/remarks-look-up/" >
<div class="tx-row" style="width:100%; float:left; clear:right;">
<div style="float:left; margin-top:-20px; ">
<label>
<strong style="font-size:14px;">State:</strong> <span style="font-size:10px; color:#ff0000;">(required)</span><br />
<select style= "width:90%; height:35px; font-size:18px; border: 1px #396ba5 solid;" id="state" name="state" required>
<option value="" selected="selected" >Select State</option>
<option value="IlIaNd" >Iowa</option>
<option value="IlIaNd" >Illinois</option>
<option value="Minnesota" >Minnesota</option>
<option value="Missouri" >Missouri</option>
<option value="Nebraska" >Nebraska</option>
<option value="IlIaNd" >North Dakota</option>
<option value="SouthDakota" >South Dakota</option>
</select>
</label>
</div>
</div>
<script>
$(document).ready(function(){
$("#state").change(function(){
$(this).on('change', function() {
if(this.value =="IlIaNd"){
$(".box").not(".IlIaNd").hide();
$(".IlIaNd").show();
}else if(this.value =="Minnesota"){
$(".box").not(".Minnesota").hide();
$(".Minnesota").show();
}else if(this.value =="Missouri"){
$(".box").not(".Missouri").hide();
$(".Missouri").show();
}else if(this.value =="Nebraska"){
$(".box").not(".Nebraska").hide();
$(".Nebraska").show();
}else if(this.value =="SouthDakota"){
$(".box").not(".SouthDakota").hide();
$(".SouthDakota").show();
}else{
$(".box").hide();
}
});
}).change();
});
</script>
<div style="width: 100%; float:left; clear:both; height:25px;" > </div>
<div style="border-bottom: 1px solid #cccccc; width: 100%; float:left; clear:both;" > </div>
<div style="width: 100%; float:left; clear:both; height:25px;" > </div>
<div style="width: 100%; float:left; clear:both;" class="IlIaNd box">
//<p>States test 1</p>
<?php IlIaNd_Price_Quote_Form() ?>
</div>
<div style="width: 100%; float:left; clear:both;" class="Minnesota box" >
<p>Minnesota test 2</p>
</div>
<div style="width: 100%; float:left; clear:both;" class="Missouri box">
<p>Missouri test 3</p>
</div>
<div style="width: 100%; float:left; clear:both;" class="Nebraska box" >
<p>Nebraska test 4</p>
</div>
<div style="width: 100%; float:left; clear:both;" class="SouthDakota box">
<p>SouthDakota test 5</p>
</div>
<span id="total_item_fees"> </span>
<script>
$(document).ready(function()
{
//hide all contents
$('div[id^=sb]').hide();
$('input[id^=chk]').change(function(){
// get checkbox index
var index = $(this).attr('id').replace('chk','');
//show respective contents
if($(this).is(':checked')){
$('#sb'+index).show();
item_calculation();
} else {
$('#sb'+index).hide();
}
});
function item_calculation() {
var descr = $('input[name="descr"]').val();
var fee1 = $('input[name="fee1"]').val();
var years = $('input[name="Years"]').val();
var fee2 = $('input[name="fee2"]').val();
var qty = $('input[name="Qty"]').val();
var main_fees = (fee1 * years);
var item_fees = (main_fee + license);
var total_fees = (item_fees * qty).toFixed(2);
$("#total_item_fees").html(total_fees);
}
});
</script>
</form>
は、PHPコード：
if (pg_num_rows($result) > 0){
echo "<div class=\"tx-row\" style=\width:100%; clear:both; \" >
<div style=\"width: 100%; float:left; clear:both; height:25px;\" > </div>";
while ($row = pg_fetch_object($result)){
echo "<div class=\"tx-column tx-column-size-1-3\" >
<input type='checkbox' name='descr' id='chk".$row->id."' value='".$row->id."'> ".$row->descr;
if ($row->id == "8" || $row->id == "10"){
echo "<div id='sb".$row->id."' style='width:100%;'>
<div style='width:50%; float:left;'>
Years: <select name='Years'>
<option value=\"1\">1</option>
<option value=\"2\">2</option>
<option value=\"3\">3</option>
<option value=\"4\">4</option>
<option value=\"5\">5</option>
</select>
</div>
<div style='width:50%; float:left;'>
Quantity: <select name='Qty'>
<option value=\"1\">1</option>
<option value=\"2\">2</option>
<option value=\"3\">3</option>
<option value=\"4\">4</option>
<option value=\"5\">5</option>
</select>
</div>
<input type='hidden' name='fee1' id='fee1' value='".$row->fee1."'>
<input type='hidden' name='fee2' id='fee2' value='".$row->fee2."'>
<input type='hidden' name='hrs' id='hrs' value='".$row->hours."'>
</div>";
} else {
echo "<div id='sb".$row->id."'>
Years: <select name=\"years\">
<option value=\"1\">1</option>
<option value=\"2\">2</option>
<option value=\"3\">3</option>
<option value=\"4\">4</option>
<option value=\"5\">5</option>
</select>
<input type='hidden' name='Qty' value='1'>
<input type='hidden' name='fee1' value='".$row->fee1."'>
<input type='hidden' name='fee2' value='".$row->fee2."'>
<input type='hidden' name='hrs' value='".$row->hours."'>
</div>";
}
echo "</div>";
}
echo "</div>";
}
}
コードエディタでコードを大量に用意してください。 – Sreekanth
ごめんなさい...まだまだ新しいです。上のより良い理解のためにいくつかの編集を行いました。 – ShadyNicNack