Bestimmte Nummer in HTML-Eingabe verhindern?

Hier ist der HTML-CodeBestimmte Nummer in HTML-Eingabe verhindern?

</div> 
    <div class="col-lg-6 col-md-6 form-group"> 
     <label for="inputBookNo">Winning Book No</label> 
     <input type="number" min="1" class="form-control" name="book_no" placeholder=" Winning Book Number" required> 
    </div> 
    <div class="col-lg-6 col-md-6 form-group"> 
     <label for="inputBookNo">Consolation Prize 1</label> 
     <input type="number" min="1" class="form-control" name="book_no_con1" placeholder="Consolation Prize 1 Book Number" required> 
    </div> 
    <div class="col-lg-6 col-md-6 form-group"> 
     <label for="inputBookNo">Consolation Prize 2</label> 
     <input type="number" min="1" class="form-control" name="book_no_con2" placeholder="Consolation Prize 2 Book Number" required> 
    </div> 
    <div class="col-lg-6 col-md-6 form-group"> 
     <label for="inputBookNo">Consolation Prize 3</label> 
     <input type="number" min="1" class="form-control" name="book_no_con3" placeholder="Consolation Prize 3 Book Number" required> 
    </div> 
    <div class="col-lg-6 col-md-6 form-group"> 
     <label for="inputBookNo">Consolation Prize 4</label> 
     <input type="number" min="1" class="form-control" name="book_no_con4" placeholder="Consolation Prize 4 Book Number" required> 
    </div> 
</div>

Gibt es trotzdem, I-Eingang für ein Element sagen Trostpreis 1 (book_no_con1) nicht gleich sein wie ein anderes Element Eingang sagen Gewinnen Buch Nein (book_no) verhindern kann?

d. H. Ich möchte das Formular so implementieren, dass Eingabe für Gewinnbuch Nr, Trostpreis 1-4, alle Elemente sollten unterschiedliche Zahlen sein.

Quelle

2016-07-24 Sapnesh Naik

Ja, und es wäre ein wenig Javascript erforderlich. –

Auf der Client-Seite? Nicht wirklich. Um 100% sicher zu sein, müssen Sie die Server-Seite immer (doppelt) überprüfen. Es sei denn, Sie vertrauen Ihren Benutzern wie in einer Intranetumgebung. – DanMan

@MueyiwaMosesIkomi können Sie mir mit dem Javascript-Code dafür helfen? –

Hier ist ein funktionierendes Beispiel für das, was Sie brauchen. Ich fügte IDs für jeden Input hinzu und ich schrieb einfachen Javascript-Code, der überprüft, ob dieses Array von Büchern doppelte Werte hat.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
</div> 
 
    <div class="col-lg-6 col-md-6 form-group"> 
 
     <label for="inputBookNo">Winning Book No</label> 
 
     <input type="number" min="1" class="form-control" id='book' name="book_no" placeholder=" Winning Book Number" required> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 form-group"> 
 
     <label for="inputBookNo">Consolation Prize 1</label> 
 
     <input type="number" min="1" class="form-control" id='book1' name="book_no_con1" placeholder="Consolation Prize 1 Book Number" required> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 form-group"> 
 
     <label for="inputBookNo">Consolation Prize 2</label> 
 
     <input type="number" min="1" class="form-control" id='book2' name="book_no_con2" placeholder="Consolation Prize 2 Book Number" required> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 form-group"> 
 
     <label for="inputBookNo">Consolation Prize 3</label> 
 
     <input type="number" min="1" class="form-control" id='book3' name="book_no_con3" placeholder="Consolation Prize 3 Book Number" required> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 form-group"> 
 
     <label for="inputBookNo">Consolation Prize 4</label> 
 
     <input type="number" min="1" class="form-control" id='book4' name="book_no_con4" placeholder="Consolation Prize 4 Book Number" required> 
 
    </div> 
 
    <button id='checkFields'>Check Fields</button> 
 
</div> 
 
<script> 
 
    function hasDuplicates(array) { 
 
    var valuesSoFar = Object.create(null); 
 
    for (var i = 0; i < array.length; ++i) { 
 
     var value = array[i]; 
 
     if (value in valuesSoFar) { 
 
      return true; 
 
     } 
 
     valuesSoFar[value] = true; 
 
    } 
 
    return false; 
 
    } 
 

 
    document.getElementById('checkFields').onclick=function() { 
 
     var books = new Array(); 
 
     var book = document.getElementById("book").value; 
 
     var book1 = document.getElementById("book1").value; 
 
     var book2 = document.getElementById('book2').value; 
 
     var book3 = document.getElementById('book3').value; 
 
     var book4 = document.getElementById('book4').value; 
 
     books.push(book); 
 
     books.push(book1); 
 
     books.push(book2); 
 
     books.push(book3); 
 
     books.push(book4); 
 
     if(hasDuplicates(books)) 
 
      alert("No duplicates allowed!"); 
 
     else 
 
      alert("Test passed"); 
 
    } 
 

 
</script> 
 
</body> 
 

 
</html>

Quelle

2016-07-24 09:47:36

Ich habe eine andere var für Buch hinzugefügt (Gewinnbuch Nr.) Und habe es dann alles in Ordnung gebracht. Danke! –

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <div class="col-lg-6 col-md-6 form-group"> 
 
     <label for="inputBookNo">Winning Book No</label> 
 
     <input type="number" min="1" class="form-control" name="book_no" placeholder=" Winning Book Number" required> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 form-group"> 
 
     <label for="inputBookNo">Consolation Prize 1</label> 
 
     <input type="number" min="1" class="form-control" name="book_no_con1" placeholder="Consolation Prize 1 Book Number" required> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 form-group"> 
 
     <label for="inputBookNo">Consolation Prize 2</label> 
 
     <input type="number" min="1" class="form-control" name="book_no_con2" placeholder="Consolation Prize 2 Book Number" required> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 form-group"> 
 
     <label for="inputBookNo">Consolation Prize 3</label> 
 
     <input type="number" min="1" class="form-control" name="book_no_con3" placeholder="Consolation Prize 3 Book Number" required> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 form-group"> 
 
     <label for="inputBookNo">Consolation Prize 4</label> 
 
     <input type="number" min="1" class="form-control" name="book_no_con4" placeholder="Consolation Prize 4 Book Number" required> 
 
    </div> 
 
    
 
    <button onclick="myFunction()">Try it</button> 
 

 
    <script> 
 
     function myFunction() { 
 
      var book_no = []; 
 
      book_no[0] = document.getElementsByName("book_no")[0].value; 
 
      book_no[1] = document.getElementsByName("book_no_con1")[0].value; 
 
      book_no[2] = document.getElementsByName("book_no_con2")[0].value; 
 
      book_no[3] = document.getElementsByName("book_no_con3")[0].value; 
 
      book_no[4] = document.getElementsByName("book_no_con4")[0].value; 
 

 
      if (hasDuplicates(book_no)) { 
 
       alert("please make sure that all the values are different."); 
 
      } else { 
 
       alert("Test passed."); 
 
      } 
 

 
      function hasDuplicates(array) { 
 
       return (new Set(array)).size !== array.length; 
 
      } 
 
     } 
 
    </script> 
 

 
</body> 
 

 
</html>

Quelle

2016-07-24 09:51:12

Obwohl dies eine gute Antwort ist, die von denjenigen verstanden wird, die mit JavaScript und ES6 vertraut sind, ist es unwahrscheinlich, dass das OP und diejenigen, die diese Frage in der Zukunft haben, verstehen werden. Bitte: Nehmen Sie sich die Zeit, Ihren Code denjenigen zu erklären, die gerade lernen oder unvollständiges Verständnis haben. –

Bestimmte Nummer in HTML-Eingabe verhindern?

Antwort

Verwandte Themen