2

I want to collect a users postal code from the form input on the onepage checkout and show the result in a later checkout step before they submit the order.

<input type="text" class="input-text validate-zip-international  required-entry validation-passed" value="" id="billing:postcode" name="billing[postcode]" title="Zip/Postal Code">

What is the best way of achieving this please?

2

You could use JavaScript/jQuery to fetch those values from the input fields and write them to your review area.

I did this in the past, for a custom one page checkout, so it may require some tweaking for your needs. You just need to make this an onClick event on the continue button, if I remember what I did correctly.

function saveShipping(){

    if($("billing:use_for_shipping_no").checked) {
        var shippingStreet1 = $("shipping:street1").value;
        var shippingStreet2 = $("shipping:street2").value;
        var shippingCity = $("shipping:city").value;
        var shippingPostalCode = $("shipping:postcode").value;

        //lumping it into one variable for output
        shippingData = $('shipping:firstname').value+' '+$('shipping:lastname').value+'<br/>'+shippingStreet1+'<br/>';
        if(shippingStreet2 != "") {
            shippingData += shippingStreet2+'<br/>';
        }
        shippingData += shippingCity+', '+$("shipping:region_id").options[$("shipping:region_id").selectedIndex].innerHTML+', '+$('shipping:country_id').value+', '+shippingPostalCode

        //all data
        jQuery("#shipping_data").html(shippingData); 
        //just the postal code
        jQuery("#shipping_post_code_html_element").html(shippingPostalCode); 

    }
    else{
        //new variable
        var billingPostalCode = $('billing:postcode').value;
        billingData = $('billing:firstname').value+' '+$('billing:lastname').value+'<br/>'+$('billing:street1').value+'<br/>'
        if($('billing:street2').value != '') {
            billingData += $('billing:street2').value+'<br/>';
        }
        billingData +=$('billing:city').value+', '+$("billing:region_id").options[$("billing:region_id").selectedIndex].innerHTML+', '+$('billing:country_id').value+', '+$('billing:postcode').value
        //all billing data
        jQuery("#shipping_data").html(billingData);
        //just the postal code
        jQuery("#shipping_post_code_html_element").html(billingPostalCode);
    }
}

Update

If you just want the postal code, the code above stores it in the variable shippingPostalCode, if they opted to use a separate shipping address, and just plucks the value from the input field if they use the same billing/shipping info. You can send just the postal code to be written the same way, like so:

function saveShipping(){

if($("billing:use_for_shipping_no").checked) {
    ...
    //all data
    jQuery("#shipping_data").html(shippingData); 
    //just the postal code
    jQuery("#shipping_post_code_html_element").html(shippingPostalCode); 
}

Just replace "shipping_post_code_html_element" with the id of the html element you're wanting to write it to.

Similarly, for the else statement (where I'm using the billing data in the case that shipping/billing are the same), I'd put the billing zip code in a variable, just to make the code look nicer, and change it to something like this:

else{
    //new variable
    var billingPostalCode = $('billing:postcode').value;
    ...
    //all billing data
    jQuery("#shipping_data").html(billingData);
    //just the postal code
    jQuery("#shipping_post_code_html_element").html(billingPostalCode);
 }

I updated the code above, too, so you can just pick out the pieces you don't need.

  • Thanks this is genius! I've got the whole address output now which is great but i really need the postcode on its own. I intend to pass the result as an api paramater. Unfortunately i havent quite grasped javascript formatting its alien to me; could you possibly explain how i remove the rest of the values? – markbarabus Mar 15 '16 at 23:22
  • I updated my answer. That shippingData variable is just concatenating a bunch of other variable values, so all you need to do is to output the shippingPostalCode variable, instead of the shippingData variable. For billing, there wasn't a variable, so I've added one for better readability. – thedash Mar 16 '16 at 16:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.