从组和单选按钮获取值,并在更改或取消选择时删除。

时间:2017-12-04 13:44:24

标签: javascript php html wordpress

我想实现目标,仅使用javascript在单个输入中添加多个输入值总数但是我尝试了多远我可以使它工作但是在更改单选按钮而不是它删除以前的值并从总输入字段添加新的类似休息输入获取值并没有做同样的事情,它正在向前一个输入添加另一个值。     

get_template_part('content-parts/page', 'banner'); 

?>
<style type="text/css">
 .btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
  }
       .btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    padding: 13px 13px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 25px;
  }
  .border {
          border-bottom-color: azure;
          border-style: groove;

    }

 </style>
 <div id="container_full">

 <h1 class="heading_order_now">Please complete the order form</h1>
  <div class="container">

        <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <P><h4 style="color:red">IMPORTANT ORDERING INFORMATION:</h4>
 After submitting your order, an account manager will call you between the 
 hours of 9 am to 7 pm Mondays to Saturday to get payment information(Visa, 
 MasterCard, Amex or Discover). The order comes with a 10 Day Trial Refund 
 Window. If you are not satisfy with the performance, just return the 
 package to us within the 10 Day Trial period for a full refund. <br> <br>

  Thanks!<br>

   </P>
        </div>
  </div>




        <div class="row">

        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style=" margin-top:30px; background-color:#f3f3f3">


 <!-- content -->

 <form  method="post" enctype="multipart/form-data" 
  action="https://www.evdodepotusa.com/orderformprocess.php" id="affreg">
 <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 div-padding">
 <div class="form-group">
 <label class="form-check-label"> First Name:</label>
    <input type="text" class="form-control" name="fname" id="fname" aria-
  describedby="nameHelp" placeholder="Enter First Name" required="required">
 </div>
</div>

  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 div-padding">
  <div class="form-group">
  <label class="form-check-label"> Last Name:</label>
    <input type="text" class="form-control" name="lname" id="lname" aria-
  describedby="nameHelp" placeholder="Enter Last Name" required="required">
   </div>
    </div>

 <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 div-padding">
 <div class="form-group">
 <label class="form-check-label"> Address:</label>
    <input type="text" class="form-control" name="address" id="address" aria-describedby="addressHelp" placeholder="Enter Address" >
 </div>
 </div>
 <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 div-padding">
 <div class="form-group">
 <label class="form-check-label"> City:</label>
    <input type="text" class="form-control" name="city" id="city" aria-describedby="cityHelp" placeholder="Enter City" required="required" >
 </div>
 </div>

<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 div-padding">
<div class="form-group">
<label class="form-check-label"> State:</label>
    <input type="text" class="form-control" name="state" id="state" aria-describedby="StateHelp" placeholder="Enter State" required="required" >
 </div>
 </div>

 <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 div-padding">
 <div class="form-group">
 <label class="form-check-label"> Zip Code:</label>
    <input type="text" class="form-control" name="zipcode" id="zipcode" aria-describedby="ZipCodeHelp" placeholder="Enter Zip Code" required="required" >
 </div>
 </div>

 <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 div-padding">
 <div class="form-group">
 <label class="form-check-label"> Phone Number:</label>
    <input type="number" class="form-control" name="phone" id="phone" aria-describedby="phoneHelp" placeholder="Enter Phone" required="required">
 </div>
 </div>


<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 div-padding">
<div class="form-group">
<label class="form-check-label"> Email Address:</label>
    <input type="email" class="form-control" name="email" id="email" aria-describedby="emailHelp" placeholder="Enter email" required="required">
  </div>
</div>



<h1 style="font-size: 25px; color: #1294c7;">Select Wireless Router and Subscription Package(Network 1 Works w/Routers Only):</h1>


 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style=" margin-top:10px; background-color:#f3f3f3">
 <!-----------        PACKAGE 1 START ---------------------------------------------------->
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<h3 class="heading_3g4gplans" style="font-size:24px;text-align:center; padding-top:15px;">3G Unlimited Plan</h3>
<h4 style="text-align: center; width:100%;">$<span id="3g">119.00</span> 
<br><span style="font-size:12px">Monthly</span></h4>
<p>
Upload: 1.5 Mbps<br>
Download: 4.5 Mbps<br>

</p>

<label class="btn btn-info    btn-circle btn-lg">
<input id="first" checked="checked" name="package" type="radio" value="3G 
Unlimited Plan (network_price=$119, download_speed=4.5 Mbps, 
upload_speed=1.5 Mbps)" onclick="getElementById('dekhao').value =+ 119;
findTotal();
" /> <i class="glyphicon glyphicon"></i></label>


</div>
<!-----------  PACKAGE 1 END   &      PACKAGE 2 START ----------------------
------------------------------>

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<h3 class="heading_3g4gplans" style="font-size:24px;text-align:center; 
padding-top:15px;">4G LTE 75 Gig Plan</h3>
<h4 style="text-align: center; width:100%;">$<span id="4g">119.00</span> 
<br><span style="font-size:12px">Monthly</span></h4>
<p>
Upload: 4.5 Mbps <br>
Download: 16.5 Mbps<br>


<label class="btn btn-info    btn-circle btn-lg">
<input id="141" checked="checked" name="package" type="radio" value="4G LTE 
75 Gig Plan (network_price=$119,download_speed=16.5 Mbps,upload_speed=4.5 
Mbps)" onclick="getElementById('dekhao').value =+ 120;
findTotal();
" /> <i class="glyphicon glyphicon"></i></label>



</div>
<!-----------  PACKAGE 2 END   &      PACKAGE 3 START ----------------------
------------------------------>
 <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-
align:center;">
<h3 class="heading_3g4gplans" style="font-size:24px;text-align:center; 
padding-top:15px;">Truly Unlimited 4G LTE Plan</h3>
<h4 style="text-align: center; width:100%;">$<span id="lte">139.00</span> 
<br><span style="font-size:12px">Monthly</span></h4>
<p>
Upload: 4.5 Mbps <br>
Download: 16.5 Mbps<br>



<label class="btn btn-info    btn-circle btn-lg">
<input id="142" checked="checked" name="package" type="radio" value="Truly 
Unlimited 4G LTE Plan (network_price=$139, download_speed=16.5 Mbps, 
upload_speed=4.5 Mbps)" /> <i class="glyphicon glyphicon" checked></i>
</label>

</div>
<!-----------  PACKAGE 3 END  ------------------ ---------------------------
------------------------->
<div class="clearfix"></div>

<!--------------------------------------------------------------------------
----------------------------------NEW 3 PACKAGES START----------------------
----->

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style=" margin-
top:10px; background-color:#f3f3f3">
<!-----------        PACKAGE 4 START ---------------------------------------
------------->
div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-align:center;">
<h3 class="heading_3g4gplans" style="font-size:24px;text-align:center; 
padding-top:15px;">4G Lte 30 Gig+ Plan</h3>
<h4 style="text-align: center; width:100%;">$59.00 <br><span style="font-
size:12px">Monthly</span></h4>
<p>
Upload: 4.5 Mbps <br>
Download: 16.5 Mbps<br>
Only on Wireless Network 1<br>


<label class="btn btn-info    btn-circle btn-lg">
<input id="140"  name="package" type="radio" value="4G Lte 30 Gig+ Plan 
(network_price=$59,download_speed=16.5 Mbps,upload_speed=4.5 Mbps)" /> <i 
class="glyphicon glyphicon"></i></label>


</div>

<!-----------  PACKAGE 4 END   &      PACKAGE 5 START ----------------------
------------------------------>

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-
align:center;">
<h3 class="heading_3g4gplans" style="font-size:24px;text-align:center; 
padding-top:15px;">4G Lte  40 Gig+ Plan</h3>
<h4 style="text-align: center; width:100%;">$69.00 <br><span style="font-
size:12px">Monthly</span></h4>
<p>
Upload: 4.5 Mbps <br>
Download: 16.5 Mbps<br>
Only on Wireless Network 1<br>


<label class="btn btn-info    btn-circle btn-lg">
<input id="140"  name="package" type="radio" value="4G Lte  40 Gig+ Plan 
(network_price=$69,download_speed=16.5 Mbps,upload_speed=4.5 Mbps)" /> <i 
class="glyphicon glyphicon"></i></label>


</div>
<!-----------  PACKAGE 5 END   &      PACKAGE 6 START ----------------------
------------------------------>
 <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-
align:center;">
<h3 class="heading_3g4gplans" style="font-size:24px;text-align:center; 
padding-top:15px;">4G Lte 50 Gig+ Plan</h3>
<h4 style="text-align: center; width:100%;">$79.00 <br><span style="font-
size:12px">Monthly</span></h4>
<p>
Upload: 4.5 Mbps <br>
Download: 16.5 Mbps<br>
Only on Wireless Network 1<br>



<label class="btn btn-info    btn-circle btn-lg">
<input id="140"  name="package" type="radio" value="4G Lte 50 Gig+ Plan 
(network_price=$79,download_speed=16.5 Mbps,upload_speed=4.5 Mbps)" /> <i 
class="glyphicon glyphicon"></i></label>

</div>

 </div>
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 border" style=" 
margin-top:30px; background-color:#f3f3f3; padding: 5px;" >
 <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-
align:center;">
 <div >
<input  type="checkbox" name="router" value="139"><span class="font" 
style="font-size: 16px !important;">Router Activation: $199</span>
</div>
 </div>
 <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-
align:center;">
<div>
<input  type="checkbox" name="hotspot" value="139"><span class="font" 
style="font-size: 16px !important;">Or Hotspot Activation: $139</span>
</div>
 </div>
 <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="text-
align:center;">
 <div>
<input  type="checkbox" name="staticIp" value="15.00"><span class="font" 
style="font-size: 16px !important;">Static IP(Optional): $15.00 
Monthly</span>
</div>
 </div>
 </div>
 <div class="clearfix"></div><br><br>
<!-----------  PACKAGE 6 END  2 new products ------------------ ------------
---------------------------------------->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style=" margin-
top:10px; background-color:#f3f3f3">
<h2 style="font-size: 25px; color: #1294c7;"> Wireless Booster Antennas 
Increases Signal and Speeds::</h2>


<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-
align:center;">
<h3 class="heading_3g4gplans" style="font-size:24px;text-align:center; 
padding-top:15px;">MIMO Booster Antenna</h3>
<h4 style="text-align: center; width:100%;">$179.00</h4>
<center><img src="https://www.evdodepotusa.com/wp-
content/uploads/2017/07/p2-300x300.png" alt="" width="150" height="150" />
</center>
<center><p>MiMo & Diversity 2G/3G/4G/LTE Wideband Wall Mount/Desk Mount 
Hybrid 698-960/1710-2700 Mhz Antenna</p></center>

<label class="btn btn-info    btn-circle btn-lg"><input id="140"  
name="boosterantena" type="radio" value="MIMO Booster Antenna 
(network_price=$179)" onclick="getElementById('dekhao2').value =+ 200;
findTotal();" /> <i class="glyphicon glyphicon"></i></label></div>


<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" style="text-
align:center;">
  <h3 class="heading_3g4gplans" style="font-size:24px;text-align:center; 
padding-top:15px;">Super Dual Yagi Antenna</h3>
<h4 style="text-align: center; width:100%;">$199.00</h4>
<center><img src="https://www.evdodepotusa.com/wp-
content/uploads/2017/07/p4-1-173x170.jpg" alt="" width="150" height="150" />
</center>
<center><p>For fair coverage, better signal, faster speeds,to connect to a 
cellular tower located up to 15 miles away</p></center>

<label class="btn btn-info    btn-circle btn-lg"><input id="140"  
name="boosterantena" type="radio" value="Super Dual Yagi Antenna 
(network_price=$199)" /> <i class="glyphicon glyphicon"></i></label></div>



</div>
<!-----------  END of  2 new products ------------------ -------------------
--------------------------------->

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style=" margin-
top:10px; background-color:#f3f3f3">
<h2 style="font-size: 25px; color: #1294c7;">Select Shipping Method:</h2>

<input id="140" checked="checked" name="shipping" type="radio" value="USPS 
Priority ($20.00)" /> USPS Priority: $20.00</label><br>
<input id="140" checked="checked" name="shipping" type="radio" value="USPS 
Overnight($55.00)" /> USPS Overnight: $55.00</label>

<input type="number" value="0" class="qty1" name="qty" id="dekhao">
<input type="hidden" value="0" class="qty1" name="qty" id="dekhao2">
<input type="hidden" value="0" class="qty1" name="qty" id="dekhao3">
<input type="number" value="0" class="total" name="qty" id="total">
</div>

<div class="clearfix"></div>
<br><br>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style=" margin-
 top:10px; background-color:#f3f3f3">
  <fieldset>

  <h2 style="font-size: 25px; color: #1294c7;">Payment</h2>
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
  <div class="form-group">        <label class="col-sm-3 control-label" 
for="card-holder-name">Name on Card</label>        <div class="col-sm-9">
      <input type="text" class="form-control" name="card-holder-name" 
id="card-holder-name" placeholder="Card Holder's Name">
    </div>
  </div>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
  <div class="form-group">
    <label class="col-sm-3 control-label" for="card-number">Card 
Number</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" name="card-number" id="card-
number" placeholder="Debit/Credit Card Number">
     </div>
  </div>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
  <div class="form-group">
    <label class="col-sm-3 control-label" for="expiry-month">Expiration 
Date</label>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-xs-6">
          <select class="form-control col-sm-2" name="expiry-month" 
id="expiry-month">
            <option>Month</option>
            <option value="01">Jan (01)</option>
            <option value="02">Feb (02)</option>
            <option value="03">Mar (03)</option>
            <option value="04">Apr (04)</option>
            <option value="05">May (05)</option>
            <option value="06">June (06)</option>
            <option value="07">July (07)</option>
            <option value="08">Aug (08)</option>
            <option value="09">Sep (09)</option>
            <option value="10">Oct (10)</option>
            <option value="11">Nov (11)</option>
            <option value="12">Dec (12)</option>
          </select>
        </div>
        <div class="col-xs-6">
          <select class="form-control" name="expiry-year">
            <option value="17">2017</option>
            <option value="18">2018</option>
            <option value="19">2019</option>
            <option value="20">2020</option>
            <option value="21">2021</option>
            <option value="22">2022</option>
            <option value="23">2023</option>
            <option value="24">2024</option>
            <option value="25">2025</option>
            <option value="26">2026</option>
            <option value="27">2027</option>
          </select>
        </div>
      </div>
    </div>
  </div>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
  <div class="form-group">
    <label class="col-sm-3 control-label" for="cvv">Card CVV</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" name="cvv" id="cvv" 
placeholder="Security Code">
    </div>
  </div>
  </div>
    </fieldset>

 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
 <p>&nbsp;</p>
 </div>


 <br><br>
 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

  <button type="submit" class="btn btn-primary btn-lg btn-
block">Submit</button>
<p>&nbsp;&nbsp;</p>

 </form>
 </div>
 </div>
 </div>

这里写的是我的javascript页面。并且在radiobutton onclick事件上调用函数。     

  function findTotal(){
   var arr = document.getElementsByName('qty');
    var tot=0;
    for(var i=0;i<arr.length;i++){
       if(parseInt(arr[i].value))
        tot += parseInt(arr[i].value);
    }
   document.getElementById('total').value = tot;
}
    </script>

    <!-- End / content -->
 <?php get_footer(); ?>

0 个答案:

没有答案
相关问题