Bestätigen Sie, dass TextArea gefüllt und MultiSelect im Formular angeklickt hat, bevor Sie die Schaltfläche

Link zur entsprechenden Geige (aktuelles JavaScript aus diesem StackOverflow response): https://jsfiddle.net/5qomb6fe/.Bestätigen Sie, dass TextArea gefüllt und MultiSelect im Formular angeklickt hat, bevor Sie die Schaltfläche

HTML

<body> 
    <div class="container"> 
    <h5>Input Words and Make Selection</h5> 
    <br> 
    <form method='post'> 
     <div class="row"></div> 
     <textarea class="form-control" id="field" name="words" rows="12"></textarea> 
     <br> 
     <select class="form-control" id="type" multiple name="type" size="13"> 
     <option value="">Null</option> 
     <option value="One">One</option> 
     <option value="Two">Two</option> 
     <option value="Three">Three</option> 
     <option value="Four">Four</option> 
     <option value="Five">Five</option> 
     <option value="Six">Six</option> 
     </select> 
     <br> 
     <input class="btn btn-danger" name="button" type="submit" value="Submit", id="keybutton" disabled="disabled"> 
    </form> 
    </div>

Javascript

(function() { 
    $('form > textarea').keyup(function() { 
    var empty = false; 
    $('form > textarea').each(function() { 
     if ($(this).val() == '') { 
     empty = true; 
     } 
    }); 

    if (empty) { 
     $('#keybutton').attr('disabled', 'disabled'); 
    } else { 
     $('#keybutton').removeAttr('disabled'); 
    } 
    }); 
})()

Während dies effektiv die Taste ermöglicht, wenn das Formular ausgefüllt haben, ich möchte wissen, wie ich erst nach der Form der Taste aktivieren ist gefüllt und eine Auswahl innerhalb der Multiselect gemacht worden ist.

Mein Wissen über Javascript, Jquery usw. ist ziemlich begrenzt. Jede Hilfe wird geschätzt.

Quelle

2016-03-24 rigmarole

Bitte nicht markieren Sie Ihre Frage mit etwas, das nichts mit der Frage zu tun hat. Bearbeitet. Vielen Dank. – Sparky

überprüfen Sie dieses oder überprüfen Sie das Snippet. Ich habe das Snippet bereits aktualisiert, Sie können zuerst auswählen und dann button aktivieren, dies ist umgekehrt.

https://jsfiddle.net/5qomb6fe/5/

(function() { 
 
function enabledButton(){ 
 
\t \t if(empty == false && selection == false){ 
 
     $('#keybutton').removeAttr('disabled'); 
 
     }else{ 
 
     $('#keybutton').attr('disabled', 'disabled'); 
 
     } 
 
} 
 
var selection = null; 
 
var empty = null; 
 
    $('form > textarea').keyup(function() { 
 
    $('form > textarea').each(function() { 
 
     if ($(this).val()=='') { 
 
     \t empty = true; 
 
     }else{ 
 
     \t empty = false; 
 
     } 
 
    }); 
 
    enabledButton(); 
 
    }); 
 
    $('.selection').on('change',function(){ 
 
     selection = false; 
 
     enabledButton(); 
 
    }); 
 
})()

<style> 
 
     body { 
 
     padding-top: 20px; 
 
     padding-left: 20px; 
 
     padding-right: 20px; 
 
     } 
 
     th, td { 
 
     padding: 1px; 
 
     } 
 
    </style>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <div class="container"> 
 
    <h5>Input Words and Make Selection</h5> 
 
    <br> 
 
    <form method='post'> 
 
     <div class="row"></div> 
 
     <textarea class="form-control" id="field" name="words" rows="12"></textarea> 
 
     <br> 
 
     <select class="form-control selection" id="type" multiple name="type" size="13"> 
 
     <option value="">Null</option> 
 
     <option value="One">One</option> 
 
     <option value="Two">Two</option> 
 
     <option value="Three">Three</option> 
 
     <option value="Four">Four</option> 
 
     <option value="Five">Five</option> 
 
     <option value="Six">Six</option> 
 
     </select> 
 
     <br> 
 
     <input class="btn btn-danger" name="button" type="submit" value="Submit", id="keybutton" disabled="disabled"> 
 
    </form> 
 
    </div>

Quelle

2016-03-24 01:49:33 mmativ

funktioniert wie ein Charme! und wenn Sie mehrere Auswahlfelder haben, scheint dies auch zu funktionieren: https://jsfiddle.net/mx9s74Lu/1/ – rigmarole

edit: ** this ** funktioniert: https://jsfiddle.net/164nqyce/1/. oben nicht – rigmarole

Bestätigen Sie, dass TextArea gefüllt und MultiSelect im Formular angeklickt hat, bevor Sie die Schaltfläche

Antwort

Verwandte Themen