Thank you! This is great. But this solves only one part of the problem I am working on. I need to understand how can we use drag and drop to create custom form, for example let say I have a tool box with all the UI elements and just by drag and drop, I create the form and then on submit save the json in DB. This json is then fetched and will be rendered as form as explained in this video.
This video is very useful. I didn't seen this kind of video on youtube still now. Can you please continue with this video by adding a "discard changes" button?
@@ckmobile Thanks for the reply. Sorry for my poor English. For example, the "name" field has a value from API. So once the user types an 'extra' text and clicks the discard changes button, the typed ( onChange ) value should be cleared. In other words, while loading time the text box has values like 'RAGAM IS GOD', so the user typing in a text box like 'RAGAM IS GOD extra', So once clicked the 'discard changes' button, the 'extra' text should be removed and 'RAGAM IS GOD' should be there. I will be grateful if post this video as soon as possible.
@@ragamisgod8281 it's ok. I think i know what you mean. But what is the difference if the user just press ctrl and z together to undo? Are there any existing form can share that has this function?
@@ckmobile Thanks for the reply. I have no existing form for this. But, I can say that in this video there is submit button. So need to add an extra button, and name it as discarded changes. It should be clear on both the scenario 1) button click & 2) ctrl + z as well
Everyone talking about dynamic control is there a way we can have dynamic html template ? Your forms does not look showing control from top to bottom what if i want to add some template in it ??? Reply
Hi ckmobile, this video is very useful. I have never ever seen this kind of videos with clear explanation. Can you please update this same video using Next.js ? Thanks in advance.
Great content. I've a question though, lets say we have a select field in the form, and selecting any option would render a child form.. how would one go about doing that?
yes, u can using useEffect and fetch to fetch the JSON from the database, and then submit back the updated JSON to the database. I just simplify the tutorial so hardcode the JSON.
so in order to create a user form builder, for example, you would store the formElement.json right? is it possible to convert a form into a json programatically?
I have a question because your code is exactly what i need but im a new one with react... If i wanna add some children ? Like an side bar with a main layout and your childrens are a button, input, other pages etc
Hope you guys enjoy this video! Keep learning and your dreams will come true :) Don't forget to SUBSCRIBE for more videos What will you create with ReactJS ? Please leave a comment below. You can also subscribe to get info or our (free) course coupons mailchi.mp/cb8cb6b3878e/javascript-course Read articles: ckmobile.medium.com/ Support what I do and push me to keep making free content www.patreon.com/join/ckmobile?
You should do more videos on react working with JSON comming from db + form, it's a plus to differ the content with other channels. My suggest for you.
This is nice video, thanks! Have you ever used json-schema to make it dynamic ? it is similar with this, but instead of using json file, UI info coming from API.
Yes, this source code has miner , because at that time just try to find way to earn money by creating free content. For udemy course, no , there is no miner, just pure source code.
Great content, but I've tried for 1 month your logic using data coming from db in json format instead json file, no success. You can help me or give a logic to implement copying the data from db to a json file
@@ckmobile @ckmobile I have the react day picker in my project, but when click in day isn't filling the input_value because the value isn't update the input, how to handle with this?
@@ckmobile It is working now. But how can I use it in class components? We can't use Hooks inside a class component. How can we mix hook and class components? Thanks
Join the affiliates program and start earning money🚀
ckmobile.gumroad.com/affiliates
Great tutorial and explanation. Tried it out and it works perfectly. Thanks for taking the time to share 👍
this is good stuff. I've added complication to this for myself by trying to apply the concepts to a react typescript project. Interesting challenges.
I love your voice ..Thank you for the tuorial.
excellent video. everything I needed to learn. Thank you so much!
Nice explanation 🎉
Thank you! This is great. But this solves only one part of the problem I am working on.
I need to understand how can we use drag and drop to create custom form, for example let say I have a tool box with all the UI elements and just by drag and drop, I create the form and then on submit save the json in DB. This json is then fetched and will be rendered as form as explained in this video.
This is exactly what i want too
React-form-builder-2 is exactly what you are looking for.
This what I was looking from few days Thanks.
I have one question can we bind each and every form field
wow! I finally understand it! thank you!
Super helpful much apperciated ! Thank you
This video is very useful. I didn't seen this kind of video on youtube still now. Can you please continue with this video by adding a "discard changes" button?
Thanks. But what is the function of discard change?
@@ckmobile Thanks for the reply. Sorry for my poor English. For example, the "name" field has a value from API. So once the user types an 'extra' text and clicks the discard changes button, the typed ( onChange ) value should be cleared. In other words, while loading time the text box has values like 'RAGAM IS GOD', so the user typing in a text box like 'RAGAM IS GOD extra', So once clicked the 'discard changes' button, the 'extra' text should be removed and 'RAGAM IS GOD' should be there. I will be grateful if post this video as soon as possible.
@@ragamisgod8281 it's ok. I think i know what you mean. But what is the difference if the user just press ctrl and z together to undo? Are there any existing form can share that has this function?
@@ckmobile Thanks for the reply. I have no existing form for this. But, I can say that in this video there is submit button. So need to add an extra button, and name it as discarded changes. It should be clear on both the scenario 1) button click & 2) ctrl + z as well
Thank you so much! This was exactly what I was looking for!
I know I am quite randomly asking but do anybody know of a good place to stream new tv shows online ?
@Milan Harry I use Flixzone. You can find it on google :)
@Pedro Will Definitely, I've been using flixzone for years myself :D
@Pedro Will thanks, signed up and it seems like they got a lot of movies there :) I appreciate it!
@Milan Harry happy to help :)
Great stuff ..keep it on sir!!
Thank you 😘
how did you get the convert html to jsx thing on right click? what extension?
Yes, The extension name is "html to jsx"🤣
take care ! in the git repository, the index.html contains a Virus => html:script-inf[Susp]
Thank you for this video. BTW, you forgot to implement field_mandatory.
Everyone talking about dynamic control is there a way we can have dynamic html template ? Your forms does not look showing control from top to bottom what if i want to add some template in it ??? Reply
How can I add email and password validations. For example email shall only start with alphabets and password shall contain at least 8 letters etc. ??
Hi ckmobile, this video is very useful. I have never ever seen this kind of videos with clear explanation. Can you please update this same video using Next.js ? Thanks in advance.
I Will ❣️
Thats amazing man thanks.
Thank you Staybreezy🥰
thank you so much for this great video
Thank you 😘
overall great video.. my only issue is how you would go so fast at some points, even in super slow motion you couldn't see what you were doing..
Thanks Joseph 😀 which part u think is fast?
It's multiple parts really. I had to walk away from my pc for a few minutes but it's just a suggestion. Over good though
Yeah, completely beginner nightmare
Hi I have added the radio btn like checkbox ,but it didnot work can u please help,please add radio btn and date picker for this
Thank you sir
Great content. I've a question though, lets say we have a select field in the form, and selecting any option would render a child form.. how would one go about doing that?
use onchange function to detect, create a state. For example, if the state is true, then render that child form
Thx for the tutorial!! but is it possible to change the values of the json doc directly? instead of doing a copy
yes, u can using useEffect and fetch to fetch the JSON from the database, and then submit back the updated JSON to the database. I just simplify the tutorial so hardcode the JSON.
by the way, not a good idea to index an object map by the loop index. You have the field_id, I suggest using that.
so in order to create a user form builder, for example, you would store the formElement.json right? is it possible to convert a form into a json programatically?
Yes. The whole form structure and data already stores as json
I have a question because your code is exactly what i need but im a new one with react... If i wanna add some children ? Like an side bar with a main layout and your childrens are a button, input, other pages etc
Hope you guys enjoy this video! Keep learning and your dreams will come true :) Don't forget to SUBSCRIBE for more videos
What will you create with ReactJS ? Please leave a comment below.
You can also subscribe to get info or our (free) course coupons
mailchi.mp/cb8cb6b3878e/javascript-course
Read articles:
ckmobile.medium.com/
Support what I do and push me to keep making free content
www.patreon.com/join/ckmobile?
You should do more videos on react working with JSON comming from db + form, it's a plus to differ the content with other channels. My suggest for you.
@@ruipaulocalei3048 Nice, thank you for your suggestion 😘😘Before i just afraid this tutorial will be too long so do not connect with db
This is nice video, thanks! Have you ever used json-schema to make it dynamic ? it is similar with this, but instead of using json file, UI info coming from API.
Not yet. Thanks 👍 for the suggestion. Let me take a look on it.
Hello Dear, mmm can u help? actually, I need what you're taking about it JSON schema
Join the Ckmobile Affiliates Program and start earning money today 🚀🚀
@t
Where did the formElement.json come from?
i hardcode for this, but u can generate from database
How do I go about validating the form?
You can check it in the submit function. If not valid then return
how we can use API ratherthen .json file
You can fetch and store it as variable. As i just want to make the tutorial shorter, so hardcode the JSON😆
@@ckmobile you can use axios and pass data to variables
Great tutorial but the source code has miner inside it. Does your Udemy course has it too?
Yes, this source code has miner , because at that time just try to find way to earn money by creating free content. For udemy course, no , there is no miner, just pure source code.
Great content, but I've tried for 1 month your logic using data coming from db in json format instead json file, no success. You can help me or give a logic to implement copying the data from db to a json file
stackoverflow.com/questions/62346157/how-to-setstate-after-fetch-data-react-hook
May be u can take a look how to set state after fetching data from db
@@ckmobile Thanks it worked
@@ckmobile @ckmobile I have the react day picker in my project, but when click in day isn't filling the input_value because the value isn't update the input, how to handle with this?
@@ruipaulocalei3048 could you share your code? because it is difficult to imagine without detail🙇♂🙇♂
Is the code open source?
error in input onchange is not a function
Can you share the source code?
ruclips.net/user/redirect?event=video_description&redir_token=QUFFLUhqbWRFemNReDdYM2tmVXQ1VDBRZVR4YkJEMG1aUXxBQ3Jtc0tsWHJGdGEwUEl3aDBHMEw4X0dOdXBiX2RnTi1IbVY0NmZtMHZCb0dhYXhUaV9waGlSbHdTOExjQno4dzR5NDMwNGI1bHlKcWJkbnhwdl9NQVBhcVJaUmtsSTZya0VtU3NjN21WQ0stYkV4N2VxSmo4aw&q=https%3A%2F%2Fgithub.com%2Fcyrus8050%2Fyt-dynamic-form
@@ckmobile It is working now. But how can I use it in class components? We can't use Hooks inside a class component. How can we mix hook and class components? Thanks
Your video quaility was really bad
Hi I am facing some issues. I have followed the exact steps shown in the Video....I need you help.. please let me know how to contact you.
Thank you so much! This was exactly what I was looking for!