I’m building custom WordPress and WooCommerce theme and adding custom plus and minus buttons to Product page quantity field. The buttons do update quantity input's value and I also receive "Item has been added to your cart" notification (on Product page) when I submit Add to Cart. But the cart page doesn’t show any items, neither says the cart is empty.
I can not work out which WooCommerce JS function I’m suppose to hook into, neither how to hook into it. Could I ask for help please?!
Thanks in advance!
My HTML layout:
<div class="quantity">
<label class="quantity__label" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e( 'Quantity:', 'woocommerce' ); ?></label>
<div class="quantity__wrapper">
<input type="button" value="-" class="quantity__button quantity__remove js-qty-remove" />
<input
type="text"
id="<?php echo esc_attr( $input_id ); ?>"
class="input-text qty text quantity__input"
step="<?php echo esc_attr( $step ); ?>"
min="<?php echo esc_attr( $min_value ); ?>"
max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>"
name="<?php echo esc_attr( $input_name ); ?>"
value="<?php echo esc_attr( $input_value ); ?>"
title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ); ?>"
size="4"
pattern="<?php echo esc_attr( $pattern ); ?>"
inputmode="<?php echo esc_attr( $inputmode ); ?>"
aria-labelledby="<?php echo esc_attr( $labelledby ); ?>" />
<input type="button" value="+" class="quantity__button quantity__add js-qty-add" />
</div>
</div>
My custom jQuery function:
function quantityButtons() {
var $qtyAdd = $('.js-qty-add'),
$qtyRemove = $('.js-qty-remove'),
$qtyInput = $('.quantity__input');
$qtyAdd.on('click', addQty);
$qtyRemove.on('click', removeQty);
function addQty() {
var $qtyInput = $('.quantity__input'),
$qtyRemove = $('.js-qty-remove'),
$i = $qtyInput.val();
$i++;
$qtyRemove.attr("disabled", !$i);
$qtyInput.val($i);
}
function removeQty() {
var $qtyInput = $('.quantity__input'),
$qtyRemove = $('.js-qty-remove'),
$i = $qtyInput.val();
if ($i >= 1) {
$i--;
$qtyInput.val($i);
} else {
$qtyRemove.attr("disabled", true);
}
}
$qtyRemove.attr("disabled", !$qtyInput.val());
}
quantityButtons();
Your First code part is made from a customization of global/quantity-input.php Woocommerce template code…
So for testing, I have changed partially that global/quantity-input.php template code with the following (very near to your code):
?>
<div class="quantity">
<label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e( 'Quantity', 'woocommerce' ); ?></label>
<input type="button" value="-" class="qty_button minus" />
<input
type="number"
id="<?php echo esc_attr( $input_id ); ?>"
class="input-text qty text"
step="<?php echo esc_attr( $step ); ?>"
min="<?php echo esc_attr( $min_value ); ?>"
max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>"
name="<?php echo esc_attr( $input_name ); ?>"
value="<?php echo esc_attr( $input_value ); ?>"
title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ); ?>"
size="4"
pattern="<?php echo esc_attr( $pattern ); ?>"
inputmode="<?php echo esc_attr( $inputmode ); ?>"
aria-labelledby="<?php echo esc_attr( $labelledby ); ?>" />
<input type="button" value="+" class="qty_button plus" />
</div>
<?php
Now the necessary CSS and revisited jQuery code functions:
// Minimum CSS to remove +/- default buttons on input field type number
add_action( 'wp_head' , 'custom_quantity_fields_css' );
function custom_quantity_fields_css(){
?>
<style>
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
display: none;
margin: 0;
}
.quantity input.qty {
appearance: textfield;
-webkit-appearance: none;
-moz-appearance: textfield;
}
</style>
<?php
}
add_action( 'wp_footer' , 'custom_quantity_fields_script' );
function custom_quantity_fields_script(){
?>
<script type='text/javascript'>
jQuery( function( $ ) {
if ( ! String.prototype.getDecimals ) {
String.prototype.getDecimals = function() {
var num = this,
match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
if ( ! match ) {
return 0;
}
return Math.max( 0, ( match[1] ? match[1].length : 0 ) - ( match[2] ? +match[2] : 0 ) );
}
}
// Quantity "plus" and "minus" buttons
$( document.body ).on( 'click', '.plus, .minus', function() {
var $qty = $( this ).closest( '.quantity' ).find( '.qty'),
currentVal = parseFloat( $qty.val() ),
max = parseFloat( $qty.attr( 'max' ) ),
min = parseFloat( $qty.attr( 'min' ) ),
step = $qty.attr( 'step' );
// Format values
if ( ! currentVal || currentVal === '' || currentVal === 'NaN' ) currentVal = 0;
if ( max === '' || max === 'NaN' ) max = '';
if ( min === '' || min === 'NaN' ) min = 0;
if ( step === 'any' || step === '' || step === undefined || parseFloat( step ) === 'NaN' ) step = 1;
// Change the value
if ( $( this ).is( '.plus' ) ) {
if ( max && ( currentVal >= max ) ) {
$qty.val( max );
} else {
$qty.val( ( currentVal + parseFloat( step )).toFixed( step.getDecimals() ) );
}
} else {
if ( min && ( currentVal <= min ) ) {
$qty.val( min );
} else if ( currentVal > 0 ) {
$qty.val( ( currentVal - parseFloat( step )).toFixed( step.getDecimals() ) );
}
}
// Trigger change event
$qty.trigger( 'change' );
});
});
</script>
<?php
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
The quantity buttons "plus" and "minus" work perfectly and are displayed this way:
Products are added to cart with the correct quantity:
if you change the quantity field value with plus and minus buttons, the "Update cart" button is activated when any quantity field change.
When you click on "Update cart", the quantities as correctly updated.
/* Show Buttons */
add_action( 'woocommerce_before_add_to_cart_quantity', 'display_quantity_plus' );
function display_quantity_plus() {
echo '<button type="button" class="plus" >+</button>';
}
add_action( 'woocommerce_after_add_to_cart_quantity', 'display_quantity_minus' );
function display_quantity_minus() {
echo '<button type="button" class="minus" >-</button>';
}
//Note: to place minus # left and plus # right replace above add_actions with:
//add_action( 'woocommerce_before_add_to_cart_quantity', 'display_quantity_minus' );
//add_action( 'woocommerce_after_add_to_cart_quantity', 'display_quantity_plus' );
add_action( 'wp_footer', 'add_cart_quantity_plus_minus' );
function add_cart_quantity_plus_minus() {
// Only run this on the single product page
if ( ! is_product() ) return;
?>
<script type="text/javascript">
jQuery(document).ready(function($){
$('form.cart').on( 'click', 'button.plus, button.minus', function() {
// Get current quantity values
var qty = $( this ).closest( 'form.cart' ).find( '.qty' );
var val = parseFloat(qty.val());
var max = parseFloat(qty.attr( 'max' ));
var min = parseFloat(qty.attr( 'min' ));
var step = parseFloat(qty.attr( 'step' ));
// Change the value if plus or minus
if ( $( this ).is( '.plus' ) ) {
if ( max && ( max <= val ) ) {
qty.val( max );
} else {
qty.val( val + step );
}
} else {
if ( min && ( min >= val ) ) {
qty.val( min );
} else if ( val > 1 ) {
qty.val( val - step );
}
}
});
});
</script>
//add css
.single-product div.product form.cart .quantity {
float: none;
margin: 0;
display: inline-block;
}
Related
I'm trying to customize the input buttons, but when I update the amount by the custom buttons, the value doesn't update.
I'm copying overwriting the file in the path: woocommerce-booking/booking-form/number.php
This is another file template that I believe is useful to understand my need: woocommerce-booking/templates/single-product/add-to-cart/booking.php
<p class="form-field form-field-wide <?php echo esc_attr( implode( ' ', $class ) ); ?>">
<label for="<?php echo esc_attr( $name ); ?>"><?php echo esc_html( $label ); ?>:</label>
<!-- Custom Input Button -->
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" class="minus">-</button>
<input type="number" value="<?php echo ( ! empty( $min ) ) ? esc_attr( $min ) : 0; ?>"
step="<?php echo ( isset( $step ) ) ? esc_attr( $step ) : ''; ?>"
min="<?php echo ( isset( $min ) ) ? esc_attr( $min ) : ''; ?>"
max="<?php echo ( isset( $max ) ) ? esc_attr( $max ) : ''; ?>" name="<?php echo esc_attr( $name ); ?>"
id="<?php echo esc_attr( $name ); ?>" /> <?php echo ( ! empty( $after ) ) ? esc_html( $after ) : ''; ?>
<!-- Custom Input Button -->
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus">+</button>
</p>
i have wp theme that im modifying to add children age to it each room would have adults , kids & kid age
screenshot
this code below is the table fetch how many room there is & show each input type for each room
<tbody>
<?php foreach ( $room_ids as $room_id => $available_rooms ) :
$max_adults = get_post_meta( $room_id, '_room_max_adults', true );
$max_kids = get_post_meta( $room_id, '_room_max_kids', true );
if ( empty( $max_adults ) || ! is_numeric( $max_adults ) ) $max_adults = 0;
if ( empty( $max_kids ) || ! is_numeric( $max_kids ) ) $max_kids = 0;
?>
<tr>
<td>
<div class="thumb_cart">
<?php echo get_the_post_thumbnail( $room_id, 'thumbnail' ); ?>
</div>
<span class="item_cart"><?php echo esc_html( get_the_title( $room_id ) ); ?></span>
<input type="hidden" name="room_type_id[]" value="<?php echo esc_attr( $room_id ) ?>">
</td>
<td>
<div class="numbers-row" data-min="0" data-max="<?php echo esc_attr( $available_rooms ) ?>">
<input type="text" class="qty2 form-control room-quantity" name="rooms[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'rooms' ) ) ?>">
</div>
</td>
<td>
<div class="numbers-row" data-min="0" <?php if ( ! empty( $max_adults ) ) echo 'data-max="' . esc_attr( $max_adults * $available_rooms ) . '" data-per-room="' . esc_attr( $max_adults ) . '"'; ?>>
<input type="text" class="qty2 form-control room-adults" name="adults[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'adults' ) ) ?>">
</div>
</td>
<td>
<?php if ( ! empty( $max_kids ) ) : ?>
<div class="numbers-row" data-min="0" data-max="<?php echo esc_attr( $available_rooms * $max_kids ) ?>" data-per-room="<?php echo esc_attr( $max_kids ) ?>">
<input type="text" class="qty2 form-control room-kids" name="kids[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'kids' ) ) ?>">
</div>
<td>
<div class="numbers-row" data-min="0" data-max="18" data-per-room="<?php echo esc_attr( $max_kids ) ?>">
<input type="text" id="kid1" class="qty2 form-control room-child_ages1" name="child_ages1[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'child_ages1' ) ) ?>">
</div>
<div class="numbers-row" id="kid2" data-min="0" data-max="18" data-per-room="<?php echo esc_attr( $max_kids ) ?>">
<input type="text" class="qty2 form-control room-child_ages2" name="child_ages2[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'child_ages2' ) ) ?>">
</div>
<div class="numbers-row" id="kid3" data-min="0" data-max="18" data-per-room="<?php echo esc_attr( $max_kids ) ?>">
<input type="text" class="qty2 form-control room-child_ages3" name="child_ages3[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'child_ages3' ) ) ?>">
</div>
<div class="numbers-row" id="kid4" data-min="0" data-max="18" data-per-room="<?php echo esc_attr( $max_kids ) ?>">
<input type="text" class="qty2 form-control room-child_ages4" name="child_ages4[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'child_ages4' ) ) ?>">
</div>
<?php endif; ?>
</td>
<td><strong><?php $total = $cart->get_room_field( $uid, $room_id, 'total' ); if ( ! empty( $total ) ) echo ct_price( $cart->get_room_field( $uid, $room_id, 'total' ) ) ?></strong></td>
</tr>
<?php endforeach; ?>
</tbody>
what im trying to add is an way on how to show/hide children age depending on how many kids there is i made this javascript
$('.room-kids').change(function(){
var $quantity = $(this).closest('tr').find('.room-quantity');
var kids = parseInt($(this).val(),10);
var max_kids = 0;
if ( $(this).parent('.numbers-row').attr('data-per-room') ) {
if (kids >= 1) {
$("#kid1").show("fast");
}else{
$("#kid1").hide("fast");
}
if (kids >= 2) {
$("#kid2").show("fast");
}else{
$("#kid2").hide("fast");
}
if (kids >= 3) {
$("#kid3").show("fast");
}else{
$("#kid3").hide("fast");
}
if (kids >= 4) {
$("#kid4").show("fast");
}else{
$("#kid4").hide("fast");
}
max_kids = $(this).parent('.numbers-row').data('per-room');
if ( ( max_kids * $quantity.val() < kids ) ) $quantity.val( Math.ceil(kids / max_kids) );
}
});
my problem is when i change kids on any other row it affect children age of the first row instead of it's own row
$('.room-kids').change(function(){
var $quantity = $(this).closest('tr').find('.room-quantity');
var kids = parseInt($(this).val(),10);
var max_kids = 0;
if ( $(this).parent('.numbers-row').attr('data-per-room') ) {
if (kids == 1) {
$("#kid1").show("fast");
}else{
$("#kid1").hide("fast");
}
if (kids == 2) {
$("#kid2").show("fast");
}else{
$("#kid2").hide("fast");
}
if (kids == 3) {
$("#kid3").show("fast");
}else{
$("#kid3").hide("fast");
}
if (kids == 4) {
$("#kid4").show("fast");
}else{
$("#kid4").hide("fast");
}
max_kids = $(this).parent('.numbers-row').data('per-room');
if ( ( max_kids * $quantity.val() < kids ) ) $quantity.val( Math.ceil(kids / max_kids) );
}
});
In my wordpress website i create an Ajax search and search post_title. The code is here...
Function and script:
<?php
add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>
<script type="text/javascript">
function fetch(){
jQuery.ajax({
url: ajaxwpse.ajaxurl,
type: 'post',
data: { action: 'data_fetch', keyword: jQuery('#keyword').val() },
success: function(data) {
jQuery('#datafetch').html( data );
}
});
}
</script>
<?php
}
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){
if ( esc_attr( $_POST['keyword'] ) == null ) { die(); }
$the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => array('mobile','tablet') ) );
if( $the_query->have_posts() ) :
while( $the_query->have_posts() ): $the_query->the_post(); ?>
<div>
<button class="post-link" rel="<?php the_ID(); ?>"> ADD </button>
<li><?php the_title();?></li>
</div>
<?php endwhile;
wp_reset_postdata();
endif;
die();
}
After sucessfully search with Ajax Now i need to add post_title from search to div id="post-container" dynamically.
HTML
<input type="text" name="keyword" id="keyword" onkeyup="fetch()" placeholder="Search to add"></input>
<div id="datafetch"></div> // successfuly ajax Search Result Here
<div id="post-container"> </div> // Trying to add post title here
I create a ADD button in search result to add post_title into div.
How dynamically add post_title from search field to div with button?
You've to attach click event to your button the get the post_title and append it to the div :
$(function(){
$('body').on('click', '.post-link', function(){
var post_title = $(this).closest('div').find('a').text();
$('#post-container').append( post_title );
});
});
Hope this helps.
$(function(){
$('body').on('click', '.post-link', function(){
var post_title = $(this).closest('div').find('a').text();
if( $('#post-container p').length < 4 )
$('#post-container').append( '<p>' + post_title + ' ------ REMOVE</p>' );
else
alert('You could add max 4 titles');
});
$('body').on('click', '.remove-title', function(){
$(this).closest('p').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class="post-link"> ADD </button>
<li>
The title 1 HERE
</li>
</div>
<div>
<button class="post-link"> ADD </button>
<li>
The title 2 HERE
</li>
</div>
<div>
<button class="post-link"> ADD </button>
<li>
The title 3 HERE
</li>
</div>
<hr>
<div id="post-container"> </div>
Compose both divs in your PHP function, then put them in a single <div>, like this:
PHP:
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){
if ( esc_attr( $_POST['keyword'] ) == null ) { die(); }
$the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => array('mobile','tablet') ) );
if( $the_query->have_posts() ) :
// compose $post_title
$post_title = "...";
echo "<div id=\"datafetch\">";
while( $the_query->have_posts() ): $the_query->the_post(); ?>
<div>
<button class="post-link" rel="<?php the_ID(); ?>"> ADD </button>
<li><?php the_title();?></li>
</div>
<?php endwhile;
echo "</div><div id=\"post-container\">" . $post_title . "</div>";
wp_reset_postdata();
endif;
die();
}
HTML:
<input type="text" name="keyword" id="keyword" onkeyup="fetch()" placeholder="Search to add"></input>
<div id="result"></div>
JS:
// in your ajax call
success: function(data) {
jQuery('#result').html( data );
}
I'm editing quantity-input.php to have buttons like that:
I found this and I'm trying to add that to my site but it has issues.
In single product page it works fine, in variable product the number doesn't change and when I tryed this in cart page, the last product works fine too, but when I use the plus button in the first product quantity input it adds 1 unit to all products.
Here is exactly the code i'm using
jQuery('.btn-number').click(function(e){
e.preventDefault();
fieldName = jQuery(this).attr('data-field');
type = jQuery(this).attr('data-type');
var input = jQuery("input[name='<?php echo esc_attr( $input_name ); ?>']");
var currentVal = parseInt(input.val());
if (!isNaN(currentVal)) {
if(type == 'minus') {
if(currentVal > input.attr('min')) {
input.val(currentVal - 1).change();
}
if(parseInt(input.val()) == input.attr('min')) {
jQuery(this).attr('disabled', true);
}
} else if(type == 'plus') {
if(currentVal < input.attr('max')) {
input.val(currentVal + 1).change();
}
if(parseInt(input.val()) == input.attr('max')) {
jQuery(this).attr('disabled', true);
}
}
} else {
input.val(0);
}
});
jQuery('.input-number').focusin(function(){
jQuery(this).data('oldValue', jQuery(this).val());
});
jQuery('.input-number').change(function() {
minValue = parseInt(jQuery(this).attr('min'));
maxValue = parseInt(jQuery(this).attr('max'));
valueCurrent = parseInt(jQuery(this).val());
name = jQuery(this).attr('name');
if(valueCurrent >= minValue) {
jQuery(".btn-number[data-type='minus'][data-field='<?php echo esc_attr( $input_name ); ?>']").removeAttr('disabled')
} else {
alert('Sorry, the minimum value was reached');
jQuery(this).val(jQuery(this).data('oldValue'));
}
if(valueCurrent <= maxValue) {
jQuery(".btn-number[data-type='plus'][data-field='<?php echo esc_attr( $input_name ); ?>']").removeAttr('disabled')
} else {
alert('Sorry, the maximum value was reached');
jQuery(this).val(jQuery(this).data('oldValue'));
}
});
<div class="quantity input-number__wrap">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="<?php echo esc_attr( $input_name ); ?>">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( $max_value ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text form-control input-number">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="<?php echo esc_attr( $input_name ); ?>">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
EDIT Finally I used the plugin WilsonWilson sugested in the comment
below and work fine.
I'm learning JS/jQuery mainly for implementing AJAX in my WordPress projects.
After hours of headache trying to figure out what's wrong with this code I decided to post it here, hoping somebody nice will help me.
My contact form JS script is not working as expected.
I can't figure out why after click on the submit button, the css rules of the required fields don't change on the page.
The jQuery script:
jQuery( document ).ready( function( $ ) {
if ( $( '#mystcf-send' ).length > 0 ) {
alert( 'Everything OK' ); // We enter in the condition... as expected.
$( 'body' ).append( '<div id="noty"></div>' );
$( '#mystcf-send' ).click( function() {
var busy = false,
error = false,
form = $( this ).parent( 'form' );
alert( 'Everything OK' ); // After click on '#mystcf-send' button, the alert box popin, the code is excecuting normally untill here...
form.find( '[required]' ).each( function() {
alert(); // After click on #mystcf button, this alert box is NOT displaying... and so the conditions below are not working.
if( $.trim( $( this ).val() ) == '' ) {
$( this ).css( 'border-color', '#FF0000' );
error = true;
}
else {
$( this ).css( 'border-color', '#CDCDCD' );
}
} );
return false;
} );
}
} );
The PHP script:
<?php
if ( ! defined( 'ABSPATH' ) ) exit;
add_shortcode( 'mystcf', 'mystcf_shortcode' );
add_action( 'wp_enqueue_scripts', 'mystcf_scripts' );
function mystcf_scripts() {
if ( is_page( 'contact' ) ) :
wp_register_script( 'mystcf-script', get_stylesheet_directory_uri() . '/inc/contact-form/js/jquery-contact-form.js', array( 'jquery' ) );
wp_localize_script( 'mystcf-script', 'mystcf_ajax', array( 'url' => admin_url( 'admin-ajax.php' ) ) );
wp_enqueue_script( 'mystcf-script' );
endif;
}
function mystcf_shortcode() {
ob_start();
mystcf_template();
$contact_form = ob_get_clean();
return $contact_form;
}
function mystcf_template() { ?>
<div class="mystcf-container">
<form id="mystcf">
<div class="mystcf-left-panel">
<p>
<label for="mystcf-email">Email <abbr class="required" title="<?php esc_attr( __( 'Required', 'mystorefront' ) ); ?>">*</abbr></label><br />
<input type="email" id="mystcf-email" name="mystcf_email" value="<?php if ( isset( $_POST['mystcf_email'] ) ) echo esc_attr( $_POST['mystcf_email'] ); ?>" required />
</p>
<p>
<label for="mystcf-first-name">Prénom</label><br />
<input type="text" id="mystcf-first-name" name="mystcf_first_name" value="<?php if ( isset( $_POST['mystcf_first_name'] ) ) echo esc_attr( $_POST['mystcf_first_name'] ); ?>" />
</p>
<p>
<label for="mystcf-second-name">Nom</label><br />
<input type="text" id="mystcf-second-name" name="mystcf_second_name" value="<?php if ( isset( $_POST['mystcf_second_name'] ) ) echo esc_attr( $_POST['mystcf_second_name'] ); ?>" />
</p>
<p>
<label for="mystcf-tel">Téléphone</label><br />
<input type="tel" id="mystcf-tel" name="mystcf_tel" value="<?php if ( isset( $_POST['mystcf_tel'] ) ) echo esc_attr( $_POST['mystcf_tel'] ); ?>" />
</p>
</div>
<div class="mystcf-right-panel">
<p>
<label for="mystcf-message">Message <abbr class="required" title="<?php esc_attr( __( 'Required', 'mystorefront' ) ); ?>">*</abbr></label><br />
<textarea type="text" id="mystcf-message" name="mystcf_message" rows="17" required><?php if ( isset( $_POST['mystcf_message'] ) ) echo esc_textarea( $_POST['mystcf_message'] ); ?></textarea>
</p>
</div>
<?php wp_nonce_field( '', 'security' ); ?>
<input type="hidden" name="mystcf_sent" value="1">
<p>
<input type="submit" class="mystcf-send" id="mystcf-send" value="<?php esc_attr( __( 'Send', 'mystorefront' ) ); ?>">
</p>
</form>
</div><?php
}
The problem is with the line where you search the form. It should be this:
form = $(this).closest('form');
parent() returns the parent (and only if it matches the selector specified). On the other hand, closest() searches all ancestors and return the first match.