CODEWITHSUNDEEP
elementhidden
Roadside Table
Roadside Table

Reputation: 11

How can I toggle a hidden element based on user input (text field)?

I'm looking for a good way to reveal a hidden element (a div) based on specific input into a form field. The application is an order form that isn't using any database. I want to have users input a coupon code and if it matches have the div appear (which contains what is needed to do the discount). And if it doesn't match it either does nothing, loads another hidden element or reveals a message like "invalid code".

PHP would be preferred but I'm open to anything. I don't see how the textbox where users enter the code has to be submitted with a submit button as it would submit the order form. It isn't critical that the discount is 100% secret. In other words, if they think to view the source code to see if they can figure out if there's a discount then they've earned it.

I've thought about using a inline frame for simplicity but I don't think that will work.

Upvotes: 1

Views: 216

Answers (1)

Lara
Lara

Reputation: 516

You could use the input's oninput function to watch the value entered. On each keypress you could make a call to see if it matches a coupon code. If the coupon codes are always "x" length, you could only do the call when the value reaches that length (if you don't want to call on every single keypress).

Alternatively, you could use a button and use it's onclick attribute. It would be the same idea as above, just instead of making the call on every keypress, you would only make the call on the button's click.

Once the value matches, just set the hidden div from "display: none" to "display: block" or something like that.

oninput reference

onclick reference

Upvotes: 1

Related Questions