ドロップダウンの選択時にデータベースからテキスト領域にデータを入力

私は属性としてvendorid、vendorname、vendoraddressを持つテーブルを提供しています。 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>

からの値が取り込ま

あります私はそのdatをしたいドロップダウンからvendorを選択するaは、ベンダーアドレスのテキストエリアに自動的に取り込まれます。

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

出典

2016-12-02 Prathameshb7

コンソールにエラーがありますか？ – Santhucool

いいえ、コンソールにエラーはありません。テキストエリアにデータベースの値を入力する以外はすべて動作しています。 – Prathameshb7

サーブレット '/ vendor？vendorid = 3'のレスポンスは、ブラウザで直接呼び出すとどうなりますか？ –

サーブレットの応答は、すなわち/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');

学童

代わりのselect.find('textarea').remove();
ちょうど空のテキストエリアを削除する必要はありませんの
- （これは、コピーペーストエラーです）値textarea.val('');
は
は$('<textarea>').val(value).text(value).appendTo(select);
の
- 代わりにテキストエリアの内側にテキストエリアを追加していないテキストエリアに新しい値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"あなたはオプションタグ子供持っている、このエラー

コードは、選択のためのデザイン性であったために取得するのはなぜ

：

を
<select><option></select>

しかし、テキストエリアタグはただ内のテキストいます

<textarea>text</textarea>

出典

2016-12-02 14:05:19

ドロップダウンの選択時にデータベースからテキスト領域にデータを入力

答えて

関連する問題