sapnesh naik sapnesh naik - 4 months ago 7
HTML Question

Prevent specific number in html input?

Here is the html code

</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>


Is there anyway I can prevent input for one element say Consolation Prize 1(book_no_con1) not be same as another element input say Winning Book No(book_no)?

i.e I want to implement the form in such a way that input for Winning Book No,Consolation Prize 1-4 i.e all elements should be different numbers.

Answer

Here is an working example of what you need. I added id's for every input and i wrote simple javascript code which will check does this array of books have duplicate values.

<!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>