Dynamic TextFields in JSP with data from MYSQL database upon item selection

Question

I am trying to create a form where user gets a list of products from database and upon selecting the product, retrieve the prices associated to that product and assign the value from database to the second textfield, similarly other textfields as well. Also upon changing the selection the values should get updated. Need suggestions if this is possible and how? Examples would be great. Thanks

He is what I am trying to do

  <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>

score 1 · Answer 1 · edited May 23 '17 at 12:06

1

You can do that using ajax.

Find the below links to get the data from database using Jsp and servlets and ajax.

Give it a try ;)

edited May 23 '17 at 12:06

Community

1
1

answered Aug 18 '15 at 04:53

Srinu Chinka

1,471
13
19

sanjay · Answer 2 · 2015-08-18T13:30:45.970

    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.

I understand the start, but can you please explain the success and error part as I am not familiar with AJAX/JSON, what would these lines of code do and how would I get the values from database into texfields based on changing select box with this code??? Thanks — Danish Ali, Aug 18 '15 at 18:49

Dynamic TextFields in JSP with data from MYSQL database upon item selection

2 Answers2