Activate button when all fields are filled out
I'm new to justinmind. I'm trying to simulate a standard web form, but where submit button will not activate (change colors) until all necessary fields are completed. I can easily do condition statements to make sure the fields are completed - but I have to us a action like scrolling up and down on the page to have the button change colors. Any way to just have the button chance colors or hide when the last field is completed?
Check out this tutorial to learn how to do this.
Check out this tutorial to learn how to do this.
Hi John,
You can create a 'Change style' event on your Button to change its color, and create a condition such as: Last field ≠ empty. This way, when the last field is not empty, the button will change its color. Also, instead of a change style event, you can set the button hidden by default and then create a 'Show event' under the same condition.
Best,
Lidia
Hi John,
You can create a 'Change style' event on your Button to change its color, and create a condition such as: Last field ≠ empty. This way, when the last field is not empty, the button will change its color. Also, instead of a change style event, you can set the button hidden by default and then create a 'Show event' under the same condition.
Best,
Lidia
Hi, I have several form fields on my screen and want to add a condition that the active button isn't shown until all the fields are filled out. How can I do this? I can't see how I can set a condition saying 'last field ≠ empty' Do you have a visual example of these conditions in the conditions panel?
Hi, I have several form fields on my screen and want to add a condition that the active button isn't shown until all the fields are filled out. How can I do this? I can't see how I can set a condition saying 'last field ≠ empty' Do you have a visual example of these conditions in the conditions panel?
It's unclear to me whether you actually want to check if just the last field is empty because this would only ensure there is a value in the last input, but does not guarantee there are not other inputs that are empty yet require a value. If you'd prefer the button to show only when a number of required inputs, or all of your inputs, have values, you could accomplish this by attaching the same event to all of your required inputs which is triggered by "On focus out" and whose action is to hide or show the button depending upon whether all of the required inputs contain values.
So, on a single input, you would add an event that is "On focus out" with an action of "Show" with the button as the element to show, and a "When" condition that checks each input for a value such as "When input_1 ≠ '' & input_2 ≠ '' & input_3 ≠ '' & ... input_n ≠ ''". You should also add an action to the "Else" of your "When" with a "Hide" action that hides the button to handle the case where a user has filled in all of the required inputs, which would trigger your event above to show the button, but they then go back and delete the value of an required input. By having this "Else", the user would be required to enter another value to replace the one they deleted in order for them to see the button again, which would be consistent with the goal of making the button available only when all of the required inputs contain values.
Granted, if you have a lot inputs that require values, it will make for a long "When" condition, but at the moment it is the only solution I can think of. And, it should work.
Regarding your specific question on how to achieve something like 'last field ≠ empty', Danielle's screenshot shows it. I don't know if it's required, but in order to get it to look like the screenshot, once you've dragged up the input and the "≠" sign and get the dotted circle that says "Double click to edit or drag & drop a component", just double click the circle than tab out of it.
If you do only want to check the last input, sorry to have wasted your time. :-)
It's unclear to me whether you actually want to check if just the last field is empty because this would only ensure there is a value in the last input, but does not guarantee there are not other inputs that are empty yet require a value. If you'd prefer the button to show only when a number of required inputs, or all of your inputs, have values, you could accomplish this by attaching the same event to all of your required inputs which is triggered by "On focus out" and whose action is to hide or show the button depending upon whether all of the required inputs contain values.
So, on a single input, you would add an event that is "On focus out" with an action of "Show" with the button as the element to show, and a "When" condition that checks each input for a value such as "When input_1 ≠ '' & input_2 ≠ '' & input_3 ≠ '' & ... input_n ≠ ''". You should also add an action to the "Else" of your "When" with a "Hide" action that hides the button to handle the case where a user has filled in all of the required inputs, which would trigger your event above to show the button, but they then go back and delete the value of an required input. By having this "Else", the user would be required to enter another value to replace the one they deleted in order for them to see the button again, which would be consistent with the goal of making the button available only when all of the required inputs contain values.
Granted, if you have a lot inputs that require values, it will make for a long "When" condition, but at the moment it is the only solution I can think of. And, it should work.
Regarding your specific question on how to achieve something like 'last field ≠ empty', Danielle's screenshot shows it. I don't know if it's required, but in order to get it to look like the screenshot, once you've dragged up the input and the "≠" sign and get the dotted circle that says "Double click to edit or drag & drop a component", just double click the circle than tab out of it.
If you do only want to check the last input, sorry to have wasted your time. :-)
Check out this tutorial to learn how to do this.
Check out this tutorial to learn how to do this.
Replies have been locked on this page!