CODEWITHSUNDEEP
phpjavascriptjqueryforms
Bill
Bill

Reputation: 3517

.val stops form from working

I have this checkout page (you will have to add an item) Which uses the JavaScript / jQuery seen in this jsFiddle to show/hide some fields for a separate shipping address. When showing, I set the value of all fields to '' and when hiding I set the values of the fields to the same as their respective fields in the billing form.

When you submit the form you should be taken to the paypal login screen (try filling out the form without toggling the different shipping address and submitting) but if you toggle the shipping address it just comes back to the same page.

I have debugged enough to know that it is modifying the fields with .val() that is breaking the form. If I comment out those bits and manually toggle visibility with dev tools, or if I fill out the billing form and never show/hide the shipping (so .val() is never called), everything works fine.

If you are going to look at that page and give it a try, you know its successful if you get to the paypal screen, otherwise it is just coming back to the same page (the form's action is to the same page, but I can't find anything that processes the data - the full php page can be found here - it is a modified version of WPEC's shopping cart page

Here is (most of) the relevant JavaScript:

$('#reveal-shipping').click(function(){
        if ( $('.wpsc_checkout_table.table-2').is(':animated') ) return; 
        if( $('.wpsc_checkout_table.table-2').css('display') == 'none' ){
            $('.wpsc_checkout_table.table-2').slideToggle();
            $('.wpsc_checkout_table.table-2').find('input, select, textarea').val(''); 
            document.getElementById('reveal-shipping').innerHTML = 'Ship to my billing address ←';
        } else {
            for ( i=0; i < fields.length; i++ ){
                thisval = $(fields[i][0]).val();
                $(fields[i][1]).val( thisval );
            }
            $('.wpsc_checkout_table.table-2').slideToggle();
            document.getElementById('reveal-shipping').innerHTML = 'Ship to a different address &rarr;';
        }
    });

You can find the rest on the jsFiddle and on the page itself

Thanks so much in advance for any help I'm really stuck on this!

Upvotes: 0

Views: 91

Answers (1)

jah
jah

Reputation: 1305

I think the problem is that you are using display: none to hide the "different shipping adress". When a input field has display none, it will not be sent with your formular. And because of that it redirects you back to the checkout page.

You could use visibility: hidden, but then it would still take up space.

But i strongly recommend you do not do it this way, because if the user has turned javascript off it won't work. You should send all the field and in php, check whether the different adress fields have been submitted, and if they have, use them.

Edit: You could use position to place them outside of the window, like:

position:absolute;
top: -9999px;
visibility:hidden;

Upvotes: 1

Related Questions