For the dear life of me I cannot figure out how to the prevent the Woocommerce order submit process to allow a card token to be added as hidden input before the form is submitted to be able to post it to order received. The standard e.preventDefault(); does not work here.
var form = jQuery("#form-checkout");
form.addEventListener("submit", function (event) {
event.preventDefault();
// Add token to the form
var tokenInput = document.createElement("input");
tokenInput.setAttribute("name", "token");
tokenInput.setAttribute("type", "hidden");
tokenInput.setAttribute("value", "test");
form.appendChild(tokenInput);
});
Code that gets close:
var form = jQuery("#form-checkout");
form.on('checkout_place_order', function() {
// Add token to the form
var tokenInput = document.createElement("input");
tokenInput.setAttribute("name", "token");
tokenInput.setAttribute("type", "hidden");
tokenInput.setAttribute("id", "token");
tokenInput.setAttribute("value", "test");
form.appendChild(tokenInput);
if(jQuery("#token").length > 0) {
return true;
} else {
return false;
}
});
When returned false, submit is prevented and the field gets added. When returned true, field also gets added but nothing gets posted. This is probably because the field is added after submit but before the ajax call.
The only way I can think of is to first add the field -> return false -> then excute the function again with true. But ofcourse after false nothing runs. What would be a way to approach this? (any help is appreciated)
Related
I need to confirm delete before submit form using javascript, i tried this code but it didnt work :
Delete
You should confirm first before submitting the form. And you need to set a condition whether it returned true or false
Delete
Submit form only when user confirm it otherwise set return false. So your form will not be submitted.
function confirmdelete() {
if (confirm("Are you sure?")) {
// submit form
}
return false;
}
Please check the comments against the code.
$(function () {
//Attach click event to the link. In this case all links
//You might want to update this, make it more specific by using id or name or class of the a tag
$('a').on('click', function (event) {
//prevent the default action of the tag
event.preventDefault();
//confirm
var conf = confirm('Confirm Delete');
if (conf) {
//you action if true
}
else {
return;
}
});
});
I'm pretty new to WordPress, but basically what I'm trying to achieve is to make a tag's description a required field on my custom theme for WordPress 4.5.2
I've tried three approaches, but all of them failed so if anyone WordPress expert out there could guide me would be nice.
Approach #1
functions.php
I've tried to 'edit' the hook when the edit_tag_form_fields and add_tag_form hook is called, then modify via Javascript
function require_category_description(){
require_once('includes/require_category_description.php');
}
add_action('edit_tag_form_fields', 'require_category_description');
add_action('add_tag_form', 'require_category_description');
require_category_description.php
<script>
jQuery(document).ready(function(){
var description = jQuery('#tag-description');
if(!description) description = jQuery('#description');
if(description){
description.parents('form').submit(function(){
if(description.val().trim().length < 1){
console.log('Please enter a description...');
return false;
}
});
}
});
</script>
It was not working, the form was submitting even though the description field was empty, and above all, the console.log inside the event listener never happened. I've tried to log the description variable to make sure it's going inside the if case. Therefore, I assumed the form was never submitting, and the whole 'submission' is done via Ajax, on the button click.
Approach #2
The functions.php remains the same as approach #1, but I've made some changes Javascript wise to target the button click event instead of the form submit event.
require_category_description.php
<script>
jQuery(document).ready(function(){
var description = jQuery('#tag-description');
if(!description) description = jQuery('#description');
if(description){
var button = description.parents('form').find('#submit');
button.on('click', function(e){
if(description.val().trim().length < 1)
console.log('Please enter a description...');
e.preventDefault();
return false;
});
}
});
</script>
The form is however still submitting, but this time, I see the console log message.
Please enter a description...
My theory is that WordPress is binding an event to the button's click before my event, so it's processing the built-in event with Ajax before going to my custom click event.
Approach #3
require_category_description.php
I've tried to unbind the click events from my button before adding my own click event.
<script>
jQuery(document).ready(function(){
var description = jQuery('#tag-description');
if(!description) description = jQuery('#description');
if(description){
var button = description.parents('form').find('#submit');
button.unbind('click');
button.on('click', function(e){
if(description.val().trim().length < 1)
console.log('Please enter a description...');
e.preventDefault();
return false;
});
}
});
</script>
The result is the same as approach #2. The form is still submitting, but I see the console log message.
Edit tag:
When editing tag, WordPress call wp_update_term. But there're no filters or AJAX call, so we must use get_term() which is called by wp_update_term():
add_filter('get_post_tag', function($term, $tax)
{
if ( isset($_POST['description']) && empty($_POST['description']) ) {
return new \WP_Error('empty_term_name', __('Tag description cannot be empty!', 'text-domain'));
} else {
return $term;
}
}, -1, 2);
We also need to update term_updated_message to make the error clear:
add_filter('term_updated_messages', function($messages)
{
$messages['post_tag'][5] = sprintf('<span style="color:#dc3232">%s</span>', __('Tag description cannot be empty!', 'text-domain'));
return $messages;
});
Because WordPress hardcoded the notice message div, I used inline css to make the error look like a waring. Change it to your preference.
Add new tag:
The AJAX request calls wp_insert_term so we can use pre_insert_term filter. Try this in your functions.php
add_filter('pre_insert_term', function($term, $tax)
{
if ( ('post_tag' === $tax) && isset($_POST['description']) && empty($_POST['description']) ) {
return new \WP_Error('empty_term_name', __('Tag description cannot be empty!', 'text-domain'));
} else {
return $term;
}
}, -1, 2);
Here I used the built-in empty_term_name error to show notice message but you should register your own one.
Also, take a look at wp_ajax_add_tag to fully understand what we're doing.
Demo:
It's Ajax so you cannot rely on submit event, here is a solution, how you can do.
All you want to do is include form-required class to the parent tag of the particular element, but there is kick on it. their validateForm check only on input tags not on textarea so I have implemented an idea, it works.
Try this
function put_admin_script() { ?>
<script>
jQuery(document).ready(function(){
var description = jQuery('#tag-description');
if( !description ) {
description = jQuery('#description');
}
if( description ) {
description.after( $('<p style="visibility:hidden;" class="form-field form-required term-description-wrap"><input type="text" id="hidden-tag-desc" aria-required="true" value="" /></p>') );
}
description.keyup(function(){
$("#hidden-tag-desc").val( $(this).val() );
});
jQuery("#addtag #submit").click(function(){
console.log("Not empty"+description.val().trim().length);
if( description.val().trim().length < 1 ) {
description.css( "border", "solid 1px #dc3232" );
} else {
description.css( "border", "solid 1px #dddddd" );
}
});
});
</script>
<?php
}
add_action('admin_footer','put_admin_script');
I have a hidden input field like this in jade:
input(name='saintForm[quotes][]', type='hidden')
I want to use jquery to add to this array from a dynamic unordered list, but not sure how. Here's my failing attempt:
$('#form').on('submit', function(e){
e.preventDefault();
$('.quote').each(function (i){
var item = $(this).text().replace(' (x)','');
$("input[name='saintForm[quotes][]']").push(item);
});
this.submit();
});
If you're just adding a value to the default form functionality you could create an input with a value.
// grab your form and wrap it in jQuery
var myForm = $('#form');
// list teo the submit event
myForm.on('submit', function(e) {
e.preventDefault();
$('li.quote').each(function() {
$('<input />', {
type: 'text', // input type
name: 'saintForm[quotes][]', // the name of the form input
value: $(this).text() // the text from the current list-item
}).appendTo(myForm); // append each input to the form
});
myForm.submit(); // submit the form
});
You can of course send all sorts of arbitrary data to the server easily with AJAX but if you are just using the normal form submit I guess this is a good way to do it.
In SilverStripe (3.1.4) I'm doing a complex admin interface for one of my DataObject, where - depending on the DropDown's selected option - one or two TextFields get disabled or enabled for admin input. What I still need to do is to make the appropriate fields required when they get enabled.
I tried the following code which attempts to hook up to the Save button action:
(function ($) {
$.entwine('ss', function () {
$('#Form_ItemEditForm_action_doSave').entwine({
onclick: function (e) {
alert('submitting')
var selectedItem = $('#Form_ItemEditForm_Symbol option:selected').text();
if (selectedItem.indexOf('%1') > -1 && $.trim($('#Form_ItemEditForm_Placeholder1').val()) == '') {
e.preventDefault();
e.stopImmediatePropagation();
return false;
}
}
});
});
})(jQuery);
This does not seem to work - the form still submits, the alert never shows up.
Is there anything I'm missing?
I also tried to add:
Behaviour.register({
'#Form_ItemEditForm' : {
initialize : function() {
this.observeMethod('BeforeSave', this.beforeSave);
},
beforeSave: function() {
alert("You clicked save");
}
}
});
But ever since the form has not been loading at all.
The following code worked as expected, however on the paging click, it still execute and display message "Please select a record first, then press this button". Is there anyway to prevent this unless the export button click. Thank you
$(document).ready(function () {
$("#Product").on("click",function(){
var $exportLink = $('#export');
var href = $exportLink.attr('href');
var grid = $('#Product').data('kendoGrid'); //get a reference to the grid data
var record = grid.dataItem(grid.select()); //get a reference to the currently selected row
if(record !=null)
{
href = href.replace(/refId=([^&]*)/, 'refId='+record.ID);
$exportLink.attr('href', href);
}
else
{
alert("Please select a record first, then press this button")
return false;
}
});
});
Defining a click handler as $("#Product").on("click",function(){...}) you are actually defining it for any click on #Product not just on you Export button. You should define the on for the button and not for the grid