I want to have two forms on one view. Ideally, I want the bottom form to be hidden until the top form is submitted. OR, disabling the bottom form's submit button until the top form is submitted would be OK also.
Does anyone know if this is possible via Javascript or otherwise?
Wow Bennet, this works perfectly! I took it a step further, and in addition to the Rich Text View that you suggest, I added a Details View for the Student record, and using Display Rules, show the fields only when there is data (along with the Rich Text View). The Details View has an EDIT link, which brings up a modal view for editing the Student Info. I'm not sure if I'm going to keep this feature or not yet, but it does cover all the bases. For example, if the person checking out entered their email incorrectly, and clicks back to change it, they are still able to edit it through an intentional click on the Edit link.
This is awesome. Thank you so much for all your support. I am so grateful.
Great minds - I was thinking the same thing about hiding the child form as well and worked that on the next version of the code.
So few things, that are kind of explained in the code - I've got it to hide the Child Form when going back, and to show the 'Next' button in that case without the click of the Child Form submit.
1. Need to add a Input Field on the normal blank Parent form for the 'Connection' to the child object. Don't worry, I'm hiding it in the code. This way the data is loaded and the code can check if the Parent already has a Child and progress properly.
2. Suggest adding a Rich Text View that will display if the user already has a Child Form submitted - in the code it will hide if the child is not present and show if it is (in place of the Child Form)
/*Change the Following pieces to fit your application: view_2: Child Form view_3: form with only the 'Connection' field view_4: Rich Text view for message that will display if a Child form already exists kn-input-field_4: Change the 'field_4' portion to be the field of the Connection to the Child object located within the Parent Object data.field_4: Again change the field_4 portion to match */$(document).on(‘knack-record-create.view_2’, function () {
show_next_btn()
});(document).on('knack-view-render.view_3', function (event, view, data) { (’#view_3 #kn-input-field_4’).hide();
$(’#view_4’).hide();if (data.field_4 == “”) {
$("#view_3 .kn-submit input[type=submit]").hide();
}else {
('#view_2').hide(); (’#view_4’).show();
}
})function show_next_btn () {
$("#view_3 .kn-submit input[type=submit]").show()
}
Let me know how this works for you.
On a related note, once I've solved this "missing next button" issue, I may want to attempt to completely hide the Create Student Account child form if someone clicks the back link and their is already data in the fields. Not sure if that is possible, but that would be the best User Experience in my opinion. OR alternatively, I could dynamically change the Create Account (submit) button text to Save Student Info, such that it accurately reflects what the user would be doing... but in this case I may hit up against the issue you described in that it may create a 2nd user record connected to the checkout record. This would create an issue.
Hi Bennet,
Yes, your sample form that you describe is the same as mine. Interestingly enough, I just noticed that my Child Form is an Edit form, even though it's technically creating the connect child record for the first time. That's probably why when I click back it keeps the previously created data. I checked, and the builder won't let me add a child form that is Add... only and Edit form. I don't think this is necessarily an issue, but wanted to convey that.
To your second question/clarification, I am intending the connection to be a 1 to 1. The Multi-step parent form series that I've created is an e-commerce "checkout" or "registration" for a training company. The child record that gets created on Step 2 is the Student User record. So just one Student record should connect with each Checkout record.
Code looks right - the update doesn't appear to be calling - so that can go away from my testing
When I tried to duplicate it, I got different results interestingly
Database:
Object 'Parent' with a 1 to 1 connection to Object 'Child'
Scene 1 - Input new Parent - On Submit redirects to Scene 2
Scene 2 -
QUESTION: Sound like I've got the same structure as you?
My results - when I go thru the first time, everything works properly. If I go back - yep I see the form prefilled and if I click the first submit it doesn't do anything.
However: if you change the value in View 2 - not only does the submit button work, but it creates a second record connected to the original parent. This leaves both Child records connected even though I built it as a 1 to 1 connection.
Clarification: I have an idea to fix this but need to know - are you intending this connection to be a 1 to 1 and this behavior would cause issues, or is it a 1 Parent to Multiple Child relationship (using my example DB?)
Here is my full code implementation as it currently occurs:
$(document).on('knack-record-create.view_1100', function () {
show_next_btn()
});
$(document).on(‘knack-record-udpate.view_1100’, function () {
show_next_btn()
});
//Change the 2 instances of view_X to be the view of the ‘Next’ button you have.
(document).on('knack-view-render.view_1101', function () {
("#view_1101 .kn-submit input[type=submit]").hide()
})
//Change the view_x to the the view of your Next button
function show_next_btn () {
$("#view_1101 .kn-submit input[type=submit]").show()
}
Hmm, "knack-record-update" didn't seem to work either. I'm going to have Knack support look at our question and see if they can provide direction.
I will try that! I already tried "edit" and "modify" to no success. But maybe "update" will do the trick! Thanks so much Bennet!
Haven't seen this behavior myself - but then again never tried this scenario with my apps -
There is a record edit listener - if it is behaving that way, the below should correct it. If that doesn't work let me know and I'll try to re-create it in my testing application.
As always, change the view_x to the correct view.
$(document).on('knack-record-update.view_X', function () {
show_next_btn()
});
Bennet, this works!
However, when a user clicks the "back" link to this view, I'm encountering some strange behavior.
If the form is for some reason acting like an EDIT form (which I'm not sure why it would), is there a javascript "event listener" for Edit that is different the "create" event listener? (knack-record-create)
PS. I'm reading the documentation and I don't see the Edit form handler.
Thank you Bennet! I will let you know how it goes.
Sorry forgot to post my notes - I think this is what you're looking for.
It will hide the submit button of your second form on the page until the record from the first form is successfully submitted.
'Next' Button will behave normal after being shown
//Change the X in view to be the view of your form the person is filling out$(document).on(‘knack-record-create.view_X’, function () {
show_next_btn()});
//Change the 2 instances of view_X to be the view of the ‘Next’ button you have.
(document).on('knack-view-render.view_X', function () { ("#view_X .kn-submit input[type=submit]").hide()
})//Change the view_x to the the view of your Next button
function show_next_btn () {
$("#view_X .kn-submit input[type=submit]").show()
}
Thanks Brad. However, this specific feature that I'm looking to do is already part of a 6 step multi-part form. The workflow is for a Checkout using the E-commerce component at the last step. I have all the steps being underpinned by a Checkout object that I've created to collect the data, then at various stages (and mostly at the last step), insert connected Order, Payment, Student, and Enrollment records as needed. The problem comes from wanting to allow a new student to create an account. In order for me to utilize Knack's built-in email address availability verification, I must utilize form fields from the actual Student User Role. For, example, on Step 3 where this Student User is creating their account, if I were to use the submit button for this form to carry the user to the next form step, suddenly, the workflow is underpinned by the Student object, and nolonger by the Checkout object. Therefore, my workaround is that I have a blank "Checkout" form below the Student form, where all that is showing is the Submit button (which I have labeled "Next"). Using submit Rules, I have been able to show a message if the Next button is clicked before a connected Student object exists, but I'd like to improve the user experience by either completely disabling that Next button, or hiding it, until the above "Create Account" form has been submitted.
Hi Tanner,
I wonder if a multi-step type workflow would do the job for you without JavaScript - see Create a Multi-Part Form in the Knack cookbooks for some ideas.