发表新帖
发表新帖

Auto fill field depending on the option selected

后端 未结
关注
1 1320
别那么骄傲
别那么骄傲 2021-01-28 20:31

I want to auto fill the \"Unit Price\" input with the products \"data-price\" when a user picks a product without reloading the page, is this possible?



        

                      

              相关标签:
1条回答
  • 被撕碎了的回忆
    2021-01-28 20:46 

    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
<div class="row">
                        <div class="col-sm-3">
                            <p>Testers<br>
                            <select id="productOne" name="productOne">
                              <option data-price="0" value="0">-Select-</option>
							  <option data-price="1249.99" value="1">PRO Battery Tester</option>
                              <option data-price="444.99" value="2">MDX335P</option>
                              <option data-price="494.99" value="3">MDX645</option>
                              <option data-price="694.99" value="4">MDX645P</option>
                              <option data-price="694.99" value="5">MDX655</option>
                              <option data-price="899.99" value="6">MDX655P</option>
                              <option data-price="949.99" value="7">MDX655P Start Stop</option>
                            </select></p>
                            <p>Chargers<br>
                            <select id="productTwo" name="productTwo">
							  <option data-price="0" value="0">-Select-</option>
                              <option data-price="1249.99" value="1">PRO 60</option>
                              <option data-price="1249.99" value="2">MXTS 70/50 EU-K</option>
                              <option data-price="333.33" value="3">MXS 25EC UK</option>
                              <option data-price="199.99" value="4">MXS 10EC UK</option>
                              <option data-price="633.33" value="5">MXTS 40 UK</option>
                              <option data-price="266.66" value="6">MXS 25 UK</option>
                              <option data-price="266.66" value="7">MXT 14 UK</option>
                              <option data-price="175.83" value="8">MXT 4.0 UK</option>
                            </select></p>
                        </div>
                        <div class="col-sm-3">
                            <p>Quantity<br><input type="number" name="productOneQ" min="0" step="any"  value="<?php if(!is_null($productOneQ)) { echo $productOneQ; } ?>"></p>
                            <p>Quantity<br><input id="productTwoQ" type="number" name="productTwoQ" min="0" step="any"  value="<?php if(!is_null($productTwoQ)) { echo $productTwoQ; } ?>"></p>
                        </div>
                        <div class="col-sm-3">
                            <p>Unit Price<br><input id="productOneP" type="number" name="productOneP" min="0" step="any"  value="<?php if(!is_null($productOneP)) { echo $productOneP; } ?>"></p>
                            <p>Unit Price<br><input id="productTwoP" type="number" name="productTwoP" min="0" step="any"  value="<?php if(!is_null($productTwoP)) { echo $productTwoP; } ?>"></p>
                        </div>
                          <div class="col-sm-3">
                              <p><span id="productOneT" class="total right">TOTAL: £<?php echo number_format(@$productOneTotal = $productOneP*$productOneQ, 2, '.', ','); ?></span></p>
                              <p><span id="productTwoT" class="total right">TOTAL: £<?php echo number_format(@$productTwoTotal = $productTwoP*$productTwoQ, 2, '.', ','); ?></span></p>
                          </div>
                        </div>
                    </div>
<script>
$('#productOne').change(function(e) {
        var element = $(this).find('option:selected'); 
        var myTag = element.attr("data-price");
		$('#productOneP').val(myTag);
});
$('#productTwo').change(function(e) {
        var element = $(this).find('option:selected'); 
        var myTag = element.attr("data-price");
		$('#productTwoP').val(myTag);
});
</script>
</body>
</html>

    0 讨论(0)
 看不清?
提交回复
热议问题