Like what we’re doing? Star us on GitHub!

Form Builder: Create Other Field for Select/Custom Type

work
last month
5

Hey so I need to add support for an "other" field that will allow a custom text box to appear on the frontend, the way the data is sent is an array of submissionData


{
  "field": string,
  "value": string,
  "id"?: string,
}


If i'm using a Select type and want to allow the extra field how should I go about submitting the text field data and adding the other field to the inbuilt type for it?



I've also got a custom type called "multi-choice" which basically identical to select, but just different blockType so it's easier to differentiate the type of form element to show on frontend and also Select doesn't support multi-select options it seems.


I've added an Other checkbox to say if the form creator wants to allow the custom field, but I'm unsure how to submit it, current idea would be to send it in the value key like


{
  "field": "multi-choice",
  "value": "other:Custom Text Goes Here",
}

correct me if i'm wrong but this would fail validation as the value doesn't match an option.


so would I just extend the submission data type or is there another way that would be recommended


{
  "field": "multi-choice",
  "value": "other",
  "data": "Custom Text Goes Here"
}


@jacobsfletch your prob best person to ask about this



next solution I currently have is to add a new field on the form that has "nameOfField-other" for accepting the other fields so it doesnt modify the returned data, and would just be an optional field returned. this gets added via a field hook for the multi-choice field, but unsure how I could add the same to the select field outside a collection hook?

  • jacobsfletch
    Payload Team
    last month

    It sounds like you need to add

    two

    new fields to your forms collection, one for the checkbox that enables and disables your text field, then the text field itself. You can use conditional logic to show and hide this field based on whether it’s enabled.



    This way you have a field to submit data to.

  • work
    last month

    yep that's pretty much what I ended up going with, and just overrode the select field to add the other toggle to it.



    It would be nice if this was added into the plugin, I can make a PR for it with a rough implementation which can be edited by someone to follow your standards closer incase i've done something that doesn't follow correctly.



    basically just adds another field into the form and use a hook to add or remove it on update

Open the post
Continue the discussion in Discord
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More