如何对 HTML 页面中的数据库值求和？答案

【问题标题】：How can I sum a database value in HTML page?如何对 HTML 页面中的数据库值求和？
【发布时间】：2020-12-08 07:14:59
【问题描述】：

我有一个 HTML 页面，并且我用 HTML 制作了一个单选列表，所以我想在页面末尾汇总所选单选的值。

这是我的代码：

HTML：（单选选项）


       <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>

那么计算是：

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>

我知道我在编程方面并不专业，所以如果您有更好的方法并且可以帮助我，我将不胜感激。

谢谢，

document.querySelector("body &gt; div &gt; div &gt; 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>
خصصنا هذا الموقع لإضحيتك ولتسهيل عملية حجزك. ولتوضيح فالسعر يشمل قيمة الاضحيه فقط ويضل التقطيع والتغليف حسب رغبة العميل.&nbsp;
<h2 dir="auto" style="text-align: center;">ولكثرة طلبات الاضاحي فيلزم للحجز <span style="color: #ff0000;"><strong>السداد</strong></span>.&nbsp;</h2>
ولضغط العمل للاضاحي فنوع التقطع وسلخ او شلوطة الرأس وتنظيف الكرش والاماصير تتفاوت فى السعر بين اوقات ايام العيد الثلاثة وكل وقت ثمن بسعر محدد اما باقي الايام فليس هناك اي رسوم .. ولتوضيح ففترة قبل الظهر لليوم الاول من العيد تبدأ من الصباح الى اذان الظهر. وفترة بعد الظهر لليوم الاول من العيد تبدأ من بعد اذان الظهر الى اذان المغرب .. نسعد لتلقي أي استفسار او اقتراح او ملاحظه منكم على الواتساب وتستطيع الدخول من</div>
<h2 class="a3s aXjCH " style="text-align: center;"><span style="font-size: 24px;">دون حفظ الرقم&nbsp;</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>

【问题讨论】：

请问你能用html生成代码吗？另外，为什么您的单选按钮中有value ="db code"，并且您在该单选按钮的底部打印同样的内容？用户也可以同时选择两个单选按钮或只选择一个？
我在 value 上添加了 db 代码，因为我的计算是基于值的，我找不到选择输入求和的方法。用户只能在每个选项中选择一个收音机
警告： mysql_* 扩展自 PHP 5.5.0 起已弃用，自 PHP 7.0.0 起已被删除。相反，应该使用mysqli 或PDO_MySQL 扩展名。在选择 MySQL API 时，另请参阅 MySQL API Overview 以获得更多帮助。

标签： php html jquery database

【解决方案1】：

由于您只需要选择一个单选按钮，因此单选按钮的name 应该相同。此外，无需在单选按钮内打印值，即：value="//dbcode"，因为您已经在该单选按钮之后打印它。

现在，您可以将 class="someclass" 提供给您的 div，该 div 具有来自数据库的值，以便此类名称可用于计算该特定单选按钮的值。另外，我使用 parent(".contact100-form-radio"); 而不是 parent(".contact100-form-radio");从单击的单选按钮获取最近的 div。

演示代码：

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>

【讨论】：

非常感谢您的帮助，现在我明白了，但我有一个问题。我怎样才能使两个选项的总和？
两个选项？没听懂你在说什么？你能详细说明一下吗
我的意思是，如果我想让总价格和 2 个选项（第一个选项和第二个选项）的值相加。现在只有一个选项可以将它们的值相加。所以我想对页面中所有选定的收音机进行总价格总和。 @Swati 非常感谢！
好的，所以你有更多这样的带有第一个和第二个选项的单选按钮，所以用户可以从两者中选择一个，现在你需要得到用户选择的所有单选按钮的总和，对吗？跨度>
让我们continue this discussion in chat。