I'm using a bit of JQuery code to create placeholder values for browsers that don't support them natively. The code clears the forms whenever submit is triggered. Unfortunately, my pagination system is using a select dropdown menu with onchange="this.form.submit()" and the code does not empty the forms when this is used. How can I change the following code to work with my select pagination?
function _emptyFormOnSubmit( $elements )
{
var $forms = $elements.closest( 'form' );
$forms.submit( function()
{
var $this = $( this );
// This check avoid processing more than once the same form.
if( $this.data( 'placeHoldize.submitHandlerCalled' ) ) {
return;
}
$this.find( '.placeholder-visible' )
.val( '' )
.data( 'placeHoldize.submitHandlerCalled', true );
} );
return true;
}
maybe this will work :
var $forms = $elements.closest( 'form' );
$forms.find('select[onchange="this.form.submit()"]'.change(function(){
$forms.submit();
})
$forms.submit( function()
it's like your mixing inline attribute event and JQuery event which are based on event handler and are not well connected with inline attribute event.
Maybe (better) in your select onchange you can write :
$(this).closest("form").submit()
Related
I have a form created with Elementor Pro on my WordPress website. After clicking the button, I can process the results in some way using the WordPress backend, but at the same moment the form is reloaded and all fields have default values again. In some cases, this hinders greatly - for example, when you are trying to build a simple web application.
To be specific, let's build the form to add two numbers (this tutorial).
Frontend looks like this:
Adder Form
HTML code for "The result will appear here" element:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery( document ).ready(function( $ ){
jQuery( document ).on('submit_success', function(event, response){
document.getElementById("result").innerHTML = response.data['1'].result;
});
});
</script>
<p id='result'>The result will appear here.</p>
PHP code (in Code Snippets WordPress plugin):
function add_two_numbers($fields) {
$a = $fields['a'];
$b = $fields['b'];
return $a + $b;
}
// A send custom WebHook
add_action( 'elementor_pro/forms/new_record', function( $record, $handler ) {
// make sure its our form
$form_name = $record->get_form_settings( 'form_name' );
if ( 'AdderForm' !== $form_name ) {
return;
}
$raw_fields = $record->get( 'fields' );
$fields = [];
foreach ( $raw_fields as $id => $field ) {
$fields[ $id ] = $field['value'];
}
$output['result'] = add_two_numbers($fields);
$handler->add_response_data( true, $output );
}, 10, 2 );
I've been trying to dig into the Elementor documentation, setting dynamic "default" values, exploring form setting and googling things like "Elementor don't reload form after submit", "Elementor save default values form", etc, but I didn't find anything. Apparently, official Elementor tools does not allow you to do this, which, in my opinion, is quite weird.
I found a solution that I want to share with others, but it doesn't seem intuitive to me. Feel free to comment if you know the better solution or if the new versions of Elementor allow you to do this.
The answer I found is to explicitly return the current values of the form fields and display them using jQuery.
To do this, change the PHP code as follows (CHANGE line):
function add_two_numbers($fields) {
$a = $fields['a'];
$b = $fields['b'];
return $a + $b;
}
// A send custom WebHook
add_action( 'elementor_pro/forms/new_record', function( $record, $handler ) {
// make sure its our form
$form_name = $record->get_form_settings( 'form_name' );
if ( 'AdderForm' !== $form_name ) {
return;
}
$raw_fields = $record->get( 'fields' );
$fields = [];
foreach ( $raw_fields as $id => $field ) {
$fields[ $id ] = $field['value'];
}
$output = $fields; // send input data back to the form to display <- CHANGE
$output['result'] = add_two_numbers($fields);
$handler->add_response_data( true, $output );
}, 10, 2 );
And jQuery script for the HTML element:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery( document ).ready(function( $ ){
jQuery( document ).on('submit_success', function(event, response){
document.getElementById("result").innerHTML = response.data['1'].result;
// display the data of the previous request on the form
$("#form-field-a").value(response.data['1'].a);
$("#form-field-b").value(response.data['1'].b);
});
});
</script>
<p id='result'>The result will appear here.</p>
I want display a div contain some details after successful submission of a form. I am using contact form 7 plugin.. Please help me to do this.
Hi you can use Contact Form 7 DOM Events see this link
https://contactform7.com/dom-events/
below is example of calling alert after your form submission
var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
alert( "Fire!" );
}, false );
and you can also append or place a div after submission as shown in below code,
in below code you have to replace #yourDivId with your desired div id.
var wpcf7Elm = document.querySelector( '.wpcf7' );
var div = '';
div += '<div class="custom_detail_div">';
div += ' .... your details here ..... ';
div += '</div">';
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
jQuery('#yourDivId').html(div);
}, false );
also you can check this also,
https://wordpress.stackexchange.com/questions/282751/how-to-modify-contact-form-7-success-error-response-output
I hope this will help you.
Thanks
I find a solution ......
`<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '33' == event.detail.contactFormId ) { // if you want to identify the form
var hid = document.getElementsByClassName("exp");
// Emulates jQuery $(element).is(':hidden');
if(hid[0].offsetWidth > 0 && hid[0].offsetHeight > 0) {
hid[0].style.visibility = "visible";
}
}
}, true );
</script>`
Here 33 is my form id and exp is class of my div
I'm a WordPress enthusiast, I'm trying to accomplish something but I haven't found a way to.
Here's the deal, I have a form made with Contact Form 7 that I want to extract the values when the form is submitted and use them on the body of a WordPress page for a script I'm running when the form is submitted.
On my functions.php I have:
add_action('wpcf7_mail_sent','save_data_in_variables');
add_action('wpcf7_mail_failed','save_data_in_variables');
function save_data_in_variables($conference_form){
$submission = WPCF7_Submission::get_instance();
if (!$submission){
echo 'Form was not sent';
}
$posted_data = $submission->get_posted_data();
}
function wpc_vc_shortcode( $atts ) {
echo $posted_data['your-name'];
}
add_shortcode( 'name_in_the_form', 'wpc_vc_shortcode');
and on the body of the of the page I have a script running which submits data when the form is submitted but I want to replace the values with the values of the form using shortcode:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
truestats.logEvent('Lead Conference', { id: '[name-in-the-form]' } );
}, false );
</script>
How do I accomplish this? So far no values are showing when I submit the form.
Thank you so much
You can get posted form data in your javascript, There is no need to create shortcode and pass it to javascript. Consider below example
<script>
document.addEventListener( 'wpcf7submit', function( event ) {
if(event.detail.contactFormId == 'CONTACT_FORM_ID'){ // condition for specific form ,replace "CONTACT_FORM_ID"
// with form id you want to use this code for
var inputs = event.detail.inputs;
for ( var i = 0; i < inputs.length; i++ ) {
if ( 'your-name' == inputs[i].name ) {
var name = inputs[i].value;
break;
}
}
truestats.logEvent('Lead Conference', { id: name } );
}
}, false );
</script>
I had used 'wpcf7submit' event instead of 'wpcf7mailsent' event, you can use as per your need.
You can check DOM Events provided by contact form 7 for further reference.
As you guys know in CF7 on_sent_ok command deprecated and scheduled to be abolished by the end of 2017. So I decided to use the new script for redirecting my contact forms with this script provided by CF7
function add_this_script_footer(){ ?>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://websiteurl/thank-you';
}, false );
</script>
<?php }
add_action('wp_footer', 'add_this_script_footer');
but this applies to all contact forms. Since I am using quite different types of forms, may I know how can I exclude one of them from this redirection?
Try this script:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
if (event.detail.contactFormId != '123') { // This would exclude form with id 123
location = 'http://websiteurl/thank-you';
}
}, false );
</script>
Bonus tip: I often do it another way that makes it a bit more flexible. I put a <div class="do-some-action" data-something="foobar" style="display:none;"></div> in the CF7 form itself and then I can put this action in multiple forms if needed..
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
var $cf = $( '#' + event.detail.id );
var $actionDiv = $cf.find( '.do-some-action' );
if ( $actionDiv && $actionDiv.length ) {
// Div with action class found
// We can also extract some data if needed
var something = $actionDiv.data( 'something' );
console.log( 'something = ' + something );
location = 'http://websiteurl/thank-you';
}
}, false );
</script>
I hope this helps!
I'm stuck on making CKEditor inline editing work on jQuery UI, especially on Tabs. Does anyone know how to make it work? Are there any plugins that will make CKEditor work on jQuery UI?
I had a similar issue and it turned out to be due to how the browsers were handling the "hidden" or "disabled" components which had yet to be rendered.
http://ckeditor.com/ticket/9814 gave a example of adding a listener to change the readOnly status when the instance becomes ready.
var ck = CKEDITOR.inline(element);
ck.on( 'instanceReady', function( ev ) {
var editor = ev.editor;
editor.setReadOnly( false );
});
I've been struggling with the same problem since this morning, but I found a fix.
var objCKeditor = new Object({
config: base_url + "library/applications/ckeditor/config.simple.js"
});
var objTab = new Object({
active: false
});
CKEDITOR.disableAutoInline = true;
// Activate your editors when the tabs themselves are activated.
$( ".navigation-tabs" ).on( "tabsactivate", function( event, ui ) {
// Find which tab has been chosen by the user.
objTab.chosen = $(this).tabs('option', 'active');
// Only initialize the editors once...
if ( (objTab.chosen == 3) && (objTab.active == false) ) {
// Loop through the editors.
$( 'div.link-bookmark-comment').each( function() {
// Find the ID for the editor.
objCKeditor.editor = $(this).attr('id');
// ... which is facilitated by this boolean.
objTab.active = true;
CKEDITOR.inline( objCKeditor.editor, { customConfig: objCKeditor.config } );
});
}
} );
So, it would appear that CKEditor does not like to be placed within tabs, or any object which is initially hidden.