Currently the Edit Account Details page have these fields: First Name, Last Name, Email address, Current Password & New Password. Now I need to overwrite the 'Save Changes' button which basically submits the form to update the user details. Before the form is being submitted, I want to do a javascript-based validation which checks the user's new password. How can I do this?
Btw I'm using WooCommerce, if that matters here.
You can use woocommerce_edit_account_form_end action to inject your custom JS snippet and do your validation.
like this
function add_my_account_edit_script() { ?>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$("form.edit-account").submit(function(){
var old_pass = $("#password_1").val();
var new_pass = $("#password_2").val();
if( old_pass != new_pass ) {
// Show your validation message here
// return false to prevent the form submitting
return false;
}
// no validation error so allow the form to be submitted.
return false;
});
});
})(jQuery);
</script>
<?php
}
add_action( 'woocommerce_edit_account_form_end', 'add_my_account_edit_script' );
Related
I found this question about how to return a custom validation error on form submit. This works for individual field errors, but how do I return a generic form error not pertaining to a particular field? I want to return a custom form submission error that appears above the submit button. The error I want to return doesn't have anything to do with a specific field, so I want to send back a generic error message that just shows at the bottom of the form.
There's no documentation on this that I can find.
First set your custom error to $form_data['errors'] in your submit hook.
$form_data['errors'] = ["My Custom Error Message"];
Now you need to display this error using front-end code.
Hook into "submit:response" on the front-end.
var mySubmitController = Marionette.Object.extend({
initialize: function () {
this.listenTo(
Backbone.Radio.channel("forms"),
"submit:response",
this.actionSubmit
);
},
actionSubmit: function (response) {
const errorNotice = document.querySelector(".nf-before-form nf-section");
errorNotice.innerHTML = "";
if (!response.errors || !response.errors.length) {
return;
}
const errors = response.errors;
errorNotice.insertAdjacentHTML(
"afterbegin",
"<strong>Your form submission encountered the following errors:</strong>"
);
errorNotice.insertAdjacentHTML("beforeend", "<ul>");
errors.forEach((error) => {
errorNotice.insertAdjacentHTML("beforeend", `<li>${error}</li>`);
});
errorNotice.insertAdjacentHTML("beforeend", "</ul>");
errorNotice.scrollIntoView({
behavior: "smooth"
});
}
});
jQuery(document).ready(function ($) {
new mySubmitController();
});
I have a created a page that contains a list of reviews. If the user clicks on a name, he will be directed to a page where he can edit the review details if needed.
In order to achieve this I have adapted the methods from the travel approval template.
The names in the list are link widgets that contain the onClick event which I simply adapted from the template to get a quick result. The client script is integrated in the onAttach event of the page.
//button method
if (event.ctrlKey === false && event.metaKey === false) {
event.preventDefault();
app.showPage(app.pages.ReviewDetails);
replaceUrlForEditRequest(widget.datasource.item._key);
}
//client script
function startLoadingEditRequestPage() {
google.script.url.getLocation(function(location) {
var requestId = location.parameter.requestId;
var requestDs = app.datasources.Reviews;
if (requestDs.creating) {
return;
}
if (!requestId) {
app.showPage(app.pages.Dashboard);
return;
}
if (requestDs.loaded && requestDs.query.filters._key._equals === requestId) {
return;
}
requestDs.unload();
requestDs.query.filters._key._equals = requestId;
requestDs.load();
});
}
The handover to the edit page works perfectly. The user will see the review details of the person he has clicked on (ex: Mary Poppins) and not the one who has the active index in the list. If the user clicks on a link "personal information" in the review details page he will be directed to another edit page where he can see other information of the person. For this I have simply amended the method from the template by adding another target page to the history.
function replaceUrlForEditRequest(requestId) {
var params = {
requestId: requestId
};
google.script.history.replace(null, params, app.pages.EditReview.name);
google.script.history.replace(null, params, app.pages.EditReviewDetails.name);
}
But when I duplicate the button method in the link on the review details page, it is not working. I always see the first name in my list and not the one that I had clicked on. How can I fix that?
The issue has been resolved. Although both pages were on the same model, they were not on the same datasource. After setting them to the same datasource, everything works fine.
On wordpress I want to make a post template where if a user clicks on a link it will load the custom field value via ajax. I found a plugin here How to load the custom field values of the post via ajax in wordpress but the download link seems to be dead so I'm unable to download :( can anyone help me code? I'm not a programmer so tell me the easiest solution
In functions.php file
<?php
add_action('wp_ajax_load_custom_field_data','load_custom_field_data');
add_action('wp_ajax_nopriv_load_custom_field_data','load_custom_field_data');
function load_custom_fields_data(){
$postid=$_POST['postid'];
$metakey= $_POST['metakey'];
echo get_post_meta($postid,$metakey,true);
die();
?>
In your template where you will have your link like below(remember to have postid and metakey attributes in the links with class get_meta_val)
<a class="get_meta_val" postid="<?php echo $post->ID?>" metakey ="your_meta_key">Get Custom Value</a>
//get postid in any way you want and put you customfield name in your_meta_key
<script type="text/javascript">
jQuery(document).ready(function(e) {
jQuery(document).one('click','.get_meta_val',function(e){
e.preventDefault();
var pid = jQuery(this).attr('postid');
var metakey = jQuery(this).attr('metakey');
var data = {
'action': 'load_custom_field_data',
'postid': pid,
'metakey':metakey
};
// since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
jQuery.post(ajaxurl, data, function(response) {
alert('Custom Field Value is: ' + response);
//Here you can do whatever you want with your returned value
});
});
});
</script>
I am using #ajax in submit button of a form created using FAPI. Now when user submits the form, I want to run some jQuery validation before the form is submitted through ajax. As #ajax prevents events related to submit button such as submit, click, mousedown, keypress etc. I am not able to catch submit event using jQuery.
For now as a workaround, I have added custom code in ajax.js (misc/ajax.js) :
Drupal.ajax = function (base, element, element_settings) {
...
beforeSubmit: function (form_values, element_settings, options) {
//my custom code
alert(1);
...
This is against drupal best practices as I am hacking the core. Please any one can help me to do the same from my custom js file or any other approach to validate the content before ajax submit.
I think the accepted answer on the following post answers your question: How to extend or "hook" Drupal Form AJAX?
(function($) {
Drupal.behaviors.MyModule = {
attach: function (context, settings) {
// Overwrite beforeSubmit
Drupal.ajax['some_element'].options.beforeSubmit = function (form_values, element, options) {
// ... Some staff added to form_values
}
//Or you can overwrite beforeSubmit
Drupal.ajax['some_element'].options.beforeSerialize = function (element, options) {
// ... Some staff added to options.data
// Also call parent function
Drupal.ajax.prototype.beforeSerialize(element, options);
}
//...
i put this in the attach function
for (var base in settings.ajax) {
Drupal.ajax[base].options.beforeSubmit = function(form_values, element, options){
console.log('call your func');
}
}
it works!
Just playing around with Wordpress / Contact Form 7.
Is it possible to add custom javascript function on successful email send event?
Write this in additional settings at the bottom of the contact form configuration page:
on_sent_ok: "some js code here"
UPDATE:
You can use it to call functions like this:
on_sent_ok: "your_function();"
Or write some code (this one redirects to thank you page):
on_sent_ok: "document.location='/thank-you-page/';"
Contact Form 7 emits a number of Javascript events that bubble up to the document object. In version 4.1 they can be found in contact-form-7/includes/js/scripts.js. If you're using jQuery you can access those events like this:
$(document).on('spam.wpcf7', function () {
console.log('submit.wpcf7 was triggered!');
});
$(document).on('invalid.wpcf7', function () {
console.log('invalid.wpcf7 was triggered!');
});
$(document).on('mailsent.wpcf7', function () {
console.log('mailsent.wpcf7 was triggered!');
});
$(document).on('mailfailed.wpcf7', function () {
console.log('mailfailed.wpcf7 was triggered!');
});
try this:
$( document ).ajaxComplete(function( event,request, settings ) {
if($('.sent').length > 0){
console.log('sent');
}else{
console.log('didnt sent');
}
});
Example 1:
on_sent_ok: "location = 'http://mysite.com/thanks/';"
Example 2:
In form script:
<div id="hidecform">
<p>You name<br />
[text* your-name] </p>
...
</div>
Then at the bottom of the admin page under "Additional Settings" put the following:
on_sent_ok: "document.getElementById('hidecform').style.display = 'none';"
Just a quick note that on_sent_ok is deprecated.
Contact form 7 is now using event listeners, like this;
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '11875' == event.detail.contactFormId ) { // if you want to identify the form
// do something
}
}, true );
</script>
Then add this to the wp_footer action.
like this;
add_action( 'wp_footer', 'wp1568dd4_wpcf7_on_sent' );
function wp1568dd4_wpcf7_on_sent() {
// the script above
}