I have a form that allows the user to change their account info. I added ajax requests to save changes without page refresh. My problem is that I don't want to submit all the fields on the form because some are disabled. So I just want to send some fields. To do this I wrote the code below which is not working, can someone help me figure out what am I wrong ?
Functions.php
// Validate - my account
add_action( 'woocommerce_save_account_details_errors', array( &$errors, &$user ), 1, 10 );
add_action( 'wp_ajax_save_account_details', 'save_account_details' );
function save_account_details( $user_id ) {
if (trim($_POST['account_first_name']) == '') {
$response = wc_print_notices();
} else if ( isset( $_POST['account_first_name'] ) ) {
$response = wc_print_notices();
}
echo json_encode($response);
exit();
}
My form
<form name="Form" class="mts-edit-account" action="<?php echo admin_url('admin-ajax.php'); ?>" method="post" enctype="multipart/form-data" <?php add_action( 'woocommerce_edit_account_form_tag', 'action_woocommerce_edit_account_form_tag' );?> >
<!-- Message section -->
<div class="msg_box"></div>
<!-- Fist & Last Name Field -->
<div class="row name_surname">
<div class="form-row">
<label class="t3" for="account_first_name">Nome *</label>
<input type="text" placeholder="Inserisci il tuo nome" class="field-settings" name="account_first_name" id="account_first_name" value="<?php echo esc_attr( $user->first_name ); ?>" />
</div>
<div class="form-row">
<label class="t3" for="account_last_name">Cognome *</label>
<input type="text" placeholder="Inserisci il tuo cognome" class="field-settings" name="account_last_name" id="account_last_name" value="<?php echo esc_attr( $user->last_name ); ?>" />
</div>
<!-- Save Settings -->
<p style="margin-bottom: 0px!important;">
<?php wp_nonce_field( 'save_account_details', 'save-account-details-nonce' ); ?>
<button type="submit" class="edit-account-button" name="save_account_details" value="<?php esc_attr_e( 'Save changes', 'woocommerce' ); ?>"><?php esc_html_e( 'Salva modifiche', 'woocommerce' ); ?></button>
<input type="hidden" name="action" value="save_account_details" />
</p>
</div>
</form>
Js Code
This is what I am doing to send only specific fields but it doesn't work. When click on submit button nothing happens, there is no ajax request.
jQuery(document).ready(function($) {
$('.mts-edit-account').on('submit', function(e) {
e.preventDefault();
// Specific form field
var $formData = {
name: $("#account_first_name").val(),
lastName: $("#account_last_name").val()
};
//Ajax Save settings
jQuery.ajax({
dataType: "json",
type: "POST",
data: formData,
success: function(data) {
jQuery('.newdiv').html(data);
}
});
});
});
This instead is Js code that sends all fields of the form and works correctly.
jQuery(document).ready(function($) {
$('.mts-edit-account').on('submit', function(e) {
e.preventDefault();
//Ajax Save settings
jQuery.ajax({
type: "POST",
data: jQuery(".mts-edit-account").serialize(),
success: function(data) {
jQuery('.newdiv').html(data);
}
});
});
});