How to create a form with just a few fields of a Fields Group, without posting
Support › MB Frontend Submission › How to create a form with just a few fields of a Fields Group, without postingResolved
- This topic has 5 replies, 2 voices, and was last updated 4 years, 3 months ago by
Beda Schmid.
-
AuthorPosts
-
December 19, 2020 at 10:47 PM #23639
Beda Schmid
ParticipantHello,
I am fresh to MetaBox and digging into the plugins features.
Following this tutorial, to get familiar with everything, I was able to build everything described in the Tutorial, thanks for this, its great.
However, now extending what I learnt in the tutorial, I stumbled on an issue.
In my single room post, I plan to add a calendar input for the guest to select a date, and a button Book Now.
Setting a date range in the calendar and pressing Book Now will/should lead to a booking page, where the user will have to fill out the entire form (similar to the form shown int your tutorial).
I hoped, I could use the same Form shortcode but specify which fields of the Bookings Fields Group to display (only check in date), and submit the form without saving it's data to the database.
However it seems not possible to display only one field of an entire Group with the same form (unless with CSS, etc, which is not what I want), so I create a new Group with just the date field I need for this Form.
Also it seems the form always creates a post even if I remove any post from the assignment of the group.In my use case however, the form should lead to the booking page, perhaps passing the field value as URL param, or else to the next form, where the user then indeed will book for real.
But it shouldn't save data yet, and it should display only one field of the Group.Hoping this makes sense, and perhaps someone has a hint for me where to proceed from here?
I am also OK with code (which I can craft myself) but I wonder if there is some inbuilt or helping way to achieve this with MetaBoxDecember 20, 2020 at 9:42 PM #23647Long Nguyen
ModeratorHi Beda,
The Frontend Submission form is an extension that lets developers create custom forms with custom fields so users can submit posts on the front end of a website. It only supports to show all custom fields in a meta box, not a field in a group so you can create a new meta box (Field Group) to show one field.
And of course, it will create a post after clicking the button Submit. If you do not want to create a post, the hook
rwmb_frontend_before_process
will help you to prevent the form fires to save/update a post.Get more details in the documentation https://docs.metabox.io/extensions/mb-frontend-submission/#form-actions.
December 21, 2020 at 12:46 PM #23666Beda Schmid
ParticipantThanks Long for confirming!
I’ll use the hooks.
Regards, Beda
December 21, 2020 at 12:48 PM #23667Beda Schmid
ParticipantAh, forgot:
Is it possible to pass the values from first form to second form?Or, in other words, how’d go for populating form fields dynamically according a previously submitted form?
I read only the post ID can be set by url param.
However it must be possible somehow to populate other fields dynamically also?Thanks!
December 21, 2020 at 4:03 PM #23670Long Nguyen
ModeratorHi,
The form of MB Frontend Submission does not support to pass the value to other forms. And the first form with the date field and Book Now button does not save the data (post and custom field) so it very difficult to set the param to URL by field value.
I think you can get the field value by JavaScript and set it to the redirect URL. This topic from StackOverFlow might help you to do https://stackoverflow.com/questions/42376287/how-to-add-or-replace-a-query-parameter-in-a-url-using-javascript-jquery/42376792.
December 26, 2020 at 3:15 PM #23733Beda Schmid
ParticipantIn case anyone stumbles on the same issues, this is how I solved it:
- First form includes only a few fields visibly
- It has a Custom Redirect Hook applied that does two things: Redirect to a new URL and passes certain input values to the URL, as well it deletes the post just created, as we don't want it to be saved just yet
- On the redirect target the final full form will allow to complete the process, and is populated by the available url parameters.
The code:
For the redirect and delete post actions:add_filter( 'rwmb_frontend_redirect', 'my_redirect_custom_hook', 10,2); function my_redirect_custom_hook($url, $config){ if( $config['id'] == 'my-metabox-slug' && startsWith( $_POST['_wp_http_referer'] , '/referrer-base/' ) ){ $url = 'site.com/target/?url_param_one=' . $_POST['metabox-field-one'] . '&url_param_two=' . $_POST['metabox-field-two']; wp_delete_post( $config['post_id'], true ); } return $url; } //Helper Function since only PHP8 and above will support natively str_starts_with() function startsWith( $haystack, $needle ) { $length = strlen( $needle ); return substr( $haystack, 0, $length ) === $needle; }
Then on the target page (final form), read the URL arguments with JS and put them in the determined fields:
jQuery( document ).ready(function($){ function querySt(ji) { hu = window.location.search.substring(1); gy = hu.split("&"); for (i=0;i<gy.length;i++) { ft = gy[i].split("="); if (ft[0] == ji) { return ft[1]; } } } var url_param_one = querySt("url_param_one"); var url_param_two = querySt("url_param_two"); document.getElementById('metabox_field_form_id_one').value = url_param_one; document.getElementById('metabox_field_form_id_two').value = url_param_two; });
It will need some more care in sanitising the url params, and of course, change the slugs and ids to the specific use cases.
-
AuthorPosts
- You must be logged in to reply to this topic.