Как я могу получить значения из базы данных в строки Dynami c, изменив значение в раскрывающемся списке с помощью метода onchange - PullRequest
Новая
       32

Как я могу получить значения из базы данных в строки Dynami c, изменив значение в раскрывающемся списке с помощью метода onchange

0 голосов
/ 07 апреля 2020

Я не получаю значения во второй строке, если добавить вторую строку, и я выбираю значение из раскрывающегося списка и будет изменяться в первой строке, а не во второй строке

оценка. jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<!DOCTYPE html>
<html>
    <head>
            <link rel="stylesheet" type="text/css" href="est.css">
            <link href='https://fonts.googleapis.com/css?family=Allerta Stencil' rel='stylesheet'>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
            <script>
            $('form').change(function(){
                $('form').submit();
                });
             function addRow(tableID) {


            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
           // var row = table.insertRow(1);
           var row = table.insertRow(rowCount);

            var colCount = table.rows[1].cells.length;

            for(var i=0; i<colCount; i++) {
                var newcell = row.insertCell(i);

                newcell.innerHTML = table.rows[1].cells[i].innerHTML;

                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;


                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;

                }


            }

        } 
             function deleteRow(tableID) 
        {

            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;

            var td = event.target.parentNode; 

            var tr = td.parentNode;

            for(var i=0; i<rowCount-1; i++) 
            {
                var row = table.rows[i];



                    if(rowCount <=2)
                    {
                        alert("maintain atlest one product record");
                        break;
                    }
                    else{
                    tr.parentNode.removeChild(tr);
                    rowCount--;
                    i--;
                    }

            }
            parseFloat(get_textbox_value)=parseFloat(get_textbox_value)-100;

        }



        $(document).ready(function(){


        $("#dataTable").on('input', '.txtCal', function () {
       var calculated_total_sum = 0;

       $("#dataTable .txtCal").each(function () {
           var get_textbox_value = $(this).val();

           if ($.isNumeric(get_textbox_value)) {
              calculated_total_sum += parseFloat(get_textbox_value);
              }  

            });
              $("#total_sum_value").html(calculated_total_sum);
       });

});
        $(document).delegate( "#product_list", "change", function() { 


            $(document).on('change', "#product_list", function() {
            var id = $(this).val();



       alert(id);
       if(id !==null || id !=='')
       {
           $.ajax({
               url:'data.jsp',
               type:'POST',
               data:'pid='+id,
               dataType:'JSON',
               success:function(data)
               {
                   $('.price').parent().parent().find('.price').val(data);

                   $('#descp').val(data.description);
                   $('#price').val(data.price);
                   $('#qty').val(data.stock_qty);
                   $('#gst').val(data.gst);
                   $('#hsn').val(data.hsn);






               }
           });
       }


 });
         });


        </script>
    </head>
    <body>
         <form>
        <div class="flex-container">
            <div><input type="button" id="button" value="LogOut" ></div>
            <div><input type="button" id="button" value="User" ></div>
            <div><input type="button" id="button" value="Date" ></div>  
            <div><input type="button" id="button" value="Time"></div>
        </div>
        <p style="padding: 0px 60px;color:#9a32cd;font-size: 180%;" class="hed">ESTIMATES</p>
        <div class="container">
            <div id="container1">
                <br>
                <div style="color:#9a32cd; font-size: 130%;">SALES</div>
                <ul style="text-decoration: none;" >
                    <li><a href="#">Estimates</a></li>
                    <li><a href="#">Invoice</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Services</a></li>
                </ul>
                <div style="color:#9a32cd; font-size: 130%;">PURCHESES</div>
                <ul>
                    <li><a href="#">bills</a></li>
                    <li><a href="#">Vendors</a></li>
                    <li><a href="#">Expenses</a></li>
                </ul>
                <div style="color:#9a32cd; font-size: 130%;">CUSTOMER</div>
                <ul>
                    <li><a href="#">Address Book</a></li>
                    <li><a href="#">Customer Statment</a></li>
                </ul>
                <div style="color:#9a32cd; font-size: 130%;">SETTINGS</div>
                <ul>
                    <li><a href="#">GST Settings</a></li>
                    <li><a href="#">User Management</a></li>
                    <li><a href="#">Business Management</a></li>
                </ul>
                <br>
            </div>
            <div id="container2">
                <div class="container21">
                    <p style="font-size:19px; margin-top:0px;">Address:</p>
                    Name:<input type="text" class="t" size="10"><br>
                    Address:<input type="text"class="t" size="10" ><br>
                    Door No:<input type="text" class="t" size="10"><br>
                    Mail Id:<input type="text" class="t" size="10"><br>
                    Phone NO:<input type="text" class="t" size="10" >
                </div>
                <div class="container21 k">
                    <p style="font-size:19px; margin-top:0px;">Bill To:</p>
                    Name:<input type="text" class="t" size="10"><br>
                    Address:<input type="text"class="t" size="10" ><br>
                    Door No:<input type="text" class="t" size="10"><br>
                    Mail Id:<input type="text" class="t" size="10"><br>
                    Phone NO:<input type="text" class="t" size="10" >
                </div>
                <div class="container21 k1">
                    <p style="font-size:19px; margin-top:0px;">Ship To:</p>
                    Name:<input type="text" class="t" size="10"><br>
                    Address:<input type="text"class="t" size="10" ><br>
                    Door No:<input type="text" class="t" size="10"><br>
                    Mail Id:<input type="text" class="t" size="10"><br>
                    Phone NO:<input type="text" class="t" size="10" >
                </div>
                <div class="container21 m">
                    <p style="margin-top:5px;">
                        Est No :<input type="text" class="t"></p>
                </div>
                <div class="container21 m m1">
                    <label for="start"></label>
                     <p style="margin-top:5px;">
                     Est Date:    <input type="date" class="t" name="trip-start"></p>
                </div>
                <div class="container21 m m2">
                    <p style="margin-top:5px;">
                    Expiry Dt:   <input type="date" class="t" name="trip-start"></p>
                </div>
                <div class="container21 m m3">
                    <p style="margin-top:5px;">
                        PO No :<input type="text" class="t"></p>
                </div>
                <div class="container21 m14">
                <p style="color:#9a32cd; font-size: 130%; margin-top:-2px; margin-left:30px;">
                SUBJECT:<input type="text" size="80" class="t1">
                </p>
                </div>
                <div class="container21 m4">
                    <div class="container21 m5">
                        <table id="dataTable">
                        <thead>
                            <tr>
                                <th class="row1 row-sno"  ><p  >Sno</p></th>
                                <th class="row2 row-itemid"><p>ItemID</p></th>
                                <th class="row3 row-disc"  ><p>Discription</p></th>
                                <th class="row4 row-price"><p>Price</p></th>
                                <th class="row5 row-qty"><p>Qty</p></th>
                                <th class="row6 row-hsn"><p>Hsn</p></th>
                                <th class="row7 row-gst"><p>GST</p></th>
                                <th class="row8 row-total"><p>Total</p></th>

                            </tr>
                        </thead>

                           <tr>
                           <td>&nbsp;</td>
                            <td style="left:3px;">


                                <select id="product_list" class="form-control" >
                        <option value="" selected> - select product - </option>
                        <%
                            String dburl="jdbc:mysql://localhost:3306/invoice?allowPublickeyRetrieval=true&autoReconnect=true&useSSL=false"; //database url string the "java_get_json_data_db" is database name
                            String dbusername="root"; //database username   
                            String dbpassword="Venkat@619"; //database password

                            try
                            {
                                Class.forName("com.mysql.jdbc.Driver"); //load driver
                                Connection con=DriverManager.getConnection(dburl,dbusername,dbpassword); //create connection

                                PreparedStatement pstmt=null; //create statement

                                pstmt=con.prepareStatement("select * from products1"); //sql select query
                                ResultSet rs=pstmt.executeQuery(); //execute query and set in ResultSet object "rs".

                                while(rs.next())
                                {
                                %>
                                <option value="<%=rs.getString(1)%>"><%=rs.getString(1)%></option>

                                <%
                                }
                            }
                            catch(Exception e)
                            {
                                e.printStackTrace();
                            }
                        %>

                            </select></td>
                            <td><input type="text" id="descp" size="24" /></td>
                            <td><input type="text" id="price" size="8" /></td>
                            <td><input type="text" id="qty" size="8" /></td>
                            <td><input type="text" id="gst" size="8" /></td>
                            <td><input type="text" id="hsn" size="8" /></td>
                            <td><input type="text" value="100" size="14" class='txtCal'/></td>
                            <TD><i class="fa fa-trash"  onclick="deleteRow('dataTable')"></i></TD>

                            </tr>
                        </table>
                    </div>
                    <button type="button" class="b" onclick="addRow('dataTable')">ADD</button>

                    <div class="container21 m10">
                    <p style="margin-top:0px;">
                        Grand Total:<b><span id="total_sum_value"></span></b>
                </div>
                </div> 
                <input type="button" class="button1" value="CANCEL" >
                <input type="button" class="button1 s" value="SAVE" >
            </div>
        </div>
        </form>
    </body>
</html>

оценка. css

@charset "UTF-8";
.container{
    margin-left:27px;
    margin-top: 40px;
}
#container1{
    border:2px  #9a32cd solid;

    height: auto;
    width: auto;
    border-radius: 65px;
    position:absolute;
    padding: 1.5%;
    padding-left: 1%;
}
#container2{
    border:2px #9a32cd solid;
    box-shadow: 0px 0px 22px #acacac;
    border-radius:70px;
    height: 540px;
    width:1070px;
    margin-left: 320px;
    float: center;
    padding:1%;
}


.container21{
    width:250px;
    height:140px;
    border:2px solid #9a32cd; 
    border-radius:50px;
    position: absolute; 
    margin-left: 10px; 
    text-align:center;  
}
.k{
   margin-left: 270px; 
}
.k1{
   margin-left: 530px; 
}
.m{
   height:33px;
   margin-left: 790px;
   font-size:19px;   
}
.m1{
   margin-top:40px;
}
.m2{
    margin-top:80px;
}

.m3{
    margin-top:120px;
}
.m4{
    width:1040px;
    height:300px;
    text-align:left;
    margin-top:200px;
}
.m14{
    width:1040px;

    height:25px;
    text-align:left;
    margin-top:170px;
    border:none;

}
.m5{
    width:1000px;
    height:250px;
    margin-left:15px;
    margin-top:7px;
    overflow-y:auto;
    border:none;
    padding:none;
    padding:none;
}
.m10{
   height:33px;
   margin-left: 750px;
   font-size:20px; 
   margin-top:-20px;   
   text-align:none; 
   color:#9a32cd;
   border:none;   
}
.cancle{
    margin-top:540px;
    margin-left:180px;
}
#button{
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    font-size:160%;
    font-family: "Times New Roman", Times, serif;
}
.button1 {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    font-size:140%;
    margin-top:515px;
    margin-left:180px;
    color:#9a32cd;
    font-family: "Times New Roman", Times, serif;
}
.s{
    margin-left:510px;
}
.button1:hover{
    color:black; 
}
ul{
    display:block;
    text-decoration: none;
    list-style-type:none;
}
li{
    margin-left:30;
    font-size: 110%;"
    text-decoration: none;
}
#button:hover{
      color:#9a32cd; 
}
a:link { color:black; text-decoration:none}
a:visited { color:black; text-decoration:none}
a:hover { color:#9a32cd; text-decoration:none}
.flex-container {
  display: flex;
}
.flex-container > div {
  margin: 10px 80px;
}



table {
  overflow-y: scroll;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
  width: 950px;
  color:#9a32cd;
  white-space: nowrap;
   font-size:130%;
  font-family: "Times New Roman", Times, serif;
   margin-left:15px;
   margin-top:3px;

}
table tr{
counter-increment:serial-number;

}

th, td {
  text-align: center;
  padding: 6px;

}
tr{
height:40px;
}

tr:nth-child(even){background-color: #D7BDE2 }
.sno{

}
.row-sno {
   width: 50px;
}
.row-itemid {
  width: 110px;
}
.row-disc {
   width: 195px;
}
.row-price {
  width: 90px;
}
.row-qty {
    width:80px;
}
.row-hsn {
   width:80px;
}
.row-gst {
 width:95px;
}
.row-total {
 width:100px;
}
.row-delete{
  width: 5%;
}
.auto-index{
counter-reset:serial-number;
}
.auto-index td:first-child:before
{
  counter-increment: Serial-number;      
  content: " " counter(Serial-number);
}

.b{
    margin-top:260px;
    margin-left:50px;
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    font-size:120%;
    color:black;
    font-family: "Times New Roman", Times, serif;
}
.b1{
      margin-left:55px;
}
.b:hover{
    color:#9a32cd; 
}
.b1:hover{
    color:#9a32cd; 
}
.t{
        border:none;
        outline:none;
        font-size:15px;
        font-family: "Times New Roman", Times, serif;
    }
.t12{
    border:none;
        outline:none;
}
.t1{
     size:2;
     border:none;
    outline:none;
    font-size:20px;
    font-family: "Times New Roman", Times, serif;
}




.hed{

  font-family: 'Allerta Stencil';
  position: relative;

  text-transform: uppercase;

  color:#9a32cd;
  overflow: hidden;
  background: linear-gradient(90deg,#9a32cd, #fff,#9a32cd);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}


table {

    counter-reset: serial-number;
}

table tr {
    counter-increment: rowNumber;

}

table tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

data. jsp вызов из ajax

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page import="org.json.JSONObject"%>
<%@page import = "org.json.JSONArray"%>
<%@page import="java.util.*"%>

<%
    if(request.getParameter("pid")!=null) //get "pid" from index.jsp file in jQuery ajax part this line "data:"pid="+id,".
    {
        String getID=request.getParameter("pid"); //getable "pid" store in new "id" variable

        String dburl="jdbc:mysql://localhost:3306/invoice?allowPublickeyRetrieval=true&autoReconnect=true&useSSL=false"; //database url string the "java_get_json_data_db" is database name
        String dbusername="root"; //database username   
        String dbpassword="Venkat@619"; //database password

        try
        {
            Class.forName("com.mysql.jdbc.Driver"); //load driver
            Connection con=DriverManager.getConnection(dburl,dbusername,dbpassword); //create connection

            PreparedStatement pstmt=null; //create statement

            pstmt=con.prepareStatement("SELECT * FROM products1 WHERE item_id=?"); //sql select query
            pstmt.setString(1,getID); //set "getID" variable
            ResultSet rs=pstmt.executeQuery(); //execute query and set in ResultSet object "rs".

            if(!rs.next())
            {                       //check if condition no record found on database than print blank
                out.print(" ");
                System.out.println("hai"+getID);
            }
            else
            {
                JSONObject obj=new JSONObject();   //create JSONObject object and name is "obj"

                obj.put("description", rs.getString("description"));
                obj.put("price", rs.getInt("price"));   // get database record and "put" through json object "obj" and store in name,skill,age object variable name
                obj.put("stock_qty", rs.getInt("stock_qty"));
                obj.put("gst", rs.getInt("gst"));
                obj.put("hsn", rs.getInt("hsn"));
                System.out.println("hai2"+getID);
                out.print(obj); //finally print the object
            }

            con.close(); //close the connection
        }
        catch(Exception e)
        {
            e.printStackTrace();
        }
    }
%>

и результат

добавление первой строки

когда я добавляю вторую строку и выбираю значение из выпадающего списка, оно изменяется в первой строке, но не во второй строке

...