1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Billing Address Same as Shipping Address jQuery</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script type="text/javascript"> $(document).ready(function(){ $('#check-address').click(function(){ if ($('#check-address').is(":checked")) { $('#txtfname_billing').val($('#txtfname').val()); $('#txtlname_billing').val($('#txtlname').val()); $('#txtaddress_billing').val($('#txtaddress').val()); $('#txtcity_billing').val($('#txtcity').val()); var country = $('#country option:selected').val(); $('#country_billing option[value=' + country + ']').attr('selected','selected'); } else { //Clear on uncheck $('#txtfname_billing').val(""); $('#txtlname_billing').val(""); $('#txtaddress_billing').val(""); $('#txtcity_billing').val(""); $('#country_billing option[value=""]').attr('selected','selected'); }; }); });</script></head><body> <header class="bg-dark" style="height: 60px; padding: 5px;"> <h3 class="text-light" style="text-align: center;">Billing Address Same as Shipping Address jQuery</h3> </header> <div class="container bg-dark"> <div class="row"> <div class="col-sm-1"></div> <div class="col-sm-2"></div> <div class="col-sm-6 bg-light boxStyle"> <form name="theform" action="" method="post"> <div class="form-group"> <div class="width30 floatL"><label>Firstname</label></div> <div class="width70 floatR"><input type="text" id="txtfname" name="txtfname" placeholder="First Name" class="form-control"></div><br><br> </div> <div class="form-group"> <div class="width30 floatL"><label>Lastname</label></div> <div class="width70 floatR"><input type="text" id="txtlname" name="txtlname" placeholder="Last Name" class="form-control"></div> </div><br> <div class="form-group"> <div class="width30 floatL"><label>Address</label></div> <div class="width70 floatR"><input type="text" id="txtaddress" name="txtaddress" placeholder="Ship to Address" class="form-control"></div> </div><br> <div class="form-group"> <div class="width30 floatL"><label>City</label></div> <div class="width70 floatR"><input type="text" id="txtcity" name="txtcity" placeholder="Ship to City" class="form-control"></div> </div><br> <div class="form-group"> <div class="width30 floatL"><label>Country</label></div> <div class="width70 floatR"><select name="country" size="1" id="country" class="form-control"> <option value="">Select Country..</option> <option value="Philippines">Philippines</option> </select></div> </div><br> <hr/> <p><b>Billing Information <label><input type="checkbox" value="" id="check-address">Same as billing?</label></b></p> <div class="form-group"> <div class="width30 floatL"><label>Firstname</label></div> <div class="width70 floatR"><input type="text" id="txtfname_billing" name="txtfname_billing" placeholder="First Name" class="form-control"> </div><br><br> <div class="form-group"> <div class="width30 floatL"><label>Lastname</label></div> <div class="width70 floatR"><input type="text" id="txtlname_billing" name="txtlname_billing" placeholder="Last Name" class="form-control"></div> </div><br> <div class="form-group"> <div class="width30 floatL"><label>Address</label></div> <div class="width70 floatR"><input type="text" id="txtaddress_billing" name="txtaddress_billing" placeholder="Ship to Address" class="form-control"></div> </div><br> <div class="form-group"> <div class="width30 floatL"><label>City</label></div> <div class="width70 floatR"><input type="text" id="txtcity_billing" name="txtcity_billing" placeholder="Ship to City" class="form-control"></div> </div><br> <div class="form-group"> <div class="width30 floatL"><label>Country</label></div> <div class="width70 floatR"><select name="country_billing" size="1" id="country_billing" class="form-control"> <option value="">Select Country..</option> <option value="Philippines">Philippines</option> </select></div> </div><br> <div class="form-group"> <div class="row"> <div class="floatR"><br/><input class="btn btn-success" type="submit" value="Submit" style="font-weight: bold"></div> </div> </div> </form> </div> <div class="col-sm-1"></div> <div class="col-sm-2"></div> </div> </div> <style>.width30 { width: 30%; } .width70 { width: 70%; } .floatL{ float: left; } .floatR{ float: right; } .boxStyle{ padding: 20px; border-radius: 25px; border-top: 6px solid #dc3545; border-bottom: 6px solid #28a745; }</style></body></html> |
