submit button not working after ajax

Question

I’ve modified the woocommerce calculate shipping calculator form in the functions of my child theme by adding an email address to it. Currently on clicking submit all fields are being stored to the WC session and are visible on the checkout page, but after any ajax refresh on the cart page the submit button doesn’t work.
I tried disabling wc-cart scripts on the cart page which kind of solved the problem, but then the form won’t submit with ios. It’s also not the ideal situation to do it like that, although that was how woocommerce used to do it.

As i said, it submits, but after any ajax, such as apply coupon, update cart or submitting the form itself the button no longer works.

How do I either

a) Get that button to work after an ajax refresh

or

b) Get IOS to accept inputs on submit and reload

This is the form. I copied most of the fields from woocommerce

TIA

add_action('woocommerce_cart_totals_before_shipping', 'new_billing_fields_on_cart');
function new_billing_fields_on_cart(){
?>

<form class="woocommerce-shipping-calculator" id="calc_form" action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post" >

<section class="shipping-calculator-form" style="display:none;">

     <!-- Email field -->

    <p class="form-row form-row-wide" id="calc_billing_email">
        <label>Email<abbr class="required" title="required">*</abbr</label>
        <br>
        <input type="text" class="input-text" value="<?php echo esc_attr( WC()->customer->get_billing_email() ); ?>" placeholder="<?php esc_attr_e( 'Email', 'woocommerce' ); ?>" name="billing_email" id="billing_email" required />
    </p>

    <!-- country -->
    <p class="form-row form-row-wide" id="calc_billing_country_field">
     <label>Country <abbr class="required" title="required">*</abbr></label><br>
        <select name="billing_country" id="billing_country" class="country_to_state" rel="calc_billing_state">
            <option value=""><?php _e( 'Select a country&hellip;', 'woocommerce' ); ?></option>
            <?php
                foreach( WC()->countries->get_shipping_countries() as $key => $value )
                    echo '<option value="' . esc_attr( $key ) . '"' . selected( WC()->customer->get_billing_country(), esc_attr( $key ), false ) . '>' . esc_html( $value ) . '</option>';
            ?>
        </select>
    </p>

    <!-- state-->

<p class="form-row form-row-wide" id="billing_state_field">
                <label>State <?php if (isset($scffwform_settings['scffwform_checkbox_field_7_optional'])){} else { ?><abbr class="" title="">*</abbr><?php } ?></label><br>
        <?php
            $current_cc = WC()->customer->get_billing_country();
            $current_r  = WC()->customer->get_billing_state();
            $states     = WC()->countries->get_states( $current_cc );
            // Hidden Input
            if ( is_array( $states ) && empty( $states ) ) {
                ?><input type="hidden" name="billing_state" id="billing_state" placeholder="<?php esc_attr_e( 'State / county', 'woocommerce' ); ?>" /><?php
            // Dropdown Input
            } elseif ( is_array( $states ) ) {
                ?><span>
                    <input type="text" class="input-text" name="billing_state1" id="billing_state1" hidden /> <input type="button" name="selectNow" value="Select Now" hidden >
                    <select name="billing_state" id="billing_state" placeholder="<?php esc_attr_e( 'State / county', 'woocommerce' ); ?>">
                        <option value=""><?php _e( 'Select a state&hellip;', 'woocommerce' ); ?></option>
                        <?php
                            foreach ( $states as $ckey => $cvalue )
                                echo '<option value="' . esc_attr( $ckey ) . '" ' . selected( $current_r, $ckey, false ) . '>' . __( esc_html( $cvalue ), 'woocommerce' ) .'</option>';
                        ?>
                    </select>
                </span><?php
            // Standard Input
            } else {
                ?><input type="text" class="input-text" value="<?php echo esc_attr( $current_r ); ?>" placeholder="<?php esc_attr_e( 'State / county', 'woocommerce' ); ?>" name="billing_state" id="billing_state" /><?php
            }
        ?>
    </p>


    <?php if ( apply_filters( 'woocommerce_shipping_calculator_enable_city', false ) ) : ?>

        <p class="form-row form-row-wide" id="calc_billing_city_field">

            <input type="text" class="input-text" value="<?php echo esc_attr( WC()->customer->get_billing_city() ); ?>" placeholder="<?php esc_attr_e( 'City', 'woocommerce' ); ?>" name="calc_billing_city" id="calc_billing_city" />
        </p>

    <1-- Postcode -->

        <p class="form-row form-row-wide" id="calc_shipping_postcode_field">
        <label>Postcode / ZIP<abbr class="required" title="required">*</abbr></label><br>
            <input type="text" class="input-text" value="<?php echo esc_attr( WC()->customer->get_billing_postcode() ); ?>" placeholder="<?php esc_attr_e( 'Postcode / ZIP', 'woocommerce' ); ?>" name="billing_postcode" id="billing_postcode"  required />
        </p>

     <!-- submit button -->

    <p style="margin-bottom:0"><button type="submit" name="calc_shipping" value="1" id="calc_shipping_button" class="button" onclick="document.getElementById('my_id').style.display = 'block' ;"><?php _e( 'Submit Details', 'woocommerce' ); ?></button></p>


    <?php wp_nonce_field( 'woocommerce-cart' ); ?>

    </section>

</form>
<?php
}
0
, , , Johnc1979 4 years 2019-10-30T05:44:29-05:00 0 Answers 79 views 0

Leave an answer

Browse
Browse