Wie kann ich den neuen Wert eines Eingangs mit jquery

Question

So habe ich diese beiden Eingabefelder in HTML geschrieben:

<div class="row">  
    <div class="col-md-12 form-group"> 
     <label>Name</label> 
     <input type="text" name="doc name" class="form-control " id="doc-name"> 
    </div> 
</div> 
<div class="row">  
    <div class="col-md-12 form-group"> 
     <label>Number</label> 
     <input type="text" name="doc number" class="form-control " id="doc-number"> 
    </div> 
</div> 

und ich habe einige jQuery-Code, der mir einen Fehler zurückgibt, wenn eine der Eingabefelder bleiben leer:

if($('#doc-name').val() == '' || $('#doc-number').val =='') { 
    return false //this is completed with the actual error script but isn't important to the current issue 
} 

das Problem, das ich habe tatsächlich ist, dass selbst, nachdem ich die Eingabefelder vervollständigen, noch die .val() Funktion einen leeren String zurück, kehrt es nicht das, was ich geschrieben habe tatsächlich in diesen Eingaben. .html() oder .text() geben auch etwas leeres zurück. Kannst du mir bitte in die richtige Richtung zeigen?

Answer 1

Nicht sicher, ob dies ist, was Sie meinen. Aber ich habe hier ein Beispiel erstellt, wo jedes Klickereignis den Wert der Eingabefelder erhält.

<input type="text" id="name"/> 
<input type="text" id="number"/> 
<button id="getvalue">Get value</button> 

Hier ist die js

$(document).ready(function(){ 

$('#getvalue').click(function() { 

    var nameVal = $('#name').val(); 
    var numVal = $('#number').val(); 

    if(nameVal == '' || numVal == ''){ 
     alert('Empty fields.') 
    }else{ 
     alert('Name is ' + nameVal + ' and Number is ' + numVal); 
    } 

}); 
}); 

Sie benötigen ein Triggerereignis, um Javascript zu haben, mit Ihren HTML-Elementen zu kommunizieren. In diesem Fall verwenden wir ein Klickereignis über das Schaltflächenelement.

Hier ist ein working sample

Answer 2

Es sollte '#doc-name' und '#doc-number' sein:

if ($('#doc-name').val() == '' || $('#doc-number').val() == '') { 
 
    alert('Error'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-md-12 form-group"> 
 
    <label>Name</label> 
 
    <input type="text" name="doc name" class="form-control " id="doc-name"> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-md-12 form-group"> 
 
    <label>Number</label> 
 
    <input type="text" name="doc number" class="form-control " id="doc-number"> 
 
    </div> 
 
</div>

Answer 3

Es hängt davon ab, wo/wenn Sie dieses Stück Code nennen. Im folgenden Beispiel wird beim Drücken einer Senden-Schaltfläche ausgeführt.

https://jsfiddle.net/wy8z7b2k/

$('#submit').click(function(e) { 
 
    if ($('#doc-name').val() == '' || $('#doc-number').val() == '') { 
 
    console.log('returning false'); 
 
    return false //this is completed with the actual error script but isn't important to the current issue 
 
    } 
 
});

<div class="row"> 
 
    <div class="col-md-12 form-group"> 
 
    <label>Name</label> 
 
    <input type="text" name="doc name" class="form-control " id="doc-name"> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-md-12 form-group"> 
 
    <label>Number</label> 
 
    <input type="text" name="doc number" class="form-control " id="doc-number"> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-md-12 form-group"> 
 
    <button id="submit">Submit</button> 
 

 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 4

Wenn Sie von einem Event-Handler false zurück es die Standard-Aktion für dieses Ereignis verhindert und stoppt das Ereignis durch das DOM sprudeln. Das heißt, es ist das Äquivalent, dies zu tun:

if($('#doc-name').val() == '' || $('doc-number').val == '') { 
 
alert('ok'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row">  
 
    <div class="col-md-12 form-group"> 
 
     <label>Name</label> 
 
     <input type="text" name="doc name" class="form-control " id="doc-name"> 
 
    </div> 
 
</div> 
 
<div class="row">  
 
    <div class="col-md-12 form-group"> 
 
     <label>Number</label> 
 
     <input type="text" name="doc number" class="form-control " id="doc-number"> 
 
    </div> 
 
</div>