bugfix> javascript > 投稿

ログインフォームを作成しました。これには、顧客名、ユーザー名、パスワードが含まれます。顧客名は、さまざまな顧客のリストです。データベースからリストを更新する必要があります。誰でもこの問題を解決するのを助けることができます。ありがとう。 ログインページの私のHTMLコードは、

<div id="divcust" class="form-group">
            <select class="form-control" id="customerlist" placeholder="Customer Name" autofocus required>
                <option value="">Select Customer</option>
            </select>
        </div>
  <div id="divusr" class="form-group has-feedback">
    <input type="text" id="txtUid" name="username" data-validation="alphanumeric" class="form-control" placeholder="UserName" tabindex="1"/>
    <span class="glyphicon glyphicon-user form-control-feedback"></span> </div>
  <div id="divpwd" class="form-group has-feedback">
    <input type="password" id="txtPwd" name="password" data-validation="length" data-validation-length="min5" class="form-control" placeholder="Password" tabindex="2"/>
    <span class="glyphicon glyphicon-lock form-control-feedback"></span> </div>
                <div id="divtc"class="form-group has-feedback" >
                    <input type="checkbox" id="cbtnc" name="check" data-validation="required" data-validation-error-msg="You have to agree to our Terms and Conditions to access" class="minimal" tabindex="3"/>
                    &nbsp;&nbsp;&nbsp; I accept the <a href="#" data-toggle="modal" data-target="#terms-conditions-modal-info">Terms and Conditions</a> of access.
                    <span class="glyphicon form-control-feedback"></span>
                </div>
  <div class="row">
    <div class="col-xs-offset-8 col-xs-4">
                        <button type="button" id="btnLogin" class="btn btn-primary btn-block btn-flat" onclick="verifyLogin();" tabindex="4">Sign In</button>
    </div>

回答 1 件
  • 私は jQuery を使用しました   $.ajax() を使用するには  方法。

    私のJSFiddle:https://jsfiddle.net/m6vrfmw1/2/

    To use jQuery  プロジェクトに <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> を追加します   あなたの <head> に  鬼ごっこ。


    $.ajax() の中  メソッド、 $.each() を使用しました   JSON を反復処理するメソッド  データを <select> に追加します  鬼ごっこ。

    $.ajax({
        url: "https://www.json-generator.com/api/json/get/clwcxTNthK?indent=2", // URL to fetch data from DB
      success: function(data) {
        $.each(data, function(index, item){
          $("#customerlist").append('<option value="[Add Custom Value Here]">' + item.name + '</option>');
        });
      }
    });
    
    

あなたの答え