Wie mehrere Funktionen in JS verbinden?

-1

Ich brauche die Schaltfläche Senden nur aktiv sein, wenn alle Felder und ausgefüllt/ausgewählt.Wie mehrere Funktionen in JS verbinden?

Ich sah ein paar Beispiele, aber ich weiß nicht, wie es geht !!

$(document).ready(function() 
 
{ 
 
\t $('.envia').prop('disabled',true); 
 
\t $('#matricula').on('change', function() 
 
\t { 
 
\t \t $('#envia').prop('disabled', !$(this).val()); 
 
\t \t 
 
\t }).trigger('change'); 
 
}); 
 

 
$(document).ready(function() 
 
{ 
 
\t $('.envia').prop('disabled',true); 
 
\t $('#peca').on('change', function() 
 
\t { 
 
\t \t $('#envia').prop('disabled', !$(this).val()); 
 
\t \t 
 
\t }).trigger('change'); 
 
}); 
 

 
$(document).ready(function() 
 
{ 
 
\t $('.envia').prop('disabled',true); 
 
\t $('#quilometros').keyup(function() 
 
\t { 
 
\t \t $('#envia').prop('disabled', !$(this).val()); 
 
\t }).trigger('change'); 
 
}); 
 

 
$(document).ready(function() 
 
{ 
 
\t $('.envia').prop('disabled',true); 
 
\t $('#data').keyup(function() 
 
\t { 
 
\t \t $('#envia').prop('disabled', !$(this).val()); 
 
\t }).trigger('change'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<form action="#"> 
 
<select id="matricula"> 
 
    <option></option> 
 
    <option value="1">Matricula 1</option> 
 
    <option value="2">Matricula 2</option> 
 

 
</select> 
 
<select id="peca"> 
 
    <option></option> 
 
    <option value="1">Peca 1</option> 
 
    <option value="2">Peca 2</option> 
 

 
</select> 
 
<input type="text" id="quilometros"> 
 
<input type="text" id="data"> 
 

 

 

 
<input type="submit" id = "envia" value="ok"></input> 
 
</form>

Quelle

2016-07-02 R Freitas

Erstellen Sie eine "Gültigkeits" -Funktion, die die Elemente prüft, um festzustellen, ob sich der Wert gegenüber dem Original geändert hat, und wenn alle Elemente geändert wurden, aktivieren Sie die Schaltfläche. Dann rufen Sie diese Funktion in den Event-Handlern für alle Elemente usw. auf. – adeneo

Das Problem, das Sie haben, ist man behindert setzen, basierend auf einzelnen Feldern, ohne den Zustand aller anderen zu überprüfen.

können Sie einen Ereignishandler für alle verwenden, aber Sie müssen auch alle Bedienelemente jedes Mal

$(function(){ 
    // pseudo selector `:input` will match all form controls 
    var $inputs = $('#form-id :input').on('change input',validate); 

    function validate(){ 
     var inValid = $inputs.filter(function(){ 
       return !this.value; 
      }).length; 
     $('#envia').prop('disabled', inValid); 
    } 
    // also call function on page load 
    validate(); 

});

Hier filter() Ich verwende überprüfen Elementlänge Sammlung zu prüfen, wo Wert ist nicht gesetzt

Quelle

2016-07-02 23:10:00 charlietfl

diese helfen Ihnen:

<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
    </head> 
 
    <body> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
     <script> 
 
      window.onload = fun; 
 
      function fun(){ 
 
       var matr = $("#matricula").val(); 
 
       var peca = $("#peca").val(); 
 
       var txt1 = $("#data").val(); 
 
       var txt2 = $("#quilometros").val(); 
 
       if(matr.length==0 || peca.length==0||txt1.length==0||txt2.length==0) 
 
        $("#envia").prop("disabled",true); 
 
       else 
 
        $("#envia").prop("disabled",false); 
 
        
 
      } 
 
     </script> 
 
      <form action="#"> 
 
      <select id="matricula" onchange="fun()"> 
 
       <option></option> 
 
       <option value="1">Matricula 1</option> 
 
       <option value="2">Matricula 2</option> 
 
      </select> 
 
      <select id="peca" onchange="fun()"> 
 
       <option></option> 
 
       <option value="1">Peca 1</option> 
 
       <option value="2">Peca 2</option> 
 
      </select> 
 
      <input type="text" id="quilometros" oninput="fun()"> 
 
      <input type="text" id="data" oninput="fun()"> 
 
      <input type="submit" id = "envia" value="ok"> 
 
      </form> 
 
     
 
    </body> 
 
</html>

Quelle

2016-07-02 23:12:11 Ehsan

Warum 'onload' statt Dokument bereit? Und 'oninput' für einen Knopf? – nnnnnn

Und warum ersetzen die richtigen Event-Handler, mit Inline-Event-Handler? – adeneo

@nnnnnn tankyou ich repariere es. – Ehsan

Wie mehrere Funktionen in JS verbinden?

Antwort

Verwandte Themen