Question

我正在尝试创建一个表单，用户从数据库中获取产品列表，并在选择产品时，检索与该产品关联的价格，并将数据库中的值分配给第二个文本字段，类似于其他文本字段。此外，在更改选择时，值应更新。如果有可能需要建议以及如何？例子很棒。感谢

他就是我想做的事情

  <form method="post" action=".\Sale">
        <div class= "form">
            <div class="input-group margin-bottom-sm">
                <span class="input-group-addon">
                    <i class="fa fa-bars"></i>
                </span>
                <select class="form-control" name="orproductname" id="orproname" onchange="updateFields()">
                    <option>--Select Product--</option>
                <% ProductDAO pdr = new ProductDAO(); String[] kl = pdr.getProductNames();
                for(int i=0;i<kl.length;i++) {%>
                    <option><% out.println(kl[i]); %></option>
                <% } %>
                </select>
            </div>
            <div class="input-group margin-bottom-sm">
                <span class="input-group-addon">
                    <i class="fa fa-bars"></i>
                </span>
                <input class="form-control" type="text" placeholder="Original Price" id="orproprice" name="orproductprice" required>
            </div>
            <div class="input-group margin-bottom-sm">
                <span class="input-group-addon">
                    <i class="fa fa-bars"></i>
                </span>
                <input class="form-control" type="text" placeholder="Discount" id="orprodis" name="orproductdiscount" required>
            </div>
            <div class="input-group margin-bottom-sm">
                <span class="input-group-addon">
                    <i class="fa fa-bars"></i>
                </span>
                <input class="form-control" type="text" placeholder="Sales Tax" id="orprosalestax" name="orproductsalestax" required>
            </div>
            <div class="input-group margin-bottom-sm">
                <span class="input-group-addon">
                    <i class="fa fa-bars"></i>
                </span>
                <input class="form-control" type="text" placeholder="Final Price" id="orprofinalprice" name="orproductfinalprice" required>
            </div>
            <div class="input-group margin-bottom-sm">
                <span class="input-group-addon">
                    <i class="fa fa-home" ></i>
                </span>
                <textarea class="form-control" type="textarea" placeholder="Shipping Address" name="orproductshippingaddress" required></textarea>
            </div>
            <div class="input-group margin-bottom-sm">
                <span class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                </span>
                <input class="form-control" type="text" placeholder="Order Date" id="datepicker" name="orproductorderdate" required>
            </div>
            <div class="input-group margin-bottom-sm">
                <span class="input-group-addon">
                    <i class="fa fa-user"></i>
                </span>
                <input class="form-control" type="text" placeholder="User ID" name="orproductuserid" required>
            </div>
            <div class="input-group margin-bottom-sm">
                <span class="input-group-addon">
                    <i class="fa fa-picture-o"></i>
                </span>
                <img class="img-responsive" src="img/bride-1.jpg" alt="Product" >
            </div>
            <input class="btn btn-primary send" style="width:200px; margin-right:20px" type="submit" value="Order">
            <input class="btn btn-primary send" style="width:200px" type="reset" value="Clear">
    </form>

Answer 1

您可以使用ajax执行此操作。

使用Jsp和servlets以及ajax查找以下链接以从数据库中获取数据。

试一试;）

Answer 2

    I will explain this into step by step with code.    
    step 1.    in jsp file display all product into select option tag.    and give select tag name and **id**.

    step 2.    using ajax to define where to get the required data.call servlet.    this servlet define the your query you wants using productid.    productid pass by ajax.    jQuery("#your select tag id").change(function(){
                    var productid       = jQuery(this).val();

                    jQuery.ajax({
                        async   : false,
                        url     : 'your servlet url',
                        type    : 'POST',
                        dataType: 'json',
                        data    : {'productid':productid},

                        success : function(response){

                            if (response.success == 'true' && response.html != '') {
                                $('#your price text box id').val(response.html)
                            }else{
                                jQuery("#user_role_parent").html("");

                            }
                        },
                        error   : function(){
                            alert("Some thing went wrong!!!");
                        },
                    }); 
    Step 3. response.html come from servlet

I hope you are understand this code and solve your problem.

JSP中的动态TextFields，在项目选择时使用MYSQL数据库中的数据

2 个答案: