2016-12-02 102 views
0

我使用vendorid,vendorname,vendoraddress作为属性可以使用salesortable表。 我无法使用jquery,ajax在textarea中填充数据库中的数据。从选择下拉列表的数据库中填充文本区域

业余,请帮助。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Generate</title> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 


    <script type="text/javascript" src="js/jquery.js"></script> 

    <script type="text/javascript"> 

此工作正常时位置进行选择会场下拉是

与值自动填充从数据库

  $(document).ready(function() { 
       $('#locid').change(function(event) { 
        var locs = $("select#locid").val(); 
        $.get('venue', {locationid:locs}, function(response) { 
         var select = $('#venid'); 
         select.find('option').remove(); 
         $.each(response, function(index,value) { 

$('<option>').val(value).text(value).appendTo(select); 
         }); 
        }); 
       }); 
      }); 
    </script> 

    <script type="text/javascript"> 

      $(document).ready(function() { 
       $('#locid').change(function(event) { 
        var locs = $("select#locid").val(); 
        $.get('venue', {locationid:locs}, function(response) { 
         var select = $('#venid'); 
         select.find('option').remove(); 
         $.each(response, function(index,value) { 


    $('<option>').val(value).text(value).appendTo(select); 
          }); 
         }); 
        }); 
       }); 
     </script> 

下面的代码是不工作.on选择vendorfrom下拉我想要的dat a将自动填充到供应商地址的textarea中。

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('#vendorid').change(function(event) { 
       var adds = $("select#vendorid").val(); 
       $.get('vendor', {vendorid:adds}, function(response) { 
        var select = $('#vendoraddress'); 
        select.find('textarea').remove(); 
        $.each(response, function(index,value) { 
         $('<textarea>').val(value).text(value).appendTo(select); 
        }); 
       }); 
      }); 
     }); 
</script> 

</head> 
<body> 

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
     <div class="navbar-header" > 
      <a class="navbar-brand" href="index.html"> <img alt="Brand" src="slideshow/img.png" style="height: 40px; display: inline-block; margin-top: -5px"> </a> 
     </div> 
     <ul class="nav navbar-nav" > 
      <li class="active"><a href="index.html">Home</a></li> 
      <li><a href="about.html">Generate POR</a></li> 
      <li><a href="Update\Adminlogin.html">Update POR</a></li> 
      <li><a href="video.html">Help</a></li> 
      <li><a href="contact.html">Contact us</a></li> 

     </ul> 

     <form class="navbar-form navbar-right"> 
      <div class="form-group" id="demo"> 
       <input type="text" class="form-control" placeholder="Search"> 
      </div> 
      <button type="submit" class="btn btn-default">Submit</button> 
     </form> 

     <form class="navbar-form navbar-right"> 
      <div class="form-group" id="txt1" style="color: aliceblue; margin-top: -5px" > 

      </div> 
     </form> 

    </div> 
</nav> 

    <div class="col-md-8 col-md-offset-2"> 
     <div class="row"> 
      <form> 
       <div class="col-sm-12"> 
        <div class="row"> 
         <div class="col-sm-6 form-group"> 
          <label>P O Date</label> 
          <input type="date" class="form-control"> 
         </div> 
         <div class="col-sm-6 form-group"> 
          <label>Category</label> 
          <select class="form-control" > 
           <option>Technology</option> 
           <option>Business</option> 
           <option>Development</option> 
           <option>Process</option> 
          </select> 
         </div> 
        </div> 
       </div> 

       <div class="col-sm-12"> 
        <div class="row"> 
         <div class="col-sm-6 form-group"> 
          <label>Location</label> 
          <select class="form-control" name="locid" id="locid" > 
          <option value="-1"> select </option> 
           <option value="1">Bengaluru</option> 
           <option value="2">Mumbai</option> 
           <option value="3">Pune</option> 
          </select> 
         </div> 
         <div class="col-sm-3 form-group"> 
          <label>Type of training</label> 
          <select class="form-control" > 
           <option>RBI</option> 
           <option>PST</option> 
           <option>Org needs</option> 
          </select> 
         </div> 
         <div class="col-sm-3 form-group"> 
          <label>Venue Details</label> 
          <select class="form-control" name="venid" id="venid" > 
          <option value="-1"> select </option> 
           <option></option> 
          </select> 
         </div> 
        </div> 
       </div> 


       <div class="col-sm-12"> 
        <div class="row"> 
         <div class="col-sm-6 form-group"> 
          <label>Vendor</label> 
          <select class="form-control" name="vendorid" id="vendorid" > 
           <option value="1">Pragati</option> 
           <option value="2">Synerget</option> 
           <option value="3">blah</option> 
          </select> 
         </div> 



       <div class="col-sm-12"> 
        <div class="row"> 
         <div class="col-sm-6 form-group"> 
          <div class="form-group"> 
           <label>Vendor Address</label> 

           <textarea placeholder="Vendor Address Here.." rows="3" class="form-control" id="vendoraddress"></textarea> 
          </div> 
         </div> 

         <div class="col-sm-6 form-group"> 
          <div class="form-group"> 
           <label>Billing Address</label> 
           <br> 
            Billing Address :<br> 
            Quinnox Consultancy Services Ltd.;<br> 
            Unit 170,SDF VI, SEEPZ SEZ,<br> 
            Andheri(East), Mumbai-400096<br> 

          </div> 
         </div> 
        </div> 
       </div> 



         <div class="col-sm-12"> 
          <div class="row"> 
           <div class="table-responsive"> 
            <table class="table table-condensed table-striped table-hover" align="center"> 
             <thead class="thead-inverse"> 
              <tr> 
               <div class="form-group"> 

                <th>Subject</th> 
                <th>Faculty</th> 
                <th colspan="2" align="center">Date</th> 
                <th>Days</th> 
                <th>Batch Size</th> 
                <th>Rate per day</th> 
                <th>Approx Expected value(INR)</th> 
               </div> 
              </tr> 
             </thead> 

             <tbody> 
              <tr> 
               <div class="form-group"> 
                <td><input type="text"/></td> 
                <td><input type="text"/></td> 
                <td><input type="date"/></td> 
                <td><input type="date"/></td> 
                <td><input type="text"/></td> 
                <td><input type="text"/></td> 
                <td><input type="text"/></td> 
                <td><input type="text"/></td> 
               </div> 
              </tr> 
             </tbody> 
            </table> 
           </div> 
          </div> 
         </div> 


         <div class="col-sm-12"> 
          <div class="row"> 

          <tr>TOTAL :</tr> 

          </div> 
         </div> 


         <div class="col-sm-12"> 
          <div class="row"> 
            <h4>Terms and condition : </h4> 
            <p> 
             Payment  : As per discussion<br> 
             Taxes  : As applicable<br> 
             Delivery : As per given schedule<br> 
            </p> 

            <br> 
            <br> 

          </div> 
         </div> 

         <div class="container-fluid"> 

           <p><b>*</b>Travel ans accomodation of outside trainings will be borne by quinnox on actuals</p> 
           <p><b>*</b>Bills to be submitted for the same</p> 
           <br> 

         </div> 

         <div class="col-sm-12"> 
          <div class="row"> 

          <br>       
          For <b>Quinnox Consultancy Services Ltd.</b> 
          <br> 
          </div> 
         </div> 

         <div class="col-sm-12"> 
          <div class="row"> 
          <br> 
           Authorized Signature : 
           <br> 
           <br> 
           <br> 
           <br> 
           <br> 
          </div> 
         </div> 



      </form> 
     </div> 
    </div> 

</body> 
</html> 
+0

在控制台中是否有任何错误? – Santhucool

+0

不,控制台中没有错误。除了使用数据库中的值填充textarea之外,所有东西都可以工作。 – Prathameshb7

+0

当您在浏览器中直接调用servlet时,servlet'/ vendor?vendorid = 3'的响应是什么? –

回答

0

确保你的servlet即响应/vendor?vendorid=3是正确的JSON。

问题在你的JavaScript:

$.get('vendor', {vendorid:adds}, function(response) { 
    var select = $('#vendoraddress'); 
    select.find('textarea').remove(); 
    $.each(response, function(index,value) { 
     $('<textarea>').val(value).text(value).appendTo(select); 
    }); 
}); 
  • 使用适当的名称不是 “选择”。(这是一个复制粘贴错误)

    • ,而不是var select = $('#vendoraddress');
    • 使用var textarea = $('#vendoraddress');
  • 无需取下textarea的子女

    • ,而不是select.find('textarea').remove();
    • 只是空值textarea.val('');
  • 没有文字区域内添加文字区域
    • ,而不是$('<textarea>').val(value).text(value).appendTo(select);
    • 和新值textarea的textarea.val(textarea.val() + value + "\n");

工作代码:

$.get('vendor', {vendorid:adds}, function(response) { 
    var textarea = $('#vendoraddress'); 
    textarea.val(''); 
    $.each(response, function(index,value) { 
     textarea.val(textarea.val() + value + "\n"); 
    }); 
}); 

我有一个响应{"1": "Blah 1", "2": "Blah 2"}和内容类型进行了测试"application/json;charset=UTF-8"

为什么你得到这个错误

因为代码是designe的选择,有选择标签儿童:

<select><option></select>

但多行文本,标签刚才文本中:

<textarea>text</textarea> 
相关问题