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?

markbarabus
  • 119
  • 1
  • 9

1 Answers1

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.

Melindash
  • 145
  • 8
  • 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. – Melindash Mar 16 '16 at 16:59