jquery functions are not working properly in multiple pages form - wordpress

In my wordpress website, i am using a gravity form to complete one online application process with about 10 to 12 pages of form filling. Once a user fills out all the process and make it to payment method page (which is the last before page), he sees display of details about payment method he has chosen in previous page.
In the previous page, i had 3 options to choose like credit card, check, and money order. Now selecting credit card, works fine and displays its details in the next page. But for the other two - check and money order, anything among these are selected, the next page displays a black details area. I need to display of details according to the selection.
This is mainly because of the Jquery issue in displaying content.
In this page, there seems to be code like the below to display the contents and to stop them from displaying.
in Plugins/gravity_forms/form_display.php
<div id='gform_page_{$form["id"]}_{$field["pageNumber"]}' class='gform_page{$custom_class}' {$style}>
<div class='gform_page_fields'>
<ul class='gform_fields {$form['labelPlacement']}'>";
and li like
$style = !empty($form) && !IS_ADMIN && RGFormsModel::is_field_hidden($form, $field, $field_values) ? "style='display:none;'" : "";
$field_id = IS_ADMIN || empty($form) ? "field_$id" : "field_" . $form["id"] . "_$id";
return "<li id='$field_id' class='$css_class' $style>" . self::get_field_content($field, $value, $force_frontend_label, $form == null ? 0 : $form["id"]) . "</li>";
}
when form current page came then it show that fields other fields are display :none
I need to know how these process of display:block and none works accordingly in this situation. Which file is causing these all actions?
Here
i faced one more issue
for few id it does not show fields
so then for this i coded Themes/function-application.php
add_filter('gform_pre_render_'.$form_id, 'populate_checkbox',10);
function populate_checkbox($form)
{
in this ....
my code
if($current_page==12){
require_once 'includes/application_form/payment.php';
?>
<script type="text/javascript">
alert('inside');
jQuery("#field_1_212").css("display","block");
jQuery("#field_1_129").css("display","block");
alert('after');
</script>
<?php
}
?>
here i find only first alert inside worked fine .. and then jquery, alert after are all not worked..
so i need to know which file i need to modify ??
Thanks in advance..

Related

Contact form 7 required one of 2 different fields

I have a image upload field and a URL field in CF7 and how can i make it that a user needs to use one of the 2 fields. So select a image or put a link in the URL field?
I already search a little and i saw some options to do it on normal txt fields but that was not working for me i think because of the upload field.
I don't think that CF7 can do this out of the box. You would probably have to go down to code to solve this issue.
Since I don't know how big you form is this could maybe help you out:
https://wordpress.org/plugins/cf7-conditional-fields/ - Plugin for conditional field inside CF 7
https://conditional-fields-cf7.bdwm.be/conditional-fields-for-contact-form-7-tutorial/ - Tutorial how to use it.
So with this plugin you could basically create a dropdown in which the user first has to select if he wants to use an image or use the URL field. After that, only his selection would pop up and he can proceed with the selected option.
If you want to do the coding you can add some JS to the site and check on validation if one of the two fields is filled out or not.
If the plugin solves your issue - great, if not let me know so I can help you out with the code validation.
###Edit since we need code###
So to dynamically alter the required function I found a pretty good post:
Dynamically Disable Contact Form 7 Field Validation
Some Background information:
CF7 does the validation on server side, so working with JS or JQuery won't help in this case. What we are going to do is manipulate the server validation. If one of the fields is filled out correctly we are just putting content in the other field on the validation.
I created a form that looks like this:
The form in CF7 module looks like this:
<label> URL
[url* url ]
<label> Image
[file* image ]
[submit "Send"]
Then you just have to add the following code to your functions.php file of your theme.
function alter_wpcf7_posted_data( $data ) {
if($_FILES['image']['size'] != 0) {
$_POST['url'] = "http://fileupload.com";
}
if($_POST['url'] != "") {
$_FILES['image']['tmp_name'] = "urlprovided";
}
return $data;
}
add_filter("wpcf7_posted_data", "alter_wpcf7_posted_data");
Normally both fields will be empty in the beginning, if one of them has contet the other one gets fake data and the use has only to provide one.
Let me know if this helps.
I think i found the solution with a little help of the code from #Aschi33.
I made the image (upload field) required and the url field not. So there needs to be alwasy a image selected. But with this code:
function alter_wpcf7_posted_data( $data ) {
if($_POST['url'] != "") {
$_FILES['image']['tmp_name'] = "urlprovided";
}
return $data;
}
add_filter("wpcf7_posted_data", "alter_wpcf7_posted_data");
if the URL field is filled in then the required image field is faked to be filled in so then the URL field can be used to submit the form.
And then with this code:
function cf7_custom_url_check( $result, $url ) {
if ($result) {
$regex='/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/';
if (!preg_match($regex,$url)) $result=FALSE;
}
return $result;
}
add_filter( 'wpcf7_is_url', 'cf7_custom_url_check', 10, 2 );
I check if its a real video link from YouTube and if not the field will give a error.

How do I get the current page in Gravity Forms

How do I get the current page of a multi page form in Gravity Forms? I've got two solutions that sort of work but neither fully work.
function gf_get_current_page() {
return rgpost( 'gform_source_page_number_' . $_POST['gform_submit'] ) ? rgpost( 'gform_target_page_number_' . $_POST['gform_submit'] ) : 1;
}
This solution works until someone doesn't fill out a required field before hitting the next button. Then it says the user is on page 3 even though they're still on page 2 and need to fix validation errors.
add_action( 'gform_post_paging', 'get_current_page_num_gf', 10, 3 );
function get_current_page_num_gf( $form, $source_page_number, $current_page_number ) {
echo '<script type="text/javascript">console.log(\'' . $current_page_number . '\');</script>';
}
This works well until the validation errors again. In this scenario, instead of changing the page number, it just outputs nothing.
I'd like to know what page the user is on at all times. If they miss a required question on step 2, then I'd like to know that they're still on step 2.
In the end, I'm hoping to send all this information back to Google Analytics and getting accurate information as to what step the user is on is not working well.
Sounds like you're looking for:
GFFormDisplay::get_current_page( $form_id );
For the JS approach use:
<script type="text/javascript">
jQuery(document).on('gform_post_render', function(event, form_id, current_page){
// code to trigger on form or form page render
});
</script>
https://docs.gravityforms.com/gform_post_render/

WordPress add Login/Logout to menu editor

Ok, so I found this code, which I modified to suit my needs. Btw, I'm using WooCommerce, which explains the "wc" in some of the function calls:
//Add login/logout link to primary menu
add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
if (is_user_logged_in() && $args->theme_location == 'primary') {
$items .= '<li>Log Out</li>';
}
elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
$items .= '<li>Log In</li>';
}
return $items;
This adds the login/logout menu items, and they work fine. However, they're stuck at the end of the menu, at the moment. I'd like to be able to edit the position using the editor in wp-admin. The solution I thought of was to maybe just create login and logout pages, and use header location redirects with those lines of code in them to get to the proper URLs, but the issue I see with that is that there will always be a login item and logout, no matter what status the user is currently in. Would there maybe be a way to dynamically add a site-wide CSS rule to hide the opposite menu item, based on the log in status?
Or is there an easier way?
Not the best idea but you can try.
Create in wp-admin menu section new menu item like "Custom Link"
Log Out
http://www.example.com/account/customer-logout/
Log In
http://www.example.com/account/
And add a custom class to a WordPress menu item to manage visibility
For example, you will see "logged-in" class on the body of the page and hide "Log In" link or change it to "Account" with the same link.

Remove "p" tag from content generated by a WordPress plugin

I realize there are dozens of this type of question, but since I can't find in any of them the solution to this specific problem, it's unlikely a "This question has already been answered here" type addition will make much sense. And to anyone who's ever tried getting a real, specific, detailed answer on the WordPress.org forums, good luck!
I'm using the Store Locator Plus plugin. Had some back-end coding issues which I had to fix because getting the guy (or company) who wrote it to answer questions on his website forum is like pulling teeth (not that anybody who spends $300 on a plugin deserves support, but anyhoo...)
So, here is a chunk of code where I hard coded a submit button html. Then I worked with a custom style sheet, and the button actually does work and look nice. The problem is that on the html source, WordPress has sprinkled spurious <p> and </p> tags in the html I created.
For now, please don't dwell on how the button is made, which is a bit of a hack. There are reasons why I used a div tag within a button content, it's because without it the text in the straight button comes out really crappy, not vertically aligned correctly, can't control the font-family or font-size values. Those problems will be for another question, at another time.
Here is the function in the plugin where I created a custom button:
function create_DefaultSearchDiv_Submit() {
$this->slplus->debugMP('msg',__FUNCTION__);
if (get_option(SLPLUS_PREFIX.'_disable_search') == 0) {
// Find Button Is An Image
//
if ($this->slplus->settings->get_item('disable_find_image','0','_') === '0') {
$sl_theme_base=SLPLUS_UPLOADURL."/images";
$sl_theme_path=SLPLUS_UPLOADDIR."/images";
if (!file_exists($sl_theme_path."/search_button.png")) {
$sl_theme_base=SLPLUS_PLUGINURL."/images";
$sl_theme_path=SLPLUS_PLUGINDIR."/images";
}
$sub_img=$sl_theme_base."/search_button.png";
$mousedown=(file_exists($sl_theme_path."/search_button_down.png"))?
"onmousedown=\"this.src='$sl_theme_base/search_button_down.png'\" onmouseup=\"this.src='$sl_theme_base/search_button.png'\"" :
"";
$mouseover=(file_exists($sl_theme_path."/search_button_over.png"))?
"onmouseover=\"this.src='$sl_theme_base/search_button_over.png'\" onmouseout=\"this.src='$sl_theme_base/search_button.png'\"" :
"";
$button_style=(file_exists($sl_theme_path."/search_button.png"))?
"type='image' class='slp_ui_image_button' src='$sub_img' $mousedown $mouseover" :
"type='submit' class='slp_ui_button'";
// Find Button Image Is Disabled
//
} else {
$button_style = 'type="submit" class="slp_ui_button"';
}
// TODO: find_button_label get_option should move to Enhanced Search
$string = "<div id='radius_in_submit'><button type=\"submit\" id=\"addressSubmit\" class=\"slp_ui_button\"><div class=\"button-inner\" >Find A Store</div></button></div>";
return $string;
}
return '';
}
You can see that two or three lines from the bottom, just before the closing bracket of the function, I wrote a variable named $string with the string value being the html of the button, which is wrapped in a div with an id='radius_in_submit'.
Now, here is the html output of the button:
<div id='radius_in_submit'><button type="submit" id="addressSubmit" class="slp_ui_button"></p>
<div class="button-inner" >Find A Store</div>
<p></button></div>
</p>
</div>
You can see that the "p" tags totally don't belong there.
What have I tried...I have tried many variations on adding the remove_filter('the_content','wpautop'); in the theme's functions.php file, but that has never really worked for me on anything for some reason.
Here is the latest code I tried, inserted just before the closing ?> in my functions.php file:
function rm_wpautop($content) {
global $post;
// Remove the filter
remove_filter('the_content', 'wpautop');
return $content;
}
// Hook into the Plugin API
add_filter('the_content', 'rm_wpautop', 9);
...but it doesn't solve my problem. The button does work, I could leave it alone, but I can't stand those p tag insertions.
Development url where you can see it: store locator

Change Wordpress feed <link> for one specific tag

I have an external page that reads a RSS feed for a tag. I can't change anything on the external page, so the challenge is to change the RSS feed on my side to match the requirements.
On the external page the 3 latest posts for a tag are shown, and at the end of the section (note: not after each post but after all 3 posts) there is a "View all" link. This link receives its value from the element in the feed, which is by default set to my blog homepage, e.g. http://myblog.com). For this specific tag the link should be http://myblog.com/tag/myspecialtag.
The requirement is that the "View all" link links to the tag page instead of the homepage.
My idea was to add a condition to the element to change the URL for this specific category. I tried to change the feed template as recommended here: Customizing feeds, but for some reason it doesn't change the template at all. The code I tried is the following:
remove_all_actions( 'do_feed_rss2' );
add_action( 'do_feed_rss2', 'change_feed_rss2', 10, 1 );
function change_feed_rss2( $for_comments ) {
$rss_template = get_template_directory() . '/feeds/feed-custom_rss2.php';
if( file_exists( $rss_template ) )
load_template( $rss_template );
else
do_feed_rss2( $for_comments ); // Call default function
}
Of course I created the custom feed template and stored it in the feeds directory in my theme.
As this didn't work I tried looking into filters/hooks but I couldn't find anything helpful regarding my issue. Any ideas on how to best solve this issue?
I came up with the following solution:
I created a new custom page template custom_rss-feed.php and copied the code from wp-includes/feed-rss.php into it. I assigned this template to a new page. Additionally I added a filter to get_bloginfo_rss like the following:
function alter_bloginfo_rss($value, $key) {
if ( $key === "url" &&
is_page_template("custom_rss-feed.php")
) {
return $value . "/my/custom/url";
}
return $value;
}
add_filter("get_bloginfo_rss", "alter_bloginfo_rss", 10, 2);

Resources