Javascript从HTML表单调用变量

时间:2013-11-24 00:56:58

标签: javascript html forms

当我手动输入数字时,我有javascript部分工作(切断它的底部以减少代码长度)但是,我正在努力将我的javascript与我的html放在一起。我试着窃取一些代码来使它工作,最终我想只有一个按钮,上面写着“获取定价”,将4个变量数量,颜色,logoSheet和margin传递给相应的javascript变量。

        <form>
    <br>
            <label id="_quantity" >Quantity</label>
            <input type="number" id="quantity" maxlength="254" data-hint="" name="quantity" required/>
    <br>
            <label id="_colors" ># of Colors</label>
            <input type="number" id="colors" maxlength="254" data-hint="" name="colors" required/>
    <br>            
            <label id="_logoSheet" ># Logo's per Sheet</label>
            <input type="number" id="logoSheet" maxlength="254" data-hint="" name="logoSheet" required/>
    <br>            
            <label id="_margin" >Margin %</label>
            <input type="number" id="margin" maxlength="254" data-hint="" name="margin" required/>

<br>
            <input type="submit" class="fb-button-special" id="fb-submit-button" value="submit" />

        </form>


<button onclick="myFunction()">Get Pricing</button>
<p>Total Shirt Only:</p> <p id="totalShirtOnly"></p>
<p>Total Sheet Cost:</p> <p id="totalSheetCost"></p>
<p>Price Per Sheet:</p> <p id="costOfSheets"></p>
<p>Total Price:</p> <p id="totalPrice"></p>
<p>Net Profit:</p> <p id="netProfit"></p>

</center>


<script>
function myFunction()
{


var quantity = document.getElementById('quantity.value');
var colors = document.getElementById('colors.value');
var logoSheet = document.getElementById('logoSheet.value');
var margin = document.getElementById('margin.value');


var shirtCost = 2.43;
var sheetShipping = 15.0;

var marginPercent = margin/100;

var totalCost = 0.0;
var costOfSheets = 0.0;


</script>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

我不知道你指的是哪些JavaScript变量,以及你是否使用jQuery但是这里是如何获取HTML元素的值:

// With jQuery
var colors = $("#colors").val();

// w/o jQuery
var margin = document.getElementById("margin").value

这是你在找什么?