Disable submit button if entry doesn't exist in tag list

JavaScript
1

I’ve been at this for a while and can’t find a working JS solution. I have several forms on a page that are similar to this one. They’ll each pull a list from a database as a lookup field. The user can start typing to find matching entries; however, I’d like to disable the option for the form to submit if the typed entry doesn’t exist in the list.

<form  method="post" action="script.php">
  <div class="wtitle">Edit/Lookup</div>
    <script>
      $(function() {
        var availableTags = [
          "testentry.com","example.com","yoursite.com","mysite.com"
        ];
        $( "#tags3" ).autocomplete({
        source: availableTags
        });
      });
    </script>
    <input class="wtext" id="tags3" name="site" placeholder="Search by Site Name" required>
    <div class="wbutton">
      <button type="submit" class="btn btn-success fa wbutton">SUBMIT</button>
    </div>
</form>

Here’s a live link:
https://goo.gl/Xmgoxe

Any thoughts would be helpful! Thank you!

2

What about disabling it initially, then only enabling it once the user has selected something from the list. Would that work?

3

Yes, I just can’t seem to find a way to make that happen. :slight_smile:

4

Like this?

I hard coded the tags - not sure how that will play with the database functionality.

1 Like
5

Thank you, I appreciate that, It worked perfectly!

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.