すべての選択ボックスが満たされていないと警告が表示されます

私は5つの選択ボックスをチェックする必要があります。それらのすべてが選択されてから、作成ボタンをクリックします。それらの5つが満たされていない場合、クリックイベントは機能しません。すべての選択ボックスが満たされていないと警告が表示されます

JAVASCRIPT

$(document).on("click", "#createButton", function() { 

    if ($('option:selected', '#getSource').attr("typesource") == 1){ 
     console.log('test google'); 

     var checkDomain = $('#changeDomain').val() != ""; 
     var checkSource = $('#getSource').val() != ""; 
     var checkCountries = $('#getCountries').val() != ""; 
     var checkBundle = $('#getBundle').val() != ""; 
     var checkPool = $('#getPool').val() != ""; 

     if (checkDomain && checkSource && checkCountries && checkBundle && checkPool) { 
      alert('button works'); 

      checkDomain = $('#changeDomain').val(); 
      checkSource = $('#getSource').val(); 
      checkCountries = $('#getCountries').val(); 
      checkBundle = $('#getBundle').val(); 
      checkPool = $('#getPool').val(); 

      console.log(checkDomain, checkSource, checkCountries, checkBundle, checkPool); 
     } 
    } 
});

警告を実行、最後の2つのチェックボックス（checkBundle、checkPool）はまだ空の場合とcheckDomain、ソースと国が選択されたオプションを持っている場合。

HTML

<!--DOMAIN--> 
        <div class="col-md-2"> 
         <div class="bulkFiltersDiv"> 
          <p class="bulkFilters">DOMAIN</p> 
         </div> 
         <select id="changeDomain" class="form-control chosen-select" name="geoFilter[]"> 
          <option value="">Select Domain</option> 
          <?php echo $selectboxDomains;?> 
         </select> 
        </div><!--end col-md-2--> 
        <!--SOURCE--> 
        <div class="col-md-2"> 
         <div class="bulkFiltersDiv"> 
          <p class="bulkFilters">SOURCE</p> 
         </div> 
         <select id="getSource" class="form-control chosen-select" name="geoFilter[]"> 
         </select> 
        </div><!--end col-md-2--> 
        <!--COUNTRY--> 
        <div class="col-md-2"> 
         <div class="bulkFiltersDiv"> 
          <p class="bulkFilters">COUNTRY</p> 
         </div> 
         <select id="getCountries" class="form-control chosen-select" name="geoFilter[]"> 
         </select> 
        </div><!--end col-md-2--> 
        <!--BUNDLE--> 
        <div class="col-md-2"> 
         <div class="bulkFiltersDiv"> 
          <p class="bulkFilters">BUNDLE</p> 
         </div> 
         <select id="getBundle" class="form-control chosen-select" id="source" name="geoFilter[]"> 
         </select> 
        </div><!--end col-md-2--> 
        <!--POOL--> 
        <div class="col-md-2"> 
         <div class="bulkFiltersDiv"> 
          <p class="bulkFilters">POOL</p> 
         </div> 
         <select id="getPool" class="form-control chosen-select" id="source" name="geoFilter[]"> 
         </select> 
        </div><!--end col-md-2-->

君たちも私のコードを改善するための任意のヒントを持っている場合は、私はそれを感謝します！ありがとう！

出典

2017-06-23 Timmy

株式HTMLも – Matt

大丈夫、今あなたがHTML – Timmy

を持っているあなたのコードの作業はうまく：https://jsfiddle.net/jnwrc5ay/383/ –

$('#createButton').on("click", function() { 

if ($('option:selected', '#getSource').attr("typesource") == 1){ 
    console.log('test google'); 

    var checkDomain; 
    var checkSource; 
    var checkCountries; 
    var checkBundle; 
    var checkPool; 
    var err=0; 
    $('.chosen-select').each(function(){ 
     if($(this).val()==""){ 
      err++; 
     } 
    }); 
    if(err===0){ 
     alert('button works'); 
     checkDomain = $('#changeDomain').val(); 
     checkSource = $('#getSource').val(); 
     checkCountries = $('#getCountries').val(); 
     checkBundle = $('#getBundle').val(); 
     checkPool = $('#getPool').val(); 

     console.log(checkDomain, checkSource, checkCountries, checkBundle, checkPool); 
    } 
    else{ 

    } 
} 
}

1.Checkそれが値を持たない場合、すべてのチェックボックスはjQueryの.each（）関数 2.Increment errを用いて選択されている場合。 err==0 3.Ifはは、それはそう、このサンプルの方法を試してみてください

出典

2017-06-23 11:58:24 vijay

あなたの答えを説明してもらえますか？なぜこの解決策ですか？ – Timmy

あなたの選択した要素を繰り返し処理します。選択されていないものがあれば、それは 'err'をインクリメントします..あなたが望むものは何ですか@Timmy – vijay

まあ、 'Uncaught TypeError：ヌルのプロパティ 'trim'を読み取ることができません – Timmy

を進める

、値は、最後のフィールドを選択するために、時には""ではありません。

<html> 
<head> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <script type='text/javascript'> 
     $(document).ready(function() { 
      $("#btnCheck").click(function() { 
       if ($('#changeDomain').val() == "" || $('#changeDomain1').val() == "") { 
        alert("Try again"); 
       } 
       else { 
        alert("Button works"); 
       } 
      }) 
     }); 
    </script> 
    <title></title> 
</head> 

<body> 
    <select id="changeDomain"> 
     <option value="">Select Domain</option> 
     <option value="1">1</option> 
    </select> 
    <select id="changeDomain1"> 
     <option value="">Select Domain1</option> 
     <option value="1">1</option> 
    </select> 
    <button id="btnCheck">CHECK</button> 
</body> 
</html>

出典

2017-06-23 12:04:20 Matt

Clickイベントo n私のHTMLがありません。私はあなたが見ることができるように今更新する:) – Timmy

申し訳ありません、私はJSコードを意味します。今更新されました。私はあなたが正しくチェックするための私のクリックイベントを表示することを忘れていました:)あなたは確認できますか？ – Timmy

Working fiddle。

正しいクリックイベントを設定した場合、コードは正常に機能しますので、下の例を確認してください。

これが役に立ちます。

$(document).on("click", "#createButton", function() { 
 

 
    if ($('option:selected', '#getSource').attr("typesource") == 1){ 
 
     console.log('test google'); 
 

 
     var checkDomain = $('#changeDomain').val() != ""; 
 
     var checkSource = $('#getSource').val() != ""; 
 
     var checkCountries = $('#getCountries').val() != ""; 
 
     var checkBundle = $('#getBundle').val() != ""; 
 
     var checkPool = $('#getPool').val() != ""; 
 

 
     if (checkDomain && checkSource && checkCountries && checkBundle && checkPool) { 
 
      alert('button works'); 
 

 
      checkDomain = $('#changeDomain').val(); 
 
      checkSource = $('#getSource').val(); 
 
      checkCountries = $('#getCountries').val(); 
 
      checkBundle = $('#getBundle').val(); 
 
      checkPool = $('#getPool').val(); 
 

 
      console.log(checkDomain, checkSource, checkCountries, checkBundle, checkPool); 
 
     } 
 
    } 
 
});

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

 

 
<div class="col-md-2"> 
 
<button class="btn btn-primary" id="createButton">Submit</button> 
 
</div><!--end col-md-2--> 
 

 
<div class="col-md-2"> 
 
    <div class="bulkFiltersDiv"> 
 
    <p class="bulkFilters">DOMAIN</p> 
 
    </div> 
 
    <select id="changeDomain" class="form-control chosen-select" name="geoFilter[]"> 
 
    <option value="">Select Domain</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    </select> 
 
</div><!--end col-md-2--> 
 
<!--SOURCE--> 
 
<div class="col-md-2"> 
 
    <div class="bulkFiltersDiv"> 
 
    <p class="bulkFilters">SOURCE</p> 
 
    </div> 
 
    <select id="getSource" class="form-control chosen-select" name="geoFilter[]"> 
 
    <option value="">Select SOURCE</option> 
 
    <option value="1" typesource='1'>1</option> 
 
    <option value="2">2</option> 
 
    </select> 
 
</div><!--end col-md-2--> 
 
<!--COUNTRY--> 
 
<div class="col-md-2"> 
 
    <div class="bulkFiltersDiv"> 
 
    <p class="bulkFilters">COUNTRY</p> 
 
    </div> 
 
    <select id="getCountries" class="form-control chosen-select" name="geoFilter[]"> 
 
    <option value="">Select COUNTRY</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    </select> 
 
</div><!--end col-md-2--> 
 
<!--BUNDLE--> 
 
<div class="col-md-2"> 
 
    <div class="bulkFiltersDiv"> 
 
    <p class="bulkFilters">BUNDLE</p> 
 
    </div> 
 
    <select id="getBundle" class="form-control chosen-select" id="source" name="geoFilter[]"> 
 
    <option value="">Select BUNDLE</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    </select> 
 
</div><!--end col-md-2--> 
 
<!--POOL--> 
 
<div class="col-md-2"> 
 
    <div class="bulkFiltersDiv"> 
 
    <p class="bulkFilters">POOL</p> 
 
    </div> 
 
    <select id="getPool" class="form-control chosen-select" id="source" name="geoFilter[]"> 
 
    <option value="">Select POOL</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    </select> 
 
</div><!--end col-md-2--> 
 
<br><br><br><br><br><br>

出典

2017-06-23 12:09:21

申し訳ありませんが、私はJSコードを意味しました。今更新されました。私はあなたが正しくチェックするための私のクリックイベントを表示することを忘れていました:)あなたは確認できますか？ – Timmy

クリックイベントコードで自分の回答を更新しました。正常に動作します。すべての選択が空になるまでアラートが実行されないことがわかりました。問題はデフォルトの値から来ていると思いますこの点）。 –

すべての選択ボックスが満たされていないと警告が表示されます

答えて

関連する問題