Question

我是jQuery的新手，想要练习构建工资单计算器。我希望能够从表单中获取值，但没有取得任何成功。怎么办呢？

我尝试使用var bla = $('#txt_name').val();，但我认为我没有正确使用它。

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Payroll Calculator</title>
    <meta name="viewport" contect="width=devide-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/myStyle.css">
    <script src="js/jquery.js"></script>
</head>

<body>
    <header>
        <div class="container">
            <div class="col-xs-12">               
                <h1>Payroll Calculator</h1>
            </div>    
        </div>
    </header>

    <div class="container">
        <section class="main row">
            <article class="col-xs-12 col-sm-6 col-md-6">
                <h3>Employee</h3>
                <div class="input-group">
                    <span class="input-group-addon" id="firstName">First Name</span>
                    <input type="text" class="form-control">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" id="lastName">Last Name</span>
                    <input type="text" class="form-control">
                </div>
                <br>                    
                <div class="input-group">
                    <span class="input-group-addon" id="rateType">Rate Type&nbsp</span>
                    &nbsp<input type="radio" name="optradio" id="hourly">Hourly 
                    <input type="radio" name="optradio">Salary
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon">Rate Amount</span>
                    <input type="text" class="form-control">
                    <span class="input-group-addon">.00</span>
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" id="regularHours">Regular Hours</span>
                    <input type="text" class="form-control">
                </div>
                <br> 
                <div class="input-group">
                    <span class="input-group-addon" id="overtimeHours">Overtime Hours</span>
                    <input type="text" class="form-control">
                </div>
                <br>                     
                <div class="input-group">
                    <span class="input-group-addon" id="otherHours">Other Hours</span>
                    <input type="text" class="form-control">
                </div>
                <br> 
                <div class="input-group">
                    <span class="input-group-addon" id="regularEarnings">Regular Earnings</span>
                    <input type="text" class="form-control">
                </div>
                <br> 
                <div class="input-group">
                    <span class="input-group-addon" id="overtimeEarnings">Overtime Earnings</span>
                    <input type="text" class="form-control">
                </div>
                <br>                     
                <div class="input-group">
                    <span class="input-group-addon" id="otherEarnings">Other Earnings</span>
                    <input type="text" class="form-control">
                </div>
                <br>                 


 <button type="button" class="btn btn-default"  onclick="enterHours()">Calculate</button>
 <button type="button" class="btn btn-default">Cancel</button>


            </article>

            <aside class="col-xs-12 col-sm-6 col-md-6">
                <h3 class="sidebar">Results</h3>
            </aside>
        </section>
    </div>

    <footer>
        <div class="container" >
            <h3>Andres Quintero</h3>
        </div>
    </footer>

<script src="js/app.js"></script>
</body>

Answer 1

不要忘记用于计算的输入字段的 id ，否则 $（'＃txt_name'）。val（）; 将返回 undefined ，这很可能是您遇到问题的原因。据我所见，你设置的是跨度的id，而不是输入的.id。

使用jquery从表单中获取值

1 个答案: