Develop Reference

How to submit form without ID in PHP oops

I'm new in Moodle development I'm stuck in Moodle form submission.
Mustache Template Code
<button type="button" onclick="request_access(this)" id="{{ data }}"
class="btn btn-primary col mr-1" data-action="save">
{{#str}} savechanges {{/str}}</button>
Form created in PHP
$editorhtml = '';
$editor = editors_get_preferred_editor();
$editor->use_editor("usernotes", array('autosave' => false));
$editorhtml .= html_writer::start_tag('div', array('class' => 'ltoolusernotes'));
$editorhtml .= html_writer::start_tag('form', array('method' => 'post', 'action' => $args['pageurl'], 'id' => 'notes-from', 'class' => 'mform'));
$editorhtml .= html_writer::tag(
'textarea',
'',
array('id' => "usernotes", 'name' => 'ltnoteeditor', 'class' => 'form-group', 'rows' => 20, 'cols' => 100)
);
$editorhtml .= html_writer::tag('input', '', array(
'type' => 'hidden',
'name' => 'course',
'value' => $args['course'],
));
$editorhtml .= html_writer::tag('input', '', array(
'type' => 'hidden',
'name' => 'contextid',
'value' => $args['contextid'],
));
$editorhtml .= html_writer::tag('input', '', array(
'type' => 'hidden',
'name' => 'contextlevel',
'value' => $args['contextlevel'],
));
$editorhtml .= html_writer::tag('input', '', array(
'type' => 'hidden',
'name' => 'pagetype',
'value' => $args['pagetype'],
));
$editorhtml .= html_writer::tag('input', '', array(
'type' => 'hidden',
'name' => 'pagetitle',
'value' => $args['pagetitle'],
));
$editorhtml .= html_writer::tag('input', '', array(
'type' => 'hidden',
'name' => 'pageurl',
'value' => $args['pageurl'],
));
$editorhtml .= html_writer::tag('input', '', array(
'type' => 'hidden',
'name' => 'user',
'value' => $args['user'],
));
$editorhtml .= html_writer::end_tag('form');
$editorhtml .= html_writer::end_tag('div');
$editorhtml .= ltool_note_load_context_notes($args);
Firstly, I'm confused, button and form both are located in different locations nevertheless they are connected how?
So I can't use the form id in the button's file.
I have tried a solution which is reload()(event) the page on reload data submit but sometimes reload event is fired before the form submission. so data can't submit.
what is the solution? I want to solve it using JS.

Display WordPress search results based on the selected Sub-Category

I'm trying to create a search using dropdowns in WordPress.
I've got two dropdowns, 1 - Parent Category and 1 - Sub-category.
The Sub-category will show automatically based on the selected Parent category.
My goal is to have the 2 dropdowns with a submit button and have it act as a search, displaying the selected sub-category's posts on the results page.
I've got this far using research but I'm completely lost and struggling as you can see.
Below is my functions.php code used for the search:
// FUNCTIONS.PHP
// Drop-down Ajax call
add_action('wp_ajax_my_special_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');
function my_action_callback() {
if(isset($_POST['main_catid'])) {
$categories = get_categories('child_of='.$_POST['main_catid'].'&hide_empty=0');
foreach ($categories as $cat) {
$option .= '<option value="'.$cat->term_id.'">';
$option .= $cat->cat_name;
$option .= ' ('.$cat->category_count.')';
$option .= '</option>';
}
echo '<option value="-1" selected="selected">Search...</option>'.$option;
die();
} // end if
}
// Define search for sub-category
function search_filter( $query ) {
// only modify your custom search query.
if ( $query->is_search && $_post['my_search'] == "c_search") {
$args = array(
'relation' => 'AND',
array(
'taxonomy' => 'category',
'field' => 'id',
'terms' => array( $_post['main_cat']),
'operator' => 'IN'
),
array(
'taxonomy' => 'category',
'field' => 'id',
'terms' => array( $_post['sub_cat']),
'operator' => 'IN'
)
);
$query->set( 'tax_query', $args);
}
return $query;
}
// The hook needed to search_filter
add_filter( 'the_search_query','search_filter');
This is the HTML & JS code used for the form and Ajax call for the sub-categories:
<!-- BODY HTML CODE -->
<div id="content">
<!-- Search form-->
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<div>
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
<?php
wp_dropdown_categories('show_count=0&selected=-1&hierarchical=1&depth=1&hide_empty=0&exclude=1&show_option_none=Main Categories&name=main_cat');
?>
<select name="sub_cat" id="sub_cat" enabled="disabled"></select>
<input type="hidden" id="my_search" name="my_search" value="c_search" />
<input type="submit" id="searchsubmit" value="search" />
</div>
</form>
<!-- Dropdown Ajax call script -->
<script type="text/javascript">
jQuery(function() {
jQuery('#main_cat').change(function() {
var $mainCat = jQuery('#main_cat').val();
// call ajax
jQuery("#sub_cat").empty();
jQuery.ajax({
url: "wp-admin/admin-ajax.php",
type: 'POST',
data: 'action=my_special_action&main_catid=' + $mainCat,
success: function(results) {
// alert(results);
jQuery("#sub_cat").removeAttr("disabled");
jQuery("#sub_cat").append(results);
}
});
});
});
</script>
</div>

the_search_query filter is not for that purpose. Use pre_get_posts filter instead.
Try this code:
// Define search for sub-category
function search_filter( $query ) {
// only modify your custom search query.
if ( $query->is_search && !is_admin() && $_post['my_search'] == "c_search" ) {
$args = array(
'relation' => 'AND',
array(
'taxonomy' => 'category',
'field' => 'id',
'terms' => array( $_post['main_cat']),
'operator' => 'IN'
),
array(
'taxonomy' => 'category',
'field' => 'id',
'terms' => array( $_post['sub_cat']),
'operator' => 'IN'
)
);
$query->set( 'tax_query', $args);
}
return $query;
}
add_filter( 'pre_get_posts', 'search_filter' );

Add Custom Checkout Field (user input) to Order Data and User Meta

I made this code to give user the possibility to add more user data during the checkout field
(inspired by code posted here in Stackoverflow, however I can't find the source anymore)
PHP in functions.php:
add_action('woocommerce_before_order_notes','checkout_sections');
function checkout_sections(){
echo '<div>';
echo '<h3>'. __( 'Add New Member', 'woocommerce' ).'</h3>';
echo '<div class="row" id="readroot">';
echo '<label for="fullname[]">Name and Surname</label>';
echo '<div class="col-lg-2">';
echo '<div class="md-form form-sm new_row">';
echo '<input type="text" name="fullname[]" id="newfullname" placeholder="Name and Surname" class="form-control" required>';
echo '</div>';
echo '</div>';
echo '<br>';
echo '<label for="ALIMCode[]">A.L.IM. Membership Code</label>';
echo '<div class="col-lg-2">';
echo '<div class="md-form form-sm new_row">';
echo '<input type="text" name="ALIMCode[]" id="newalimcode" placeholder="A.L.IM. Membership Code" class="form-control" required>';
echo '</div>';
echo '</div>';
echo '<br>';
echo '<div class="col-lg-2">';
echo '<div class="md-form form-sm">';
echo '<a id="moreFields" class=" moreFields btn btn-sm btn-primary waves-effect waves-light">Click to Add new A.L.IM. Member</a>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '<br>';
echo '<div class="row" id="writeroot"></div>';
echo '<div class="btn btn-sm btn-danger waves-effect waves-light pull-right" onclick="this.parentNode.parentNode;"><br>';
}
Here's Javascript code to clone the section.
JS:
var counter = 0;
//document.getElementById('moreFields').onclick = moreFields;
window.onload = loadEventListener();
function loadEventListener() {
let addRowAnchorTags = document.getElementsByClassName('moreFields');
for(i=0;i<addRowAnchorTags.length; i++) {
addRowAnchorTags[i].onclick = moreFields;
}
}
function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'row';
var newField = newFields.childNodes;
for (var i = 0; i < newField.length; i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields, insertHere);
setTimeout(function() {loadEventListener();})
}
//window.onload = moreFields;
Here's the result during the checkout phase:
WHAT I WANT TO ACCOMPLISH
I want to add this data in my backend when I see the order (woocommerce-order-data) and in the user meta data, here's the mockup in the picture below:
WHAT I'M DOING RIGHT NOW TO STORE DATA IN THE USER META DATA
Right now, when guests are making an order, the code in functions.php will make a new user and add all the custom fields in the user meta and order data.
Here's the code I'm using:
// create account when buy
function action_woocommerce_thankyou( $order_id ) {
// Determines whether the current visitor is a logged in user.
if ( is_user_logged_in() ) return;
// Get $order object
$order = wc_get_order( $order_id );
// Get the user email from the order
$order_email = $order->billing_email;
// Check if there are any users with the billing email as user or email
$email = email_exists( $order_email );
$user = username_exists( $order_email );
// If the UID is null, then it's a guest checkout (new user)
if ( $user == false && $email == false ) {
// Random password with 12 chars
$random_password = wp_generate_password();
// Firstname
$first_name = $order->get_billing_first_name();
// Lastname
$last_name = $order->get_billing_last_name();
// Role
$role = 'customer'; //'customer'
// Company Name
$companys = $order->get_billing_company();
// payment method (luca)
$paymentuser = $order->get_payment_method_title();
// Username (luca)
$usernames = $first_name.$last_name.$companys;
// Create new user with email as username, newly created password and userrole
$user_id = wp_insert_user(
array(
'user_email' => $order_email, //$order_mail
'user_login' => $usernames,
'user_pass' => $random_password,
'first_name' => $first_name,
'last_name' => $last_name,
'role' => $role,
)
);
// Get all WooCommerce emails Objects from WC_Emails Object instance
$emails = WC()->mailer()->get_emails();
// Send WooCommerce "Customer New Account" email notification with the password
$emails['WC_Email_Customer_New_Account']->trigger( $user_id, $random_password, true );
// (Optional) WC guest customer identification
//update_user_meta( $user_id, 'guest', 'yes' );
//codice per recuperare url file upload
//$codedocu = $order->review_order_before_submit_upload_distinta_di_pagamento;
//$urldocu = 'https://alimdigital.org/?checkout_fields_get=';
//$urldocufine = '&checkout_fields_nonce=318982cbce';
//$codefinal = $urldocu.$codedocu.$urldocufine;
//$codedocu2 = $order->review_order_before_submit_upload_documento_identita;
//$codedocu3 = $order->review_order_before_submit_upload_selfie_con_documento_identita;
//$codedocu4 = $order->review_order_before_submit_upload_visura_camerale;
//$codedocu5 = $order->review_order_before_submit_upload_proposta_di_statuto;
//$codefinales = $urldocu.$codedocu2.$urldocufine;
//$codeselfie = $urldocu.$codedocu3.$urldocufine;
//$codevisura = $urldocu.$codedocu4.$urldocufine;
//$codestatuto = $urldocu.$codedocu5.$urldocufine;
// User's billing data
update_user_meta( $user_id, 'billing_tipologia_iscritto', $order->billing_tipologia_iscritto );
update_user_meta( $user_id, 'billing_nazione_sede_alim_di_riferimento', $order->billing_nazione_sede_alim_di_riferimento );
update_user_meta( $user_id, 'billing_sede_alim_di_riferimento', $order->billing_sede_alim_di_riferimento );
update_user_meta( $user_id, 'billing_categoria_socio', $order->billing_categoria_socio);
update_user_meta( $user_id, 'billing_address_1', $order->billing_address_1 );
update_user_meta( $user_id, 'billing_address_2', $order->billing_address_2);
update_user_meta( $user_id, 'billing_city', $order->billing_city );
update_user_meta( $user_id, 'billing_company', $order->billing_company );
update_user_meta( $user_id, 'billing_codice_ateco_codice_nace', $order->billing_codice_ateco_codice_nace );
update_user_meta( $user_id, 'billing_country', $order->billing_country );
update_user_meta( $user_id, 'billing_email', $order->billing_email );
update_user_meta( $user_id, 'billing_first_name', $order->billing_first_name );
update_user_meta( $user_id, 'billing_last_name', $order->billing_last_name );
update_user_meta( $user_id, 'billing_data_di_nascita', $order->billing_data_di_nascita );
update_user_meta( $user_id, 'billing_phone', $order->billing_phone );
update_user_meta( $user_id, 'billing_postcode', $order->billing_postcode );
update_user_meta( $user_id, 'billing_state', $order->billing_state );
update_user_meta( $user_id, 'billing_tipologia_territoriale_di_sede_alim_richiesta', $order->billing_tipologia_territoriale_di_sede_alim_richiesta );
update_user_meta( $user_id, 'billing_nazione', $order->billing_nazione);
update_user_meta( $user_id, 'billing_provincia', $order->billing_provincia);
update_user_meta( $user_id, 'billing_citta', $order->billing_citta);
update_user_meta( $user_id, 'billing_indirizzo', $order->billing_indirizzo);
update_user_meta( $user_id, 'billing_cap', $order->billing_cap);
update_user_meta( $user_id, 'billing_nazione_di_rilascio', $order->billing_nazione_di_rilascio);
update_user_meta( $user_id, 'billing_ente_di_rilascio', $order->billing_ente_di_rilascio);
update_user_meta( $user_id, 'billing_numero_documento', $order->billing_numero_documento);
update_user_meta( $user_id, 'billing_data_rilascio_documento', $order->billing_data_rilascio_documento );
update_user_meta( $user_id, 'billing_data_scadenza_documento', $order->billing_data_scadenza_documento );
update_user_meta( $user_id, 'billing_nome_cognome_presidente', $order->billing_nome_cognome_presidente );
update_user_meta( $user_id, 'billing_codice_iscrizione_alim', $order->billing_codice_iscrizione_alim );
update_user_meta( $user_id, 'billing_nome_cognome_vicepresidente', $order->billing_nome_cognome_vicepresidente );
update_user_meta( $user_id, 'billing_codice_iscrizione_alim2', $order->billing_codice_iscrizione_alim2 );
update_user_meta( $user_id, 'billing_nome_cognome_segretario', $order->billing_nome_cognome_segretario );
update_user_meta( $user_id, 'billing_codice_iscrizione_alim22', $order->billing_codice_iscrizione_alim22 );
update_user_meta( $user_id, 'billing_nome_cognome_tesoriere', $order->billing_nome_cognome_tesoriere );
update_user_meta( $user_id, 'billing_codice_iscrizione_alim222', $order->billing_codice_iscrizione_alim22 );
update_user_meta( $user_id, 'billing_nome_cognome_consigliere', $order->billing_nome_cognome_consigliere );
update_user_meta( $user_id, 'billing_codice_iscrizione_alim2222', $order->billing_codice_iscrizione_alim2222 );
// Link past orders to this newly created customer
wc_update_new_customer_past_orders( $user_id );
// Auto login
wp_set_current_user( $user_id );
wp_set_auth_cookie( $user_id );
}
}
add_action( 'woocommerce_thankyou', 'action_woocommerce_thankyou', 10, 1 );
function filter_woocommerce_thankyou_order_received_text( $str, $order ) {
// Determines whether the current visitor is a logged in user.
if ( is_user_logged_in() ) return;
// Get the user email from the order
$order_email = $order->billing_email;
// Check if there are any users with the billing email as user or email
$email = email_exists( $order_email );
$user = username_exists( $order_email );
// If the UID is null, then it's a guest checkout (new user)
if ( $user == false && $email == false ) {
// Link
$link = get_permalink( get_option( 'woocommerce_myaccount_page_id' ) );
// Format
$format_link = 'logged in';
// Append to orginal string
$str .= sprintf( __( ' An account has been automatically created for you and you are now %s. You will receive an email about this.', 'woocommerce' ), $format_link );
}
return $str;
}
add_filter( 'woocommerce_thankyou_order_received_text', 'filter_woocommerce_thankyou_order_received_text', 10, 2 );
If I made a mistake in providing the infos, let me know! Thanks in advance

I resolved this issue!
Here's what I've done
I made all the sections I needed not visible and with Javascript I made them appear by click. Every field completed is saved in the order data.
Here's the JS (first snippet) and php (second snippet) code:
window.onload = loadEventListener();
function loadEventListener() {
let addRowAnchorTags = document.getElementsByClassName('myFunction');
for(i=0;i<addRowAnchorTags.length; i++) {
addRowAnchorTags[i].onclick = moreFields;
}
}
function loadEventListener2() {
let addRowAnchorTags = document.getElementsByClassName('myFunction2');
for(i=0;i<addRowAnchorTags.length; i++) {
addRowAnchorTags[i].onclick = moreFields;
}
}
function loadEventListener3() {
let addRowAnchorTags = document.getElementsByClassName('myFunction3');
for(i=0;i<addRowAnchorTags.length; i++) {
addRowAnchorTags[i].onclick = moreFields;
}
}
function loadEventListener4() {
let addRowAnchorTags = document.getElementsByClassName('myFunction4');
for(i=0;i<addRowAnchorTags.length; i++) {
addRowAnchorTags[i].onclick = moreFields;
}
}
function loadEventListener5() {
let addRowAnchorTags = document.getElementsByClassName('myFunction5');
for(i=0;i<addRowAnchorTags.length; i++) {
addRowAnchorTags[i].onclick = moreFields;
}
}
function loadEventListener6() {
let addRowAnchorTags = document.getElementsByClassName('myFunction6');
for(i=0;i<addRowAnchorTags.length; i++) {
addRowAnchorTags[i].onclick = moreFields;
}
}
function loadEventListener7() {
let addRowAnchorTags = document.getElementsByClassName('myFunction7');
for(i=0;i<addRowAnchorTags.length; i++) {
addRowAnchorTags[i].onclick = moreFields;
}
}
function loadEventListener8() {
let addRowAnchorTags = document.getElementsByClassName('myFunction8');
for(i=0;i<addRowAnchorTags.length; i++) {
addRowAnchorTags[i].onclick = moreFields;
}
}
function loadEventListener9() {
let addRowAnchorTags = document.getElementsByClassName('myFunction9');
for(i=0;i<addRowAnchorTags.length; i++) {
addRowAnchorTags[i].onclick = moreFields;
}
}
function loadEventListener10() {
let addRowAnchorTags = document.getElementsByClassName('myFunction10');
for(i=0;i<addRowAnchorTags.length; i++) {
addRowAnchorTags[i].onclick = moreFields;
}
}
function myFunction() {
var x = document.getElementById("newmember");
if (x.style.display === "none") {
x.style.display = "block";
} endif
}
function myFunction2() {
var x = document.getElementById("newmember2");
if (x.style.display === "none") {
x.style.display = "block";
} endif
}
function myFunction3() {
var x = document.getElementById("newmember3");
if (x.style.display === "none") {
x.style.display = "block";
} endif
}
function myFunction4() {
var x = document.getElementById("newmember4");
if (x.style.display === "none") {
x.style.display = "block";
} endif
}
function myFunction5() {
var x = document.getElementById("newmember5");
if (x.style.display === "none") {
x.style.display = "block";
} endif
}
function myFunction6() {
var x = document.getElementById("newmember6");
if (x.style.display === "none") {
x.style.display = "block";
} endif
}
function myFunction7() {
var x = document.getElementById("newmember7");
if (x.style.display === "none") {
x.style.display = "block";
} endif
}
function myFunction8() {
var x = document.getElementById("newmember8");
if (x.style.display === "none") {
x.style.display = "block";
} endif
}
function myFunction9() {
var x = document.getElementById("newmember9");
if (x.style.display === "none") {
x.style.display = "block";
} endif
}
function myFunction10() {
var x = document.getElementById("newmember10");
if (x.style.display === "none") {
x.style.display = "block";
} endif
}
//
add_action('woocommerce_after_order_notes', 'customise_checkout_field', 20, 1 );
function customise_checkout_field( $checkout ){
$domain = 'woocommerce';
echo '<a onclick="myFunction()" class=" moreFields btn btn-sm btn-primary waves-effect waves-light">Click to Add new A.L.IM. Member</a>';
echo '<div id="newmember" style="display:none">
<h3>' . __( 'New Member', $domain ) . '</h3>';
woocommerce_form_field( '01_new_role', array(
'type' => 'text',
'class' => array( '01_new_role form-row-wide' ),
'label' => __( 'Role', $domain ) ,
), $checkout->get_value('01_new_role') );
woocommerce_form_field( '01_new_fullname', array(
'type' => 'text',
'class' => array( '01_new_fullname form-row-wide' ),
'label' => __( 'Name and Surname', $domain ) ,
), $checkout->get_value('01_new_fullname') );
woocommerce_form_field( '01_new_code', array(
'type' => 'text',
'class' => array( '01_new_code form-row-wide' ),
'label' => __( 'A.L.IM. Membership Code', $domain ) ,
), $checkout->get_value('01_new_code') );
echo '<div class="col-lg-2">';
echo '<div class="md-form form-sm">';
echo '<a onclick="myFunction2()" class=" moreFields btn btn-sm btn-primary waves-effect waves-light">Click to Add new A.L.IM. Member</a>';
echo '<br><br>';
echo '</div>';
echo '</div>';
echo '</div>'; // div newmember1 finish
echo '<div id="newmember2" style="display:none">
<h3>' . __( '', $domain ) . '</h3>';
woocommerce_form_field( '02_new_role', array(
'type' => 'text',
'class' => array( '02_new_role form-row-wide' ),
'label' => __( 'Role', $domain ) ,
), $checkout->get_value('02_new_role') );
woocommerce_form_field( '02_new_fullname', array(
'type' => 'text',
'class' => array( '02_new_fullname form-row-wide' ),
'label' => __( 'Name and Surname', $domain ) ,
), $checkout->get_value('02_new_fullname') );
woocommerce_form_field( '02_new_code', array(
'type' => 'text',
'class' => array( '02_new_code form-row-wide' ),
'label' => __( 'A.L.IM. Membership Code', $domain ) ,
), $checkout->get_value('02_new_code') );
echo '<div class="col-lg-2">';
echo '<div class="md-form form-sm">';
echo '<a onclick="myFunction3()" class=" moreFields btn btn-sm btn-primary waves-effect waves-light">Click to Add new A.L.IM. Member</a>';
echo '<br><br>';
echo '</div>'; // div newmember2 finish
echo '<div id="newmember3" style="display:none">
<h3>' . __( '', $domain ) . '</h3>';
woocommerce_form_field( '03_new_role', array(
'type' => 'text',
'class' => array( '03_new_role form-row-wide' ),
'label' => __( 'Role', $domain ) ,
), $checkout->get_value('03_new_role') );
woocommerce_form_field( '03_new_fullname', array(
'type' => 'text',
'class' => array( '03_new_fullname form-row-wide' ),
'label' => __( 'Name and Surname', $domain ) ,
), $checkout->get_value('03_new_fullname') );
woocommerce_form_field( '03_new_code', array(
'type' => 'text',
'class' => array( '03_new_code form-row-wide' ),
'label' => __( 'A.L.IM. Membership Code', $domain ) ,
), $checkout->get_value('03_new_code') );
echo '<div class="col-lg-2">';
echo '<div class="md-form form-sm">';
echo '<a onclick="myFunction4()" class=" moreFields btn btn-sm btn-primary waves-effect waves-light">Click to Add new A.L.IM. Member</a>';
echo '<br><br>';
echo '</div>'; // div newmember3 finish
echo '<div id="newmember4" style="display:none">
<h3>' . __( '', $domain ) . '</h3>';
woocommerce_form_field( '04_new_role', array(
'type' => 'text',
'class' => array( '04_new_role form-row-wide' ),
'label' => __( 'Role', $domain ) ,
), $checkout->get_value('04_new_role') );
woocommerce_form_field( '04_new_fullname', array(
'type' => 'text',
'class' => array( '04_new_fullname form-row-wide' ),
'label' => __( 'Name and Surname', $domain ) ,
), $checkout->get_value('04_new_fullname') );
woocommerce_form_field( '04_new_code', array(
'type' => 'text',
'class' => array( '04_new_code form-row-wide' ),
'label' => __( 'A.L.IM. Membership Code', $domain ) ,
), $checkout->get_value('04_new_code') );
echo '<div class="col-lg-2">';
echo '<div class="md-form form-sm">';
echo '<a onclick="myFunction5()" class=" moreFields btn btn-sm btn-primary waves-effect waves-light">Click to Add new A.L.IM. Member</a>';
echo '<br><br>';
echo '</div>'; // div newmember4 finish
echo '<div id="newmember5" style="display:none">
<h3>' . __( '', $domain ) . '</h3>';
woocommerce_form_field( '05_new_role', array(
'type' => 'text',
'class' => array( '05_new_role form-row-wide' ),
'label' => __( 'Role', $domain ) ,
), $checkout->get_value('05_new_role') );
woocommerce_form_field( '05_new_fullname', array(
'type' => 'text',
'class' => array( '05_new_fullname form-row-wide' ),
'label' => __( 'Name and Surname', $domain ) ,
), $checkout->get_value('05_new_fullname') );
woocommerce_form_field( '05_new_code', array(
'type' => 'text',
'class' => array( '05_new_code form-row-wide' ),
'label' => __( 'A.L.IM. Membership Code', $domain ) ,
), $checkout->get_value('05_new_code') );
echo '<div class="col-lg-2">';
echo '<div class="md-form form-sm">';
echo '<a onclick="myFunction6()" class=" moreFields btn btn-sm btn-primary waves-effect waves-light">Click to Add new A.L.IM. Member</a>';
echo '<br><br>';
echo '</div>';
echo '</div>';
echo '</div>'; // div newmember5 finish
echo '<div id="newmember6" style="display:none">
<h3>' . __( '', $domain ) . '</h3>';
woocommerce_form_field( '06_new_role', array(
'type' => 'text',
'class' => array( '06_new_role form-row-wide' ),
'label' => __( 'Role', $domain ) ,
), $checkout->get_value('06_new_role') );
woocommerce_form_field( '06_new_fullname', array(
'type' => 'text',
'class' => array( '06_new_fullname form-row-wide' ),
'label' => __( 'Name and Surname', $domain ) ,
), $checkout->get_value('06_new_fullname') );
woocommerce_form_field( '06_new_code', array(
'type' => 'text',
'class' => array( '06_new_code form-row-wide' ),
'label' => __( 'A.L.IM. Membership Code', $domain ) ,
), $checkout->get_value('06_new_code') );
echo '<div class="col-lg-2">';
echo '<div class="md-form form-sm">';
echo '<a onclick="myFunction7()" class=" moreFields btn btn-sm btn-primary waves-effect waves-light">Click to Add new A.L.IM. Member</a>';
echo '<br><br>';
echo '</div>';
echo '</div>';
echo '</div>'; // div newmember6 finish
echo '<div id="newmember7" style="display:none">
<h3>' . __( '', $domain ) . '</h3>';
woocommerce_form_field( '07_new_role', array(
'type' => 'text',
'class' => array( '07_new_role form-row-wide' ),
'label' => __( 'Role', $domain ) ,
), $checkout->get_value('07_new_role') );
woocommerce_form_field( '07_new_fullname', array(
'type' => 'text',
'class' => array( '07_new_fullname form-row-wide' ),
'label' => __( 'Name and Surname', $domain ) ,
), $checkout->get_value('07_new_fullname') );
woocommerce_form_field( '07_new_code', array(
'type' => 'text',
'class' => array( '07_new_code form-row-wide' ),
'label' => __( 'A.L.IM. Membership Code', $domain ) ,
), $checkout->get_value('07_new_code') );
echo '<div class="col-lg-2">';
echo '<div class="md-form form-sm">';
echo '<a onclick="myFunction8()" class=" moreFields btn btn-sm btn-primary waves-effect waves-light">Click to Add new A.L.IM. Member</a>';
echo '<br><br>';
echo '</div>';
echo '</div>';
echo '</div>'; // div newmember7 finish
echo '<div id="newmember8" style="display:none">
<h3>' . __( '', $domain ) . '</h3>';
woocommerce_form_field( '08_new_role', array(
'type' => 'text',
'class' => array( '08_new_role form-row-wide' ),
'label' => __( 'Role', $domain ) ,
), $checkout->get_value('08_new_role') );
woocommerce_form_field( '08_new_fullname', array(
'type' => 'text',
'class' => array( '08_new_fullname form-row-wide' ),
'label' => __( 'Name and Surname', $domain ) ,
), $checkout->get_value('08_new_fullname') );
woocommerce_form_field( '08_new_code', array(
'type' => 'text',
'class' => array( '08_new_code form-row-wide' ),
'label' => __( 'A.L.IM. Membership Code', $domain ) ,
), $checkout->get_value('08_new_code') );
echo '<div class="col-lg-2">';
echo '<div class="md-form form-sm">';
echo '<a onclick="myFunction9()" class=" moreFields btn btn-sm btn-primary waves-effect waves-light">Click to Add new A.L.IM. Member</a>';
echo '<br><br>';
echo '</div>';
echo '</div>';
echo '</div>'; // div newmember8 finish
echo '<div id="newmember9" style="display:none">
<h3>' . __( '', $domain ) . '</h3>';
woocommerce_form_field( '09_new_role', array(
'type' => 'text',
'class' => array( '09_new_role form-row-wide' ),
'label' => __( 'Role', $domain ) ,
), $checkout->get_value('09_new_role') );
woocommerce_form_field( '09_new_fullname', array(
'type' => 'text',
'class' => array( '09_new_fullname form-row-wide' ),
'label' => __( 'Name and Surname', $domain ) ,
), $checkout->get_value('09_new_fullname') );
woocommerce_form_field( '09_new_code', array(
'type' => 'text',
'class' => array( '09_new_code form-row-wide' ),
'label' => __( 'A.L.IM. Membership Code', $domain ) ,
), $checkout->get_value('09_new_code') );
echo '<div class="col-lg-2">';
echo '<div class="md-form form-sm">';
echo '<a onclick="myFunction10()" class=" moreFields btn btn-sm btn-primary waves-effect waves-light">Click to Add new A.L.IM. Member</a>';
echo '<br><br>';
echo '</div>';
echo '</div>';
echo '</div>'; // div newmember9 finish
echo '<div id="newmember10" style="display:none">
<h3>' . __( '', $domain ) . '</h3>';
woocommerce_form_field( '10_new_role', array(
'type' => 'text',
'class' => array( '10_new_role form-row-wide' ),
'label' => __( 'Role', $domain ) ,
), $checkout->get_value('10_new_role') );
woocommerce_form_field( '10_new_fullname', array(
'type' => 'text',
'class' => array( '10_new_fullname form-row-wide' ),
'label' => __( 'Name and Surname', $domain ) ,
), $checkout->get_value('10_new_fullname') );
woocommerce_form_field( '10_new_code', array(
'type' => 'text',
'class' => array( '10_new_code form-row-wide' ),
'label' => __( 'A.L.IM. Membership Code', $domain ) ,
), $checkout->get_value('10_new_code') );
echo '</div>'; // div newmember10 finish
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
endif;
}
// Save custom checkout fields in the order meta data
add_action( 'woocommerce_checkout_create_order', 'custom_checkout_fields_in_order_meta_data', 20, 2 );
function custom_checkout_fields_in_order_meta_data( $order, $data ) {
if ( isset($_POST['01_new_role']) && ! empty($_POST['01_new_role']) )
$order->update_meta_data( '01_new_role', sanitize_text_field($_POST['01_new_role']) );
if ( isset($_POST['01_new_fullname']) && ! empty($_POST['01_new_fullname']) )
$order->update_meta_data( '01_new_fullname', sanitize_text_field($_POST['01_new_fullname']) );
if ( isset($_POST['01_new_code']) && ! empty($_POST['01_new_code']) )
$order->update_meta_data( '01_new_code', sanitize_text_field($_POST['01_new_code']) );
if ( isset($_POST['02_new_role']) && ! empty($_POST['02_new_role']) )
$order->update_meta_data( '02_new_role', sanitize_text_field($_POST['02_new_role']) );
if ( isset($_POST['02_new_fullname']) && ! empty($_POST['02_new_fullname']) )
$order->update_meta_data( '02_new_fullname', sanitize_text_field($_POST['02_new_fullname']) );
if ( isset($_POST['02_new_code']) && ! empty($_POST['02_new_code']) )
$order->update_meta_data( '02_new_code', sanitize_text_field($_POST['02_new_code']) );
if ( isset($_POST['03_new_role']) && ! empty($_POST['03_new_role']) )
$order->update_meta_data( '03_new_role', sanitize_text_field($_POST['03_new_role']) );
if ( isset($_POST['03_new_fullname']) && ! empty($_POST['03_new_fullname']) )
$order->update_meta_data( '03_new_fullname', sanitize_text_field($_POST['03_new_fullname']) );
if ( isset($_POST['03_new_code']) && ! empty($_POST['03_new_code']) )
$order->update_meta_data( '03_new_code', sanitize_text_field($_POST['03_new_code']) );
if ( isset($_POST['04_new_role']) && ! empty($_POST['04_new_role']) )
$order->update_meta_data( '04_new_role', sanitize_text_field($_POST['04_new_role']) );
if ( isset($_POST['04_new_fullname']) && ! empty($_POST['04_new_fullname']) )
$order->update_meta_data( '04_new_fullname', sanitize_text_field($_POST['04_new_fullname']) );
if ( isset($_POST['04_new_code']) && ! empty($_POST['04_new_code']) )
$order->update_meta_data( '04_new_code', sanitize_text_field($_POST['04_new_code']) );
if ( isset($_POST['05_new_role']) && ! empty($_POST['05_new_role']) )
$order->update_meta_data( '05_new_role', sanitize_text_field($_POST['05_new_role']) );
if ( isset($_POST['05_new_fullname']) && ! empty($_POST['05_new_fullname']) )
$order->update_meta_data( '05_new_fullname', sanitize_text_field($_POST['05_new_fullname']) );
if ( isset($_POST['05_new_code']) && ! empty($_POST['05_new_code']) )
$order->update_meta_data( '05_new_code', sanitize_text_field($_POST['05_new_code']) );
if ( isset($_POST['06_new_role_role']) && ! empty($_POST['06_new_role_role']) )
$order->update_meta_data( '06_new_role', sanitize_text_field($_POST['06_new_role']) );
if ( isset($_POST['06_new_fullname']) && ! empty($_POST['06_new_fullname']) )
$order->update_meta_data( '06_new_fullname', sanitize_text_field($_POST['06_new_fullname']) );
if ( isset($_POST['06_new_code']) && ! empty($_POST['06_new_code']) )
$order->update_meta_data( '06_new_code', sanitize_text_field($_POST['06_new_code']) );
if ( isset($_POST['07_new_role']) && ! empty($_POST['07_new_role']) )
$order->update_meta_data( '07_new_role', sanitize_text_field($_POST['07_new_role']) );
if ( isset($_POST['07_new_fullname']) && ! empty($_POST['07_new_fullname']) )
$order->update_meta_data( '07_new_fullname', sanitize_text_field($_POST['07_new_fullname']) );
if ( isset($_POST['07_new_code']) && ! empty($_POST['07_new_code']) )
$order->update_meta_data( '07_new_code', sanitize_text_field($_POST['07_new_code']) );
if ( isset($_POST['08_new_role']) && ! empty($_POST['08_new_role']) )
$order->update_meta_data( '08_new_role', sanitize_text_field($_POST['08_new_role']) );
if ( isset($_POST['08_new_fullname']) && ! empty($_POST['08_new_fullname']) )
$order->update_meta_data( '08_new_fullname', sanitize_text_field($_POST['08_new_fullname']) );
if ( isset($_POST['08_new_code']) && ! empty($_POST['08_new_code']) )
$order->update_meta_data( '08_new_code', sanitize_text_field($_POST['08_new_code']) );
if ( isset($_POST['09_new_role']) && ! empty($_POST['09_new_role']) )
$order->update_meta_data( '09_new_role', sanitize_text_field($_POST['09_new_role']) );
if ( isset($_POST['09_new_fullname']) && ! empty($_POST['09_new_fullname']) )
$order->update_meta_data( '09_new_fullname', sanitize_text_field($_POST['09_new_fullname']) );
if ( isset($_POST['09_new_code']) && ! empty($_POST['09_new_code']) )
$order->update_meta_data( '09_new_code', sanitize_text_field($_POST['09_new_code']) );
if ( isset($_POST['10_new_role']) && ! empty($_POST['10_new_role']) )
$order->update_meta_data( '10_new_role', sanitize_text_field($_POST['10_new_role']) );
if ( isset($_POST['10_new_fullname']) && ! empty($_POST['10_new_fullname']) )
$order->update_meta_data( '10_new_fullname', sanitize_text_field($_POST['10_new_fullname']) );
if ( isset($_POST['10_new_code']) && ! empty($_POST['10_new_code']) )
$order->update_meta_data( '10_new_code', sanitize_text_field($_POST['10_new_code']) );
}

how to link Javascript function with wordpress' customize control

I have added a new section in customize section
function select_theme_stylesheet( $wp_customize ){
$wp_customize->add_section( 'theme_stylesheet_selector', array(
'title' => 'Select Color',
'priorty' => 50
));
$wp_customize->add_setting( 'theme_stylesheet_settings', array(
'default' => 'green',
'transport' => 'postMessage'
));
$wp_customize->add_control( new WP_Customize_Control( $wp_customize,'theme_stylesheet_control',array(
'type' => 'radio',
'label' => 'Theme Scheme',
'section' => 'theme_stylesheet_selector',
'settings' => 'theme_stylesheet_settings',
'choices' => array(
'green',
'blue'
),
'selection' => 'colors',
'priorty' => 9
) ));
}
add_action('customize_register', 'select_theme_stylesheet');
And I have the following function in 'customize.preview.js'
wp.customize( 'theme_stylesheet_control', function( value ) {
value.bind( function( newval ) {
alert("hello" + newval);
} );
} );
BUT It's not triggering. Can anyone please tell me what I'm missing.

javascript not hiding form

The error messages on this form ('after') should be getting hidden by default and only showing when the user presses "Register" submit button. However all the error messages are being shown by default - could any help suggest why this isnt working? The javascript file is printing to the console so it can find the file. Ive put the PHP for the form and the javascript below - any help would be very much appreciated, thank you,
This is the PHP to display the form:
<div class="span5 pull-right reg-form hidden">
<?php
echo $this->Form->create('Users.Register', array(
'url' => '/register',
'class' => 'span12 pull-right'));
echo $this->Form->hidden('current_url', array('value' => $this->here));
echo $this->Form->input('username', array(
'class' => 'reg-input',
'label' => array('text' => 'Email:', 'class' => 'reg-label main-color'),
'div' => array('class' => 'span12 reg-div'),
'required' => FALSE,
'after' => '<span class="hidden show-email-err show-err">This email address is already taken</span>
<span class="hidden show-emailvalid-err show-err">This email is not valid</span>'
));
echo $this->Form->input('confirm_username', array(
'class' => 'reg-input',
'label' => array('text' => 'Confirm Email:', 'class' => 'reg-label main-color'),
'div' => array('class' => 'span12 reg-div'),
'required' => FALSE,
'after' => '<span class="hidden show-user-err show-err">Re-email is incorrect</span>'
));
echo $this->Form->input('password', array(
'class' => 'reg-input',
'label' => array('text' => 'Password:', 'class' => 'reg-label main-color'),
'div' => array('class' => 'span12 reg-div'),
'required' => FALSE,
'after' => '<span class="hidden show-pass-long show-err">Password must be at least 6 characters</span>'
));
echo $this->Form->input('confirm_password', array(
'class' => 'reg-input',
'type' => 'password',
'label' => array('text' => 'Confirm Password:', 'class' => 'reg-label main-color'),
'div' => array('class' => 'span12 reg-div'),
'required' => FALSE,
'after' => '<span class="hidden show-pass-err show-err">Re-password is incorrect</span>'
));
echo $this->Form->input('firstname', array(
'class' => 'reg-input',
'label' => array('text' => 'Name:', 'class' => 'reg-label main-color'),
'div' => array('class' => 'span12 reg-div'),
'required' => FALSE,
'after' => '<span class="hidden show-firstname-err show-err">This field must not empty</span>'
));
echo $this->Form->input('lastname', array(
'class' => 'reg-input',
'label' => array('text' => 'Last Name:', 'class' => 'reg-label main-color'),
'div' => array('class' => 'span12 reg-div'),
'required' => FALSE,
'after' => '<span class="hidden show-lastname-err show-err">This field must not empty</span>'
));
?>
<?php echo $this->Form->end(array('label' => 'Register', 'div' => false, 'id' => 'RegSubmit', 'class' => 'btn-sign pull-right')); ?>
</div>
This is the javascript:
(function($){
/** $(document).ready(function(){}) */
$(function(){
console.log('cover');
/*
$('#btn-reg').on('click', function(){
$('#RegisterUsername').val($('#LoginUsername').val());
$('.reg-form').removeClass('hidden');
});
*/
$('#RegSubmit').on('click', function(e) {
//console.log(e);
if($('.show-user-err').attr('class').indexOf('hidden') < 0)
$('.show-user-err').addClass('hidden');
var username = $('#RegisterUsername').val(),
re_username = $('#RegisterConfirmUsername').val(),
password = $('#RegisterPassword').val(),
re_password = $('#RegisterConfirmPassword').val(),
firstname = $('#RegisterFirstname').val(),
lastname = $('#RegisterLastname').val();
var check = 0;
var email_regex = /^([a-z0-9_\.-]+)#([\da-z\.-]+)\.([a-z\.]{2,6})$/;
$.each(user_emails, function(index, value){
if(value==username){
check = 1;
}
});
if(check == 1){
$('.show-err').addClass('hidden');
$('.show-email-err').removeClass('hidden');
return false;
}
if(!email_regex.test(username) || username == '') {
$('.show-err').addClass('hidden');
$('.show-emailvalid-err').removeClass('hidden');
return false;
}
if(username != re_username){
$('.show-err').addClass('hidden');
$('.show-user-err').removeClass('hidden');
return false;
}
if(password.length < 6){
$('.show-err').addClass('hidden');
$('.show-pass-long').removeClass('hidden');
return false;
}
if(password != re_password){
$('.show-err').addClass('hidden');
$('.show-pass-err').removeClass('hidden');
return false;
}
if(firstname == ''){
$('.show-err').addClass('hidden');
$('.show-firstname-err').removeClass('hidden');
return false;
}
if(lastname == ''){
$('.show-err').addClass('hidden');
$('.show-lastname-err').removeClass('hidden');
return false;
}
});
});
})(jQuery);

I'd guess that one of the other classes like show-err has display:block and that's overriding the hidden class. If you inspect the element in either Chrome or Firefox then it should show you the CSS rules that are being applied.