Trouble storing form field value as jQuery variable

Question

I'm having trouble storing form field values as jQuery variables. My control text is storing and recalling like a charm.. After much testing i'm still not sure where i'm missing on this. Maybe a stupid human trick that i'm failing to see?

Here is the fiddle: https://jsfiddle.net/brokenmold/f78vrs16/5/

<form class="ajaxform form-horizontal" method="POST" action="">
    <label for="billing_org" class="sr-only">Billing Org</label><br>
    <input type="text" name="billing_org" class="form-control" value="Test Billing Co" placeholder="Billing Org"><br><br>

    <label>
        <input type="checkbox" name="shipping_same" id="shipwreck"> Ship Same As Billing
    </label><br><br>

    <label for="shipping_org" class="sr-only">Shipping Org</label><br>
    <input type="text" name="shipping_org" id="shipping_org" class="form-control" value="Not Checked" placeholder="Shipping Org"><br><br>

    <label for="control_test" class="sr-only">Control Test</label><br>
    <input type="text" name="control_test" id="control_test" class="form-control" value="Not Checked" placeholder="Contol Test">
</form>

$("#shipwreck").on('click', function() {
    var billing_org = $('#billing_org').val();
    var control_test = "Control Test";

    if ($('#shipwreck').prop('checked')) {
        $("#shipping_org").val(billing_org);
        $("#control_test").val(control_test);
    } else {
        $("#shipping_org").val("Not Checked");
        $("#control_test").val("Not Checked");
    }
});

https://jsfiddle.net/brokenmold/f78vrs16/5/

Answer 1

Your HTML is flawed. There is no ID on the billing_org field, so your code to store that value won't work. Change your HTML for the input field to this and you should be fine:

<input type="text" name="billing_org" id="billing_org" class="form-control" value="Test Billing Co" placeholder="Billing Org">

The only change in the above from your original code is the addition of id="billing_org" .

It's always the simple ones that slip through!