JavaScriptを使用して検索ボタン

私はあなたの助けが必要

を無効にする/フォーム要素をチェックするためにJavaScriptを使用して有効にします、イベント、[OnKeyUpを】入力ボックス

2イベント、[のOnChange]

典型的なユーザシナリオ

選択ボックスの全てに取り付けられた全てに取り付けられ

入力ボックスなし選択されたオプションの値のいずれかに存在するすべてのデータがある場合は、他の{検索ボタンを有効} {無効になって検索ボタンを保つ}

のオプション値が任意の選択されたオプション値がある場合その後の全てに存在ヌルとなしていないデータ

<!DOCTYPE html> 

<html> 

<head></head> 

<body> 
<form id="myform"> 
Cars 
<select id="car"> 
    <option value=""></option> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 
<br><br> 
Fruits 
<select id="fruits"> 
    <option value=""></option> 
    <option value="apple">apple</option> 
    <option value="banana">banana</option> 
    <option value="pear">pear</option> 
    <option value="strawberry">strawberry</option> 
    <option value="mango">mango</option> 
    <option value="orange">orange</option> 
</select> 
<br><br> 
Vegetable 
<input type="input" id="veggie"> 
<br><br> 
Number 
<input type="input" id="number"> 
<br><br> 
<input type="button" value="search" id="search" disabled> 
</form> 
</body> 

</html>

出典

2016-08-02 BobbyJones

var car=$('#car'); var fruits=$('#fruits'); 
 
var veggie=$('#veggie'); var number = $('#number'); 
 
$('select').change(function(){ 
 
    validate(); 
 
}); 
 
$('input').keyup(function(){ 
 
    validate(); 
 
}); 
 
function validate(){ 
 
    if(($(veggie).val()!='' || $(number).val()!='') && 
 
     $(car).val()=='' && $(fruits).val()==''){ 
 
      $('#search').prop('disabled',false); 
 
    }else if($(veggie).val()=='' && $(number).val()=='' && 
 
      ($(car).val()!='' || $(fruits).val()!='')){ 
 
      $('#search').prop('disabled',false); 
 
    }else{ 
 
    $('#search').prop('disabled',true); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<form id="myform"> 
 
Cars 
 
<select id="car"> 
 
    <option value=""></option> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
</select> 
 
<br><br> 
 
Fruits 
 
<select id="fruits"> 
 
    <option value=""></option> 
 
    <option value="apple">apple</option> 
 
    <option value="banana">banana</option> 
 
    <option value="pear">pear</option> 
 
    <option value="strawberry">strawberry</option> 
 
    <option value="mango">mango</option> 
 
    <option value="orange">orange</option> 
 
</select> 
 
<br><br> 
 
Vegetable 
 
<input type="input" id="veggie"> 
 
<br><br> 
 
Number 
 
<input type="input" id="number"> 
 
<br><br> 
 
<input type="button" value="search" id="search" disabled> 
 
</form> 
 
</body>

出典

2016-08-02 19:04:46 jonju

コードが条件に一致しない場合、ドロップダウンボックスで値が選択され、入力ボックスにテキストが入力され、その逆の場合もあります。結果はまだ無効な検索ボタンでした。 – BobbyJones

これはあなたの要件番号1ですね。任意の入力内のテキスト+オプションなしselect = enable button else disabled – jonju

ええ、それは私の答えでも仮定したものです。 – veddermatic

{無効になって検索ボタンを保つ}他{検索ボタンを有効}

select要素の1つだけがまたはの要素を持つ場合、input要素の1つに値があり、両方（またはどちらも）でない場合は、ボタンを有効にしたいようです。

これが当てはまる場合は、これが機能するはずです。また、最上位の配列にIDを追加して、必要な数の要素を追加できます。

https://jsfiddle.net/j7by6bsz/

var selectInputIds = ['fruits', 'car']; 
var textInputIds = ['veggie', 'number']; 

function setButtonState() { 
    var hasVal = function(arr) { 
    for(var i = 0; i < arr.length; i++) { 
     if(document.getElementById(arr[i]).value) { 
     return true; 
     } 
    } 
    return false; 
    }; 
    var hasSelectValue = function() { 
     return hasVal(selectInputIds); 
    } 
    var hasTextValue = function() { 
    return hasVal(textInputIds); 
    } 
    var theButton = document.getElementById('search'); 
    var s = hasSelectValue(); 
    var t = hasTextValue(); 
    theButton.disabled = ((s && t) || (!t && !s)); // you can do this bit smarter, but this is explicit 
} 

(function attachStuff (arr, evt) { 
    function listenIn(arr, evt) { 

    for(var i = 0; i < arr.length; i++) { 
    document.getElementById(arr[i]).addEventListener(evt, setButtonState); 
    } 
    } 
    listenIn(selectInputIds, 'change'); 
    listenIn(textInputIds, 'keyup'); 

}())

あなたの要件は、両方の入力タイプがが値を持っている場合、何が起こるかの周りにいくつかの明確化を使用することができます。

出典

2016-08-02 19:29:00 veddermatic

コードが条件に対応していない場合、ドロップダウンボックスで値が選択され、入力ボックスにテキストが入力されました。最終的な結果は、まだ無効な検索ボタンでした。 – BobbyJones

要件が不明です。値があり、もう一方が値を持たない場合は、ボタンを有効にすると述べています。これがこのコードの機能です。両方が価値を持っているときに何が起こるかを決して示していないので、自分と他の回答者は推測しなければなりません。したがって、私たちのコードは、あなたが最初に述べたものに作用します。 – veddermatic

JavaScriptを使用して検索ボタン

答えて

関連する問題