3 Gravity Forms on one page - javascript

I'm currently displaying three gravity forms on a page, "display:none;", and setting them to "block" when one of the three corresponding buttons are clicked.
You can view the example on http://b2bsauce.com/
The problem is that on validation, the AJAX part reloads, with the error messages and again displays the form as hidden, which obviously, in this case, does not make sense.
Is there any way I can hook into the validation process and set the form to display or should I have gone about this in another way?
JS
var form = jQuery(this).attr('href');
jQuery('.gform_wrapper').not(form).css('display','none');
jQuery(form).slideDown();
HTML
Each form is contained in this wrapper, which is set to "display:none".
<div class="gf_browser_chrome gform_wrapper" id="gform_wrapper_1" style="display: block;">
</div>
<div class="gf_browser_chrome gform_wrapper" id="gform_wrapper_2" style="display: block;">
</div>
<div class="gf_browser_chrome gform_wrapper" id="gform_wrapper_3" style="display: block;">
</div>

Submit buttons don't have the href attribute (assuming that's what is being clicked), are you trying to get the action of the form or just save the form instance itself to a variable?
I think you are trying to save the form element to a variable so I would change your code to:
var $form = jQuery(this).parents('form'); // use $ prefix to show it's a jQuery object
jQuery('.gform_wrapper').not($form).css('display','none');
jQuery($form).slideDown(); // not sure if you need this line if the form is already showing
but I'm not sure if that's all you need or not without some sort of self contained example that can be edited.

Gravity forms can be a bit tricky at time and I eventually found the error.
I used a "click" eventListener on the ".button" class to switch between hidden/block of the forms. However, the submit button in Gravity Forms also has a button class attached, hence it was hiding the form every time the submit button was clicked.
I thus made sure that the click listener is only attached to the three buttons at the top.

Related

Google Tag Manager Form Submission without URL changing

Scenario:
Ajax Based Contact Us form on a page www.example.com/contact-us
Successful Form submission : Page stays same , Thank you text is displayed. ( on the html side of things , an attribute of style=display:none is removed from the div and it shows the thank you page.
<div id="123" style="display:none"> Thank you </div>
Approach 1: I tried Form submission trigger, however, it triggers every time a user clicks on Submit button. Also, it triggers code for invalid form submission attempt
Approach 2: I selected Form Validation in GTM. However, gtm.FormSubmit event is not fired. So the code is never triggered.
Approach 3: I have created a DOM element variable, which on initial page load gives me the value of style attribute of div id="123".
My expectation was on form submit, I will get the updated value of Style attribute of div id 123. But, the value is never updated.
How do I enable the trigger to fire only when style="display:none" is absent after submit button is clicked?
The best way to do this is for you to manually and explicitly push an event onto the GTM dataLayer when the form submission is successfully. You would usually do this in the Ajax callback as follows
dataLayer.push({'event' : 'form_submitted'});
Then, in GTM, you would create a trigger of type Custom Event and you would enter the event name (form_submitted). This will cause your tag to fire whenever this event is pushed onto the dataLayer.

Is it possible to share one button click in different forms?

The basic idea is to have a grid where a user double-clicks the row and opens a modal window (Bootstrap panel) with a panel-body section to edit the data, and a panel-footer with a btn-group to "Save", "Cancel", or "Close" with some logic built in to handle the button's state and onclick events accordingly.
Since there will be many grids and many modal windows throughout the project, and although the panel-body section will vary for each one of them, the panel-footer will likely be the same for them all and I would like to use only one panel-footer as a template, but I don't know how to.
At the moment, here is how it works:
In the project, there are two forms: frmCustomer and frmUnit.
frmCustomer panel-footer has buttons #btnSaveCust, #btnCancelCust, and #btnCloseCust.
The jQuery script has events hooked up to each of those IDs and works as expected $(document).on("click", "#btnSaveCust", function () { SaveCust(); });
frmUnit works the same way except with the name changed to #btnSaveUnit and the event changed to #btnSaveUnit and SaveUnti().
Now, if I do a template, the buttons' IDs would change to #btnSave, #btnCancel and #btnClose.
How would I know how to call SaveCust() or SaveUnit()?
UPDATE 1: I just realized that this is not going to work, since we cannot have duplicated id's, the btns in the shared view (template?) must have to be renamed every time they are used in another form
Here's something that should help
Updated fiddle, this one tells you which form the button is in
For the updated fiddle, click on the buttons, which opens the modal. I have a form that is dynamically added to the modal when you click on the button. Then inside the modal, click on the submit button, and it will alert which form you're in. Close out of the modal and try another button and you'll see it alerts with the updated form, and clicking on that submit button tells you which form you clicked on
The idea is, you have one button event handler for a class rather than an id. This will make any button with a certain class behave the same way. Now the next step is the button logic.
If you look at the fiddle, where I handle the .open-button logic, I take the id of the button that was clicked on, append the string -modal to it, and it opens the matching modal. You can replicate this with a form, I believe, and use some sort of name matching the same way.
Also, look at the message that appears when you close the modal, you can use this type of logic to target a form and do form.submit or something similar. This should make all your buttons have only one click event handler and apply to multiple forms/modals
This is better than having the click event handler, and having a bunch of if (something) else if (something) else etc... you just do a quick and easy string manipulation and get the element you want and submit that form.
Let me know if that helps

How to remember the toggle state on form submit - show/hide in the session variable

I am using a toggle link to show and hide some page content on a search page. The toggle is set to hide on page load.
Function works great but I will need to remember the toggle state on form submit so that if the user decides to edit the initial search the state is remembered.
Here is the working function:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide_search").show();
$('.show_hide_toggle').on('click', function(e){
e.preventDefault();
var self = this,
sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
$($(self).children()[0]).text(function(_,txt) {
return txt == "–" ? "+" : "–";
});
});
});
});
And the HTML:
<div class="show_hide_toggle">
+
<div class="show_hide_search2">More</div>
</div>
<div class="slidingDiv" style="display: block;">
<h2>Content One</h2>
</div>
This is how I remember the session for the form elements if it helps:
<?php echo ($_SESSION['save_srch']['name1'] == 'name')?'selected="selected"':'';?>
Here is a JSFiddle: http://jsfiddle.net/Bradg/eBfxB/11/
Seems like you have a couple options. As mentioned in the comments above you could add something to the click handler of your toggle to make an AJAX call to the server and store the value in the session immediately.
However your original question was how you could store it on form submit (post). My suggestion if you don't want to go the AJAX route is to add a hidden input control to your markup with a true/false value for the state of the toggle. Any time the toggle is clicked, toggle the value of the hidden control also. When you submit the form, just inspect the value of the hidden control and store the value in session as you desire.
The downside to this approach is if for some reason the browser lost state before the form submit, you would not store the value immediately. So it's possible in some scenarios (browser crash, navigate away) that the form would not be submitted and thus the value of the toggle not stored. So you will have to decide which approach is OK for your scenarios.

Submit hidden fields in a html form

For a basic HTML form, I would like to seperate the form into three tabs, each tab will contain certain fields, and when submit the form I wish all data in the three forms will be able to submit.
So I have a menu created by <ul> and <li>
<ul class="subnav">
<li class="subnav0 current">Tab1</li>
<li class="subnav1">Tab2</li>
<li class="lastItem subnav2">Tab3</li>
</ul>
and below this menu, I have three divs that represent each of the tab:
<div class="tab1"></div>
<div class="tab2 displayNone"></div>
<div class="tab3 displayNone"></div>
The input controls elements will be put into each of the tab divs. And the javascript in the menu nav bar will control which tab to display by call show() & hide() method of each div. (Using jQuery).
Now my problem is:
1) I want to be able to submit the whole form (all controls within three divs). However, html forms won't submit input controls within a displayNone div, which means I will only be able to submit the data within the tab which I am currently viewing but not the other two tabs.
2) I also want to do some javascript functions on hide elements when initialize the form in tab2 or tab3. However, since they are display:none, the javascript will not have any effect.
So is there any way that I can somehow hide the div, but also be able to submit the form and do any javascript operation on it?
According to the W3C display:none controls may still be sent to the server, as they are considered successsful controls
17.13.2 Successful controls
A successful control is "valid" for submission. Every successful
control has its control name paired with its current value as part of
the submitted form data set. A successful control must be defined
within a FORM element and must have a control name.
However:
Controls that are disabled cannot be successful.
If a form contains more than one submit button, only the activated
submit button is successful. All "on" checkboxes may be
successful. For radio buttons that share the same value of
the name attribute, only the "on" radio button may be
successful. For menus, the control name is provided by a
SELECT element and values are provided by OPTION elements. Only
selected options may be successful. When no options are
selected, the control is not successful and neither the name nor
any values are submitted to the server when the form is
submitted.The current value of a file select is a list of
one or more file names. Upon submission of the form, the contents
of each file are submitted with the rest of the form data. The file
contents are packaged according to the form's content
type. The current value of an object control is determined by
the object's implementation.
If a control doesn't have a current value
when the form is submitted, user agents are not required to treat it
as a successful control.
Furthermore, user agents should not consider the following controls
successful:
Reset buttons. OBJECT elements whose declare attribute has been set.
Hidden controls and controls that are not rendered because of style
sheet settings may still be successful.
For example:
<FORM action="..." method="post">
<P>
<INPUT type="password" style="display:none"
name="invisible-password"
value="mypassword">
</FORM>
will still cause a value to be paired with the name
"invisible-password" and submitted with the form.
In any case if that doesnt seem to be working why not try jQuery serialize() or serializeArray() on each form and concatenate the values and ajax them back to the server.
On your first point, just because an input is display none, doesn't mean that it will not submit those fields.
On your second point, I don't quite follow. Are you saying that when you open one of the tabs, you want to do some action on the content? If so, then JQuery UI allows you to do this:-
http://jqueryui.com/demos/tabs/#event-show
Can you give a more complete example, including the form tag and some inputs?

jquery submit form once

I am trying to write a custom magento module and i've got it all complete and working perfectly except one problem.
The module is a form with 4 radio buttons. They are all blank on the checkout page and I have them set up so that when you click one it submits the form and reloads the cart page with the "additional fees" in the subtotal.
My problem is that I need the first option to "auto submit" on page load. But I've tried ALOT of different things and can't come up with a way to use the jquery .submit() function to ONLY submit the form once. as it is now it works how I want it, except it loads the page in an endless loop.
Any way to say submit() only once?
I'd set the default radio button server-side rather than having an extra submit/refresh cycle, but if you insist on doing it client-side...
I assume on subsequent refreshes the previous selection will be retained (because your server-side code echoes back the previously selected values?), so can you perhaps test whether any radios are checked and if not assume that that is the first and only time to auto-submit?
$(document).ready(function() {
var $radios = $('#yourFormId input[name="yourRadioButtonGroupName"]');
if (!$radios.is(":checked")) {
// No radios currently checked, so check the first and submit
$radios.eq(0).prop("checked",true);
$("#yourFormId").submit();
}
});
The .is() method will "Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments."

Categories