Develop Reference

Insert hidden input on Woocommerce order submit

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)

Event Handler for Input values and select option together

I have multiple input values with one select box option and validating and capturing all data based on keypress event. My issue is get all data input fields and select box and send using keypress event
To find all input values
var all_details = $('.myform');
var all_inputs = all_details.find('input');
var all_details_complete;
to get select values
var Country = $('#country').children("option:selected").val();
Adding few more additional data
var some_data = {
Country: Country, //select box title displaying on image
ReceiveOffers: 0
};
Bind event! With following function I am getting all input field data except select box data. how can I add select change event and have tried following?
all_inputs.on('keypress onchange', function() {
all_details_complete = false;
_.each(all_inputs, function (input) {
var $input = $(input);
all_inputs[$input.attr('name')] = $input.val();
if ($input.val() === '') all_details_complete = false;
});
if (all_details_complete) {
// post data successfully
}
});

That is because there is no onchange event, but a change event instead:
all_inputs.on('keypress change', function() {
// Rest of the code here
};
However, for ease of standardization it's way easier to simply listen to the input event:
all_inputs.on('input', function() {
// Rest of the code here
};

How to discard form changes on button click?

Overview:
I have an HTML form that contains 10 radio buttons and 3 text areas with the following 3 buttons:
Enable Editing: The form input fields are disabled in this case (form fields are enabled/disabled depending on status). This button will enable input fields and will allow changes to be made to the form.
Save: save data to DB.
Cancel: This should "Discard changes" made to the form and restores the original values.
Note: The form gets populated from the DB. On "cancel" click I would like to restore the old data if any changes were made.
Issue: How can I implement an onclick method that will store data temporarily when "enable editing" button is clicked and another method that would restore the old form data(discard changes) when the "Cancel" button is clicked ?
What I have tried so far after looking at a similar question:
$(document).ready(function() {
$('#evaluationFormEdit').click(function() {
$('#evaluationForm').find(':input').each(function(i, elem) {
var input = $(elem);
input.data('initialState', input.val());
});
});
function restore() {
$('#evaluationForm').find(':input').each(function(i, elem) {
var input = $(elem);
input.val(input.data('initialState'));
});
}
$('#evaluationFormEditCancel').click(function() {
restore();
});
});

I replaced two line of code with
$(this).data("previous-value", $(this).val());
I guss this will work for you. here is my demo http://jsfiddle.net/0qL8bky6/
$(document).ready(function() {
$('#evaluationFormEdit').click(function() {
$('#evaluationForm').find(':input').each(function(i, elem) {
$(this).data("previous-value", $(this).val());
});
});
function restore() {
$('#evaluationForm').find(':input').each(function(i, elem) {
$(this).val($(this).data("previous-value"));
});
}
$('#evaluationFormEditCancel').click(function() {
restore();
});
});

In my opinion, save your old data by json variable and restore form when click "Cancel" button.

What you can do that is you can create an array A and when you click on the enable editing button you can store all the value of the field on that array(A) and keys would be the ids of the fields and the value would the fields value, so when you want to put the old values in the fields you can run the each function and put the old values in to the corresponding fields with their respected ids.
Like-
if you have three input fields which have id input1, input2, input3
and when you click on the enable editing button you can do.
var a = [];
$('input[type=text]').each(function(){
a.push({'input1':$('#input1').val(),'input2':$('#input2').val(),'input3':$('#input3').val()});
});
This will have all you old values and when you want to put the old values back to input fields you do like this.
$.each(a,function(key,data){
$('#'+key).val(data);
});

You can use
$('#evaluationFormEditCancel').click(function() {
$('#evaluationForm').find(':input').each(function(i, elem) {
// uncheck all checkbox here to make it default.
$(elem).val("");
});
});

trying to set focus on the form element by its id using after alert message but the jsp page submitted

JavaScript Function:- the function is call on submit buttion.
function getFormElelemets(obj){
var form = $(obj).closest('form'); // id of form tag related to the
var formid = form.attr('id');
var name='sampledate'; // id of element for set focus
alert(formid );
document.formid.name.focus();
return false;
}
Problem Statement:- the function get call successfully but after the alert if i press 'ok' the focus not move curser to the form element.servlate get called with and url shows all the paramter with there value.am generating multiple form dynamically with the unique id.Please provide solution.

Just use a jQuery id selector # and .focus() function:
function getFormElelemets(obj){
var form = $(obj).closest('form');
var formid = form.attr('id');
var name = '#sampledate'; // id's starts with '#'
alert(formid);
$(name).focus(); // select element with jQuery and set focus
return false;
}

Run JavaScript function on every input field

I have a huge form with several input fields. This is a Balance and a Profit & Loss sheet, so the input text fields has to be formatted as "money". I found some nice jQuery plugin to do the formatting: accounting JS, but right now I have to call it manually on all the fields and this is not the best method I think...
How can I call the accounting.formatMoney() function on ALL the input text fields on keydown?
So if there is a KeyDown or KeyUp event on the FORM or BODY, the script will find ALL the input fields and execute the script.
This is the formatting and the Javascript function I want to call on every INPUT text field:
var options = {
symbol : "",
thousand: " ",
precision : 0,
format: "%v%s"
};
var tmp = parseInt(document.getElementById('input_id').value, 10);
document.getElementById('input_id').value = accounting.formatMoney(tmp, options);
The form is sent back to BODY via AJAX, so I think the best method would be to call the function this way:
$(document).ready(function(){
$('body').on('keyup', 'input', function(e){
// collect all input fields and execute the function
});
});
Thank you very much for the help!

You might do
$(document).ready(function(){
$('body').on('keyup', 'input', function(){
$(this).val(accounting.formatMoney($(this).val(), options));
});
});
But this supposes your users would like the input to be modified while they're typing.
If you want to have the input modified when the users leave the field or type 'enter', do this :
$(document).ready(function(){
$('body').on('blur change', 'input', function(){
$(this).val(accounting.formatMoney($(this).val(), options));
});
});
Note that in a real world application I would have a class on my inputs to make the selector more selective ('input.money' instead of 'input').
EDIT :
If you want to apply this to the inputs in a table whose id is bstable, do
$(document).ready(function(){
$('#bstable').on('blur change', 'input', function(){
$(this).val(accounting.formatMoney($(this).val(), options));
});
});
If the bstable table is obtained via ajax and isn't immediately here, you may do
$(document).ready(function(){
$(document.body).on('blur change', '#bstable input', function(){
$(this).val(accounting.formatMoney($(this).val(), options));
});
});

$('body').on('keyup', 'input', function(){
$("body").find("input").each(function(index, element){
$(element).val(accounting.formatMoney($(element).val(), options));
});
});