Hatem Alshehri
Reputation: 27
How can I sum a database value in HTML page?
I have HTML page and I made a radio lists in HTML, so I want to sum the selected radio’s value in the end of the page.
So here is my code:
HTML: ( The radio options )
<div class="wrap-input100 bg1 rs1-wrap-input100">
<span class="label-input100">First option *</span>
<div class="contact100-form-radio m-t-15">
<input class="input-radio100" id="radio1" type="radio" name="type1" value="<?
$sql = mysql_query("select * from price");
while($row = mysql_fetch_object($sql)){
echo"<div style='direction: rtl;'>".$row->price."</div>";
}
?>" onClick="summerize(this)">
<label class="label-radio100" for="radio1">
<?
$sql = mysql_query("select * from price");
while($row = mysql_fetch_object($sql)){
echo"<div style='direction: rtl;'>".$row->price."</div>";
}
?>
</label>
</div>
</div>
<div class="wrap-input100 bg1 rs1-wrap-input100">
<span class="label-input100">Second option *</span>
<div class="contact100-form-radio m-t-15">
<input class="input-radio100" id="radio2" type="radio" name="type2" value="<?
$sql = mysql_query("select * from price2");
while($row = mysql_fetch_object($sql)){
echo"<div style='direction: rtl;'>".$row->price2."</div>";
}
?>" onClick="summerize(this)">
<label class="label-radio100" for="radio2">
<?
$sql = mysql_query("select * from price2");
while($row = mysql_fetch_object($sql)){
echo"<div style='direction: rtl;'>".$row->price2."</div>";
}
?>
</label>
</div>
</div>
Then the calculation is:
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var globalSum = 0;
function summerize(formfieldObj)
{
globalSum = 0;
formulaObj = $(formfieldObj).parents("form");
$(formulaObj).find("input[type='radio']:checked").each(function()
{
globalSum = parseInt($(this).val()) + globalSum;
$("#totalprice").html(globalSum);
$(formulaObj).find("input[name='total']").val(globalSum);
$('#totalprice').html(globalSum);
});
}
function testcalc(){
var val1= parseInt($("input[name='type2']:checked")[0].value);
var val2= parseInt(val1);
$('#totalprice3').text(val1);
document.getElementById("TotalPrice").value = val1*globalSum;
document.getElementById('datePicker').valueAsDate = new Date();
}
</script>
<div class="wrap-input100 bg1 rs1-wrap-input100">
Total prices: <span id="totalprice3" >0</span> $
</div>
I knowI am not professional in programming, so if you have better way and you can help me in that I’ll appreciate that.
Thank you,
document.querySelector("body > div > div > form")-webkit-tap-highlight-color: transparent;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
font-family: Poppins-Regular, sans-serif;
margin: 0px;
padding: 0px;
box-sizing: border-box;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;<form class="contact100-form validate-form" method="post" action="add.php" enctype="multipart/form-data">
<span class="contact100-form-title">
<img src="../logo.png" alt="">
<br>
<br>
تطبيق لحوم
</span>
<div class="wrap-input100 validate-input bg1" data-validate="Please Type Your Name">
<span class="label-input100"> الوصف*</span>
<div style="direction: rtl;"><div class="gs">
<div id=":5l" class="ii gt">
<div id=":5m" class="a3s aXjCH " style="text-align: center;">
<h2 dir="auto" style="text-align: center;"><strong><span style="color: #008000; font-size: 24px;">عملائنا الكرام .. السلام عليكم</span></strong></h2>
خصصنا هذا الموقع لإضحيتك ولتسهيل عملية حجزك. ولتوضيح فالسعر يشمل قيمة الاضحيه فقط ويضل التقطيع والتغليف حسب رغبة العميل.
<h2 dir="auto" style="text-align: center;">ولكثرة طلبات الاضاحي فيلزم للحجز <span style="color: #ff0000;"><strong>السداد</strong></span>. </h2>
ولضغط العمل للاضاحي فنوع التقطع وسلخ او شلوطة الرأس وتنظيف الكرش والاماصير تتفاوت فى السعر بين اوقات ايام العيد الثلاثة وكل وقت ثمن بسعر محدد اما باقي الايام فليس هناك اي رسوم .. ولتوضيح ففترة قبل الظهر لليوم الاول من العيد تبدأ من الصباح الى اذان الظهر. وفترة بعد الظهر لليوم الاول من العيد تبدأ من بعد اذان الظهر الى اذان المغرب .. نسعد لتلقي أي استفسار او اقتراح او ملاحظه منكم على الواتساب وتستطيع الدخول من</div>
<h2 class="a3s aXjCH " style="text-align: center;"><span style="font-size: 24px;">دون حفظ الرقم </span><a href="http://wa.me/966126544411"><span style="color: #0000ff;"><strong><span style="font-size: 24px;">اضغط هنا</span></strong></span></a></h2>
<h2 dir="auto" style="text-align: center;"><strong><span style="color: #008000; font-size: 24px;">وكل عام وانتم بخير.</span></strong></h2>
</div>
</div></div> </div>
<div class="wrap-input100 validate-input bg1 rs1-wrap-input100" data-validate="يجب عليك ملئ هذه الخانة">
<span class="label-input100"> اسم العميل *</span>
<input class="form-control" type="text" name="name" placeholder="اسمك الثلاثي">
</div>
<div class="wrap-input100 bg1 rs1-wrap-input100">
<span class="label-input100">رقم الجوال *</span>
<input class="form-control" type="text" name="mobile" placeholder="رقم الهاتف للتواصل معك">
</div>
<div class="wrap-input100 validate-input bg1" data-validate="Please Type Your Name">
<span class="label-input100">العنوان و الحي *</span>
<input class="form-control" type="text" name="city" placeholder="فضلا قم بكتابة اسم الحي و عنوان منزلك">
</div>
<div class="wrap-input100 validate-input bg1 rs1-wrap-input100" data-validate="يجب عليك ملئ هذه الخانة">
<span class="label-input100"> سعر و حجم و نوع الاضاحي *</span>
<div class="contact100-form-radio m-t-15">
<input class="input-radio100" id="radio7" type="radio" name="type3" value="1400 | اختيار العميل : حري وسط " onclick="summerize(this)">
<label class="label-radio100" for="radio7">
حري وسط ( ١٤٠٠ ريال )
</label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio8" type="radio" name="type3" value="1550 | اختيار العميل : حري كبير" onclick="summerize(this)">
<label class="label-radio100" for="radio8">
حري كبير ( ١٥٥٠ )
</label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio9" type="radio" name="type3" value="1700 | اختيار العميل : حري كبير جدا" onclick="summerize(this)">
<label class="label-radio100" for="radio9">
حري كبير جدا ( ١٧٠٠ ريال )
</label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio10" type="radio" name="type3" value="1150 | اختيار العميل : سواكني وسط" onclick="summerize(this)">
<label class="label-radio100" for="radio10">
سواكني وسط ( ١١٥٠ ريال )
</label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio11" type="radio" name="type3" value="1450 | اختيار العميل : سواكني كبير" onclick="summerize(this)">
<label class="label-radio100" for="radio11">
سواكني كبير ( ١٤٥٠ ريال )
</label>
</div>
</div>
<div class="wrap-input100 validate-input bg1 rs1-wrap-input100" data-validate="يجب عليك ملئ هذه الخانة">
<span class="label-input100"> موعد استلام الاضحية *</span>
<div class="contact100-form-radio m-t-15">
<input class="input-radio100" id="radio1" type="radio" name="type" value="150 | اختيار العميل : اول العيد - قبل الظهر" onclick="summerize(this)">
<label class="label-radio100" for="radio1">
اول العيد - قبل الظهر ( ١٥٠ ريال )
</label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio2" type="radio" name="type" value="100 | اختيار العميل : اول العيد - بعد الظهر" onclick="summerize(this)">
<label class="label-radio100" for="radio2">
اول العيد - بعد الظهر ( ١٠٠ ريال ) </label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio3" type="radio" name="type" value="50 | اختيار العميل : ثاني العيد" onclick="summerize(this)">
<label class="label-radio100" for="radio3">
ثاني العيد ( ٥٠ ريال )
</label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio3-3" type="radio" name="type" value="0 | اختيار العميل : ثالث العيد" onclick="summerize(this)">
<label class="label-radio100" for="radio3-3">
ثالث العيد ( ٠ ريال )
</label>
</div>
</div>
<div class="wrap-input100 bg1 rs1-wrap-input100">
<span class="label-input100">تقطيع الاضحية *</span>
<div class="contact100-form-radio m-t-15">
<input class="input-radio100" id="radio12" type="radio" name="type4" value="0 | اختيار العميل : بدون ذبح" onclick="summerize(this)">
<label class="label-radio100" for="radio12">
بدون ذبح ( ٠ ريال )
</label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio13" type="radio" name="type4" value="0 | اختيار العميل : مفطح" onclick="summerize(this)">
<label class="label-radio100" for="radio13">
مفطح ( ٠ ريال )
</label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio14" type="radio" name="type4" value="0 | اختيار العميل : ارباع" onclick="summerize(this)">
<label class="label-radio100" for="radio14">
ارباع ( ٠ ريال )
</label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio15" type="radio" name="type4" value="50 | اختيار العميل : ثلاجة" onclick="summerize(this)">
<label class="label-radio100" for="radio15">
ثلاجة ( ٥٠ ريال )
</label>
</div>
</div>
<div class="wrap-input100 validate-input bg1 rs1-wrap-input100" data-validate="يجب عليك ملئ هذه الخانة">
<span class="label-input100"> الرأس *</span>
<div class="contact100-form-radio m-t-15">
<input class="input-radio100" id="radio16" type="radio" name="type5" value="0 | اختيار العميل : لا احتاجة" onclick="summerize(this)">
<label class="label-radio100" for="radio16">
لا احتاجة ( ٠ ريال )
</label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio17" type="radio" name="type5" value="15 | اختيار العميل : سلخ" onclick="summerize(this)">
<label class="label-radio100" for="radio17">
سلخ ( ١٥ ريال )
</label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio18" type="radio" name="type5" value="30 | اختيار العميل : شلوطة" onclick="summerize(this)">
<label class="label-radio100" for="radio18">
شلوطة ( ٣٠ ريال )
</label>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap-input100 bg1 rs1-wrap-input100">
<span class="label-input100">التغليف *</span>
<div class="contact100-form-radio m-t-15">
<input class="input-radio100" id="radio19" type="radio" name="type6" value="كيس بلاستك" onclick="summerize(this)">
<label class="label-radio100" for="radio19">
<!--added class="values"-->
كيس بلاستك :<div class="values" style="direction: rtl;"><div style="direction: rtl;">10</div></div>
</label>
</div>
<div class="contact100-form-radio m-t-15">
<input class="input-radio100" id="radio20" type="radio" name="type6" value="5" onclick="summerize(this)">
<label class="label-radio100" for="radio20">
<!--added class="values"-->
كرتون :<div class="values" style="direction: rtl;"><div style="direction: rtl;">5</div></div>
</label>
</div>
</div>
<div class="wrap-input100 bg1 rs1-wrap-input100">
<span class="label-input100">الكرشة و الاماصير للأضحية *</span>
<div class="contact100-form-radio m-t-15">
<input class="input-radio100" id="radio21" type="radio" name="type7" value="0 | اختيار العميل : لا احتاجها" onclick="summerize(this)">
<label class="label-radio100" for="radio21">
لا أحتاجها ( ٠ ريال )
</label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio22" type="radio" name="type7" value="20 | اختيار العميل : احتاجها مع التنظيف" onclick="summerize(this)">
<label class="label-radio100" for="radio22">
احتاجها مع التنظيف ( ٢٠ ريال )
</label>
</div>
</div>
<div class="wrap-input100 bg1 rs1-wrap-input100">
<span class="label-input100">العدد *</span>
<div class="contact100-form-radio m-t-15">
<input class="input-radio100" id="radio23" type="radio" name="type2" value="1" onclick=" testcalc(this)">
<label class="label-radio100" for="radio23">
1
</label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio24" type="radio" name="type2" value="2" onclick="testcalc(this)">
<label class="label-radio100" for="radio24">
2
</label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio25" type="radio" name="type2" value="3" onclick="testcalc(this)">
<label class="label-radio100" for="radio25">
3
</label>
</div>
<div class="contact100-form-radio">
<input class="input-radio100" id="radio26" type="radio" name="type2" value="4" onclick="testcalc(this)">
<label class="label-radio100" for="radio26">
4
</label>
</div>
</div>
<div class="wrap-input100 bg1 rs1-wrap-input100">
<span class="label-input100" style="color:red">إجمالي السعر *</span>
<br>
السعر : <span id="totalprice">0</span> ريال
<br>
ملاحظة: اذا كنت ترغب بعدد اكبر من الاضاحي يمكنك ذكرها في الملاحظات
</div>
<div class="wrap-input100 validate-input bg0 rs1-alert-validate" data-validate="Please Type Your Message">
<span class="label-input100">ملاحظات :</span>
<textarea class="input100" name="message" placeholder="اكتب اي ملاحظات تود اضافتها ..."></textarea>
</div>
<br>
<br>
<input type="hidden" name="activation" value="0">
<input class="button" type="submit" name="addname" value="ارسل الطلب">
<script type="text/javascript">
function SetDate()
{
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;
var today = year + "-" + month + "-" + day;
document.getElementById('myDate').value = today;
}
</script>
<input type="date" id="myDate" name="date">
</form>Upvotes: 0
Views: 279
Answers (1)
Swati
Reputation: 28522
As you need to choose only one radio button so name of radio buttons should be same .Also there is no need to print values inside radio button i.e :value="//dbcode" as you are already printing it after that radio button.
Now , you can just give class="someclass" to your divs which has values from database so that this class name can be use to calculate value for that particular radio button.Also instead of parents("form") i have use parent(".contact100-form-radio"); to get closest div from that radio button which is clicked.
Demo Code :
var globalSum = 0;
function summerize(formfieldObj) {
globalSum = 0;
//get closest class
formulaObj = $(formfieldObj).parent(".contact100-form-radio");
//loop through div name values
$(formulaObj).find("div.values").each(function() {
globalSum = parseInt($(this).text()) + globalSum;
$(formulaObj).find("input[name='total']").val(globalSum);
$('#totalprice').html(globalSum);//assign value to div
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap-input100 bg1 rs1-wrap-input100">
<span class="label-input100">First option *</span>
<div class="contact100-form-radio m-t-15">
<input class="input-radio100" id="radio1" type="radio" name="type1" value="5" onClick="summerize(this)">
<label class="label-radio100" for="radio1">
<!--added class="values"-->
<div class="values" style='direction: rtl;'>12</div>
<div class="values" style='direction: rtl;'>120</div>
<div class="values" style='direction: rtl;'>122</div>
</label>
</div>
</div>
<div class="wrap-input100 bg1 rs1-wrap-input100">
<span class="label-input100">Second option *</span>
<div class="contact100-form-radio m-t-15">
<!-- name should be same for both radio button-->
<input class="input-radio100" id="radio2" type="radio" name="type1" value="5" onClick="summerize(this)">
<label class="label-radio100" for="radio2">
<!--added class="values"-->
<div class="values" style='direction: rtl;'>162</div>
<div class="values" style='direction: rtl;'>120</div>
<div class="values" style='direction: rtl;'>16</div>
</label>
</div>
</div>
<div class="wrap-input100 bg1 rs1-wrap-input100">
Total prices: <span id="totalprice">0</span> $
</div>Upvotes: 1
Related Questions
- Save Jquery var sum in DB MySQL
- Display total sum of values when selecting them
- How to sum input numbers and database values in javascript
- Sum values from column in html
- Sum the fetched data
- Total sum of dynamic table
- sum of element in a table jquery
- HTML sum using JQuery
- displaying sum of a database value - PHP
- How to sum the input field values and display it into html Table using Javascript?