因此,我的表格效果很好,但我很难尝试为它添加定价。基本上html看起来像这样:
HTML:
<div id="rightDriver">
<!-- Start Form -->
<!-- This is the club photos -->
<div class="clubPhotos">
<div class="club">
<img src="clubs/img/praxispi.png" class="clubPhoto" />
<span class="clubTitle">Praxis PI</span>
<span class="clubSub">Low Launch 9.5</span>
<input type="checkbox" id="clubCheckbox4" class="clubCheckbox" name="DriverType" value="Praxis PI Low Launch 9.5" />
</div>
<div class="club">
<img src="clubs/img/praxispi.png" class="clubPhoto" />
<span class="clubTitle">Praxis PI</span>
<span class="clubSub">Mid-Low Launch 12.5</span>
<input type="checkbox" id="clubCheckbox1" class="clubCheckbox" name="DriverType" value="Praxis PI Mid-Low Launch 12.5" />
</div>
<div class="club">
<img src="clubs/img/praxispi.png" class="clubPhoto" />
<span class="clubTitle">Praxis PI</span>
<span class="clubSub">Mid-High Launch 15.5</span>
<input type="checkbox" id="clubCheckbox2" class="clubCheckbox" name="DriverType" value="Praxis PI Mid-High Launch 15.5" />
</div>
<div class="club last">
<img src="clubs/img/praxispi.png" class="clubPhoto" />
<span class="clubTitle">Praxis PI</span>
<span class="clubSub">High Launch 18.5</span>
<input type="checkbox" id="clubSelect" class="clubCheckbox" name="DriverType" value="Praxis PI High Launch 18.5" />
</div>
<div class="clear"></div>
</div>
<!-- This is the driver order info -->
<div class="clubForm">
<span class="heading">Club Specs</span>
<select name="DriverLength" class="select">
<option value="" selected="selected">Driver Length</option>
<option value="47.5">47.5</option>
<option value="47">47</option>
<option value="46.5">46.5</option>
<option value="46">46</option>
<option value="45.5">45.5</option>
<option value="45">45</option>
<option value="44.5">44.5</option>
<option value="44">44</option>
<option value="43.5">43.5</option>
<option value="43">43</option>
<option value="42.5">42.5</option>
<option value="42">42</option>
</select>
<select name="DriverShaft" class="select">
<option value="" selected="selected">Select Shaft</option>
<option value="LE- light weight graphite weakest flex">LE- light weight graphite weakest flex</option>
<option value="LW- Light weight graphite weak flex">LW- Light weight graphite weak flex</option>
<option value="LM- Light weight graphite medium flex">LM- Light weight graphite medium flex</option>
<option value="LR- Light weight graphite regular flex">LR- Light weight graphite regular flex</option>
<option value="GR- Medium weight graphite regular flex">GR- Medium weight graphite regular flex</option>
<option value="SS- Light weight graphite stiff flex">SS- Light weight graphite stiff flex (low torque)</option>
<option value="TS- Medium weight graphite stiff flex">TS- Medium weight graphite stiff flex</option>
<option value="SX- Light weight graphite X-stiff">SX- Light weight graphite X-stiff</option>
<option value="KS- Light weight steel stiff flex">KS- Light weight steel stiff flex</option>
<option value="KR- Light weight steel regular flex">KR- Light weight steel regular flex</option>
<option value="DX- Heavy weight steel extra stiff">DX- Heavy weight steel extra stiff</option>
<option value="DS- Heavy weight steel stiff flex">DS- Heavy weight steel stiff flex</option>
</select>
<select name="DriverPured" class="select">
<option value="" selected="selected">PURE'd</option>
<option value="high">High</option>
<option value="low">Low</option>
</select>
</div>
</div>
评论看起来像这样:
echo "<h3> Driver</h3>";
echo "<hr>";
echo (!empty($_REQUEST['DriverType'])) ? "<div class='reviewItem'><span class='reviewTitle'>Driver:</span>{$_REQUEST['DriverType']}</div>" : "";
echo (!empty($_REQUEST['DriverShaft'])) ? "<div class='reviewItem'><span class='reviewTitle'>Shaft:</span>{$_REQUEST['DriverShaft']}</div>" : "";
echo (!empty($_REQUEST['DriverLength'])) ? "<div class='reviewItem'><span class='reviewTitle'>Length:</span>{$_REQUEST['DriverLength']}</div>" : "";
echo (!empty($_REQUEST['DriverPured'])) ? "<div class='reviewItem'><span class='reviewTitle'>Pured:</span>{$_REQUEST['DriverPured']}</div>" : "";
我想要发生的是将价格添加到“竖井”中,并将其标记为复选框的数量。我不知道从哪里开始。我知道我可以为轴“价值”增加价格但是如果我用一个数字代替“值”我将如何处理轴的名称我想象在PHP中创建一个数组但是任何帮助都会很棒。谢谢你。
答案 0 :(得分:0)
实现此目的的最简单方法是为轴价创建一个查找表。
<?php
$shaftPrices = array(
"LE- light weight graphite weakest flex"=>10,
"LW- Light weight graphite weak flex"=>10,
"LM- Light weight graphite medium flex"=>10,
"LR- Light weight graphite regular flex"=>10,
"GR- Medium weight graphite regular flex"=>10,
"SS- Light weight graphite stiff flex"=>10,
"TS- Medium weight graphite stiff flex"=>10,
"SX- Light weight graphite X-stiff"=>10,
"KS- Light weight steel stiff flex"=>10,
"KR- Light weight steel regular flex"=>10,
"DX- Heavy weight steel extra stiff"=>10,
"DS- Heavy weight steel stiff flex"=>10);
然后,您可以
获得所选轴的价格$shaftPrice = $shaftPrices[$_POST["DriverShaft"]];
答案 1 :(得分:0)
我无法确定您是否要在表单或服务器中执行此操作。如果在服务器上,请参阅@ Orangepill的答案。当然,您也可以两个。
要在客户端上执行此操作,我会开始考虑您的轴可能来自数据库,并且您拥有每个轴的ID。
因此,您不需要整个值,您可以使用ID:
<option value="17">LE- light weight graphite weakest flex</option>
这里,该特定轴的值应为17。
然后,如果您不使用Backbone或jQuery等库,则可以在选项中添加值并在纯Javascript中检索它。不是很干净(它实际上是Jaywalking反模式的一个实例),但它有效:
<option value="17:45.99">LE- light weight graphite weakest flex (US$ 45,99)</option>
现在在Javascript中你可以枚举各种复选框并对它们进行计数,你也可以检索当前的轴:
<select name="DriverShaft" class="select" id="DriverShaftId">
...
combo = document.getElementById('DriverShaftId');
value = combo.options[combo.selectedIndex].value;
// "value" is now "17:45.99"
vars = value.split(':');
// vars[0] is "17", vars[1] is "45.99"
cost = numOfCheckedBoxes * vars[1];
现在您可以将值放入新字段:
document.getElementById('total').innerHTML = cost;
'total'元素可能是
Your club will cost US$ <span id="total">...</span>
一个非常简单的小提琴(请注意,复选框没有绑定;您可能希望它们是,因此当复选框被切换时价格会更新)是here。
但是,我建议您查看jQuery Javascript库。
总结一下:当用户提交表单时,您会收到(在PHP端)Orangepill数组的索引或数据库表中的ID。由此,您可以再次检索所有轴信息(包括价格),验证数据并计算总数。