Programmatically change placeholder of select field

  • Resolved vivalis

    (@vivalis)


    2 years, 5 months ago

    I’ve searched this forum and all over the internet about this problem, and as I couldn’t find any solution, I’d like to ask for help here.

    The case: Based on the inputs of the user, I need to dynamically adjust some select fields further down, i.e. create new options and also change the placeholder.

    The problem: Adding options works with jQuery’s append method. I couldn’t find a way to change the placeholder.

    Solutions i tried without success:
    – change placeholder/data-placeholder with HTML setAttribute -> no effect
    – change placeholder/data-placeholder with jQuery attr -> no effect
    – change placeholder/data-placeholder with .select2({“data-placeholder”: “new placeholder”}) -> no effect
    – add option without value instead of placeholder in Forminator Edit Form -> shows standard “Please select an option” instead my entered label for the 1st option
    – no placeholder and no selected option -> not allowed for required fields by Forminator, and I need the field to be required

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    Hi @vivalis

    I hope you are doing well.

    The Placeholder code would be similar to:

    jQuery('#select-1 .select2-selection__placeholder').text('New Placeholder');

    But I am afraid of creating the fields on Fly won’t work, because Forminator will validate your field to the backend and if that field doesn’t exist in the Form settings will return an error to prevent bots from trying to create options on the fly which can have bad scripts.

    A suggestion here is to toggle your Select based on visibility conditionals: https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#Forminator-Conditional-Logic or use a regular text field “Other” so we can input the text using JS without any issue.

    Best Regards
    Patrick Freitas

    Thread Starter vivalis

    (@vivalis)

    Thank you very much for your quick response, Patrick.

    Your solution for replacing the placeholder works.

    Changing the option of the select field on the fly worked until the previous version, but not with the current 1.19.0 anymore. I switched the backend validation of the options of select fields off (in the select.php). As there’s a “payment wall” in my form, there’s no risk of having bots abusing my select fields.

    Maybe you could add a possibility to have select field options dynamically filled from the backend. E.g. Ultimate Member allows this with 2 optional entries in the select field configuration: a callback function and a parent field.

    Kind regards,
    Roger

    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    Hi @vivalis

    Changing the option of the select field on the fly worked until the previous version, but not with the current 1.19.0 anymore.

    If the options were previously added to Form from the backend it would work, in the most recent version, we updated the IDs so I suggest a custom class and use that class for your code https://monosnap.com/file/mjI1FuNlbZ5sDwmimJAAEF5oeY9fkK so it prevents you need to update the code in case we modify the ID or Classes.

    Maybe you could add a possibility to have select field options dynamically filled from the backend. E.g. Ultimate Member allows this with 2 optional entries in the select field configuration: a callback function and a parent field.

    This sounds interesting, but we would need to verify how it works, do you have any specific documentation that we can forward to our developers as a feature request?

    Best Regards
    Patrick Freitas

    Plugin Support Amin – WPMU DEV Support

    (@wpmudev-support2)

    Hello @vivalis ,

    We haven’t heard from you for some time now, so it looks like you don’t have any more questions for us.

    Feel free to re-open this ticket if needed.

    Kind regards
    Kasia

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Programmatically change placeholder of select field’ is closed to new replies.