Wie kann ich den Reißverschluss an die Tastenfunktion übergeben?

Question

Ich habe dies in ein Formular mit einem Absenden-Button verpackt, aber festgestellt, dass dies versucht, auf eine neue Seite zu gehen, ohne die Logik durchzuführen. Wie kann ich die Postleitzahl an das onclick button event übergeben? Wenn dies völlig falsch ist, können Sie Hinweise dazu geben, wie Sie dies richtig durchführen.

<input type="text" placeholder="Zip Code" pattern="[0-9]{5}" name="zip" required /> 

<button id="checker">Go!</button> 

<script> 
    var b = document.getElementById("checker"); 

    b.addEventListener("click", function checkZipCode(zip) { 

     var zipCodes = [26505, 26501, 26507, 26506]; 

     for (i = 0; i <= zipCodes.length - 1; i++) { 
      if (zip == zipCodes[i]) { 
      alert("YES"); 
      break; 
      } 
     } 
     } 
</script> 

Answer 1

Sie müssen den Wert Ihrer Eingabe zu erhalten und Sie können dies tun, mit document.querySelector('[name="zip"]').value

var b = document.getElementById("checker"); 
 

 
b.addEventListener("click", function checkZipCode(zip) { 
 
    var zip = document.querySelector('[name="zip"]').value; 
 
    var zipCodes = [26505, 26501, 26507, 26506]; 
 
    for (i = 0; i <= zipCodes.length - 1; i++) { 
 
    if (zip == zipCodes[i]) { 
 
     alert("YES"); 
 
     break; 
 
    } 
 
    } 
 
})

<input type="text" placeholder="Zip Code" pattern="[0-9]{5}" name="zip" required /> 
 

 

 
<button id="checker">Go!</button>

Answer 2

Verwenden Sie einfach getElementById('ELEMENT_NAME_HERE').value wie so:

Go!

<script> 
    var b = document.getElementById("checker"); 

    b.addEventListener("click", function checkZipCode(zip){ 

     console.log('Clicked'); 
     var enteredZip = document.getElementById("zip").value; 
     console.log(enteredZip); 
     var zipCodes=[26505, 26501, 26507, 26506]; 

     for(i=0; i<=zipCodes.length-1; i++){ 
      if(zip == zipCodes[i]){ 
       alert("YES"); 
       break; 
      }}}); 
</script> 

https://plnkr.co/edit/ptyUAItwyaSmZXsD81xK?p=preview

Sie geben es nicht in

Answer 3

im Grunde, wenn diese myfunction() wird eine falsche Rück dann würde das Formular nicht eingereicht werden. Auch würde dies nur zum Zeitpunkt der submittion der Form

https://www.w3schools.com/jsref/event_onsubmit.asp

<form onsubmit="myFunction()"> 
    Enter name: <input type="text"> 
    <input id='input-id' type="submit"> 
</form> 

<script> 
myfunction(){ 

if(/*some condition*/) 
{ 
return false; 
} 
    </script> 

auch einige Dinge, da Sie neu hier und die Leute scheinen zu betrachten durchgeführt werden geben Ihnen sehr korrekte, aber spezifische Lösungen.

Wenn Sie eine Schaltfläche zum internen Tag hinzufügen, wird das Formular beim Anklicken gesendet. Deshalb verwenden viele ein div, das wie ein Knopf von CSS aussieht. Hauptsächlich eine saubere Lösung zum Überschreiben der Schaltfläche submit und Sie können das Formular auch einfach per Javascript absenden.