Javascript Mit Formularelemente und Aktivierung/Deaktivierung der Suchtaste

ich Ihre Hilfe benötigen,Javascript Mit Formularelemente und Aktivierung/Deaktivierung der Suchtaste

mit JavaScript zu überprüfen, wie könnte ich eine Art von Datenformularvalidierung hinzufügen, die zweifach sein würde: 1.

Ereignis, [OnKeyUp], um alle Eingabeboxen angebracht

2. Ereignis, [OnChange] an alle der Auswahlboxen

Typische Anwenderszenarien

Wenn Daten vorhanden in einem der Eingabefelder ist und keine ausgewählte Option Werte dann {die Suchtaste aktivieren} else {halten die Suchtaste deaktiviert}

Wenn es irgendwelche ausgewählten Optionswerte sind, die Option Wert ist, ist nicht null und keine Daten vorhanden in allen dann {die Suchtaste aktivieren} else {die Suchtaste deaktiviert halten}

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

Quelle

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>

Quelle

2016-08-02 19:04:46 jonju

Ihr Code funktioniert nicht nach Kriterien, ein Wert wurde in der Dropdown-Box ausgewählt und ein Text wurde in ein Eingabefeld eingegeben und umgekehrt. Das Ergebnis war ein noch deaktivierter Suchknopf. – BobbyJones

Das ist Ihre Anforderung Nummer 1, nicht wahr? Text in irgendeiner Eingabe + keine Option select = enable button else disabled – jonju

Ja, das habe ich auch in meiner Antwort angenommen. – veddermatic

Ich bin nicht 100% sicher, aber es sieht so aus, als ob Sie die Schaltfläche aktivieren möchten, wenn nur eines der select Elemente einen Wert oder eines der input Elemente hat einen Wert, aber nicht, wenn beide (oder keiner) tun .

Wenn dies der Fall ist, sollte dies funktionieren, und Sie können so viele Elemente wie nötig hinzufügen, indem Sie IDs zu den Arrays oben hinzufügen.

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'); 

}())

Ihre Anforderungen könnte eine Klarstellung um verwenden, was passiert, wenn beide Eingangstypen obwohl Werte haben.

Quelle

2016-08-02 19:29:00 veddermatic

Ihr Code funktioniert nicht nach Kriterien, ein Wert wurde in der Dropdown-Box ausgewählt und Text wurde in ein Eingabefeld eingegeben. Das Endergebnis war ein noch deaktivierter Suchknopf. – BobbyJones

Ihre Anforderungen sind vage. Sie geben an, dass, wenn einer einen Wert hat und der andere nicht, die Schaltfläche aktiviert wird. Das ist es, was dieser Code tut. Sie geben niemals an, was passiert, wenn beide Werte haben, also mussten ich und der andere Antworter raten. Unser Code funktioniert also zu dem, was Sie ursprünglich angegeben haben. – veddermatic

Javascript Mit Formularelemente und Aktivierung/Deaktivierung der Suchtaste

Antwort

Verwandte Themen