Results 1 to 4 of 4

Thread: Reset form invalid values

  1. #1
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default Reset form invalid values

    Here’s a sample form:

    Code:
    <form>
      <input type="number">
      <input type="number">
      <button type="button">Reset</button>
    </form>
    Code:
    var form = document.querySelector('form');
    
    function detectChange() {
      var inputs = form.querySelectorAll('input');
      for (var input of inputs) {
        if (input.value) {
          return true;
        }
      }
    }
    
    form.querySelector('button').addEventListener('click', function() {
      if (detectChange() && confirm('Are you sure you want to reset?')) {
        form.reset();
      }
    });
    DEMO

    I’d like the reset button to work even if the user enters non-numeric values.
    Last edited by Rain Lover; 04-10-2019 at 09:29 AM.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,807
    Thanks
    59
    Thanked 104 Times in 102 Posts
    Blog Entries
    4

    Default

    It only accepts numbers because in the form in the html the input type is set to number.

    Change
    HTML Code:
    <form>
      <input type="number">
      <input type="number">
      <button type="button">Reset</button>
    </form>

    to
    HTML Code:
    <form>
      <input type="text">
      <input type="text">
      <button type="button">Reset</button>
    </form>

  3. #3
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by keyboard View Post
    It only accepts numbers because in the form in the html the input type is set to number.
    Actually you can do it even in Chrome: copy and paste some text into the input fields.

  4. #4
    Join Date
    Mar 2011
    Posts
    1,807
    Thanks
    59
    Thanked 104 Times in 102 Posts
    Blog Entries
    4

    Default

    Quote Originally Posted by Rain Lover View Post
    Actually you can do it even in Chrome: copy and paste some text into the input fields.
    Yes, you can input text into the box, but it isn't a valid input (I'm not 100% sure on this, I'm just going off my own testing while I was editing the code you put).

    Try running the following code -

    HTML Code:
    <!DOCTYPE html>
    <html>
    	<head>
    
    	</head>
    	<body>
    		<input type="number" id="inputNumber">
    		<input type="button" id="inputButton" value="Test">
    
    		<script type="text/javascript">
    			document.getElementById("inputButton").onclick = function() {
    				var value = document.getElementById("inputNumber").value;
    				alert(value);
    			};
    		</script>
    
    	</body>
    </html>
    If you enter a number into the input it alerts the number. If you enter text or a combination of text and numbers, the alert is empty. The other difference in chrome is that it adds a little increment and decrement arrow to the input field. On mobile it gives you a keypad to enter a number instead of the default keyboard.
    Attachment 6340


    So the reason your original code wasn't working was this line
    Code:
    if (input.value) {
          return true;
        }
    If you enter a string into the number input then input.value is empty and so the detectChange doesn't return true.
    If you change it to a text input, that won't be a problem.

Similar Threads

  1. Form onreset Event after the form reset
    By Rain Lover in forum JavaScript
    Replies: 8
    Last Post: 02-09-2014, 06:14 PM
  2. Replies: 3
    Last Post: 12-19-2010, 12:08 AM
  3. newsletter subscribe form - always invalid - regexp
    By leonidassavvides in forum MySQL and other databases
    Replies: 4
    Last Post: 07-20-2008, 12:38 PM
  4. Pass Multiple Values - Reset/Clear Textarea
    By curb in forum JavaScript
    Replies: 0
    Last Post: 06-20-2006, 11:03 PM
  5. reset form please help
    By nick120 in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 06-15-2005, 10:49 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •