Prevent specific number in html input?

Question

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.

On the client side? Not really. To be 100% sure, you always need to (double-) check on the server side. Unless you trust your users, like in an Intranet environment. — DanMan
– DanMan, Commented Jul 24, 2016 at 9:30
@MueyiwaMosesIkomi can you help me with the javascript code required for this? — Sapnesh Naik
– Sapnesh Naik, Commented Jul 24, 2016 at 9:47
If you're willing to accept JavaScript answers you need to update the tags to your question to include the JavaScript tag (in this case I've done it for you, but please, in future, remember to update and edit your question in light of questions or advice in the comments). — David Thomas
– David Thomas, Commented Jul 24, 2016 at 9:56
@sapneshnaik i just wrote you javascript code, you can find my answer bellow. Enjoy it! — Aleksandar Đokić
– Aleksandar Đokić, Commented Jul 24, 2016 at 9:59

Bunny Hop · Accepted Answer · 2016-07-24 09:51:12Z

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

While this is a good answer, understood by those of familiar with JavaScript and ES6 it's unlikely that the OP, and those coming across this question in the future, will understand. Please: take the time to explain your code to those that are learning, or have incomplete understanding.

Aleksandar Đokić · Accepted Answer · 2016-07-24 09:57:09Z

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>

I added another var for book(winning book no) and pushed it then all was okay. Thank You!

Collectives™ on Stack Overflow

Prevent specific number in html input?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related