CODEWITHSUNDEEP
jqueryformscheckbox
Firozur Rahman
Firozur Rahman

Reputation: 45

Form fill up with check box

I want a set of form where User will input billing address and by checking the check box user will able to fill up next part.

I want to do it with jQuery. If possible, how can I do it.

Or, if it is not possible with jQuery. Then, How can I do it?

<form role="form" class="form-horizontal">
<div class="form-group">
<h2>Billing Address</h2>
<p><span>Address 1</span><input type="text" placeholder="Name" id="billing_addres_1"></p>
<p><span>Address 2</span><input type="text" placeholder="Name" id="billing_addres_2"></p>
<p><span>City</span><input type="text" placeholder="Name" id="billing_city"></p>
<p><span>Country/Region</span><input type="text" placeholder="Name" id="billing_country"></p>
</div>
<div class="form-group">
<div class="checkbox">
<p><input type="checkbox">Check if billing address are same</p>
</div>
</div>
<div class="form-group">
<h2>Billing Address</h2>
<p><span>Address 1</span><input type="text" placeholder="Name" id="permanent_addres_1"></p>
<p><span>Address 2</span><input type="text" placeholder="Name" id="permanent_addres_2"></p>
<p><span>City</span><input type="text" placeholder="Name" id="permanent_city"></p>
<p><span>Country/Region</span><input type="text" placeholder="Name" id="permanent_country"></p>
</div>
<button class="btn" type="submit">Sign in</button>
</form>

Upvotes: 0

Views: 1563

Answers (2)

luv2code
luv2code

Reputation: 1296

This is very simple. Your markup is not that great, but you need to assign a specific ID on each input element. Then populate with jQuery. Here is the jsfiddle: http://jsfiddle.net/Pvu8r/

<form role="form" class="form-horizontal">
<div class="form-group">
<h2>Billing Address</h2>
<p><span>Address 1</span><input type="text" placeholder="Name" id="Address1"></p>
<p><span>Address 2</span><input type="text" placeholder="Name" id="Address2"></p>
<p><span>City</span><input type="text" placeholder="Name" id="City"></p>
<p><span>Country/Region</span><input type="text" placeholder="Name" id="Country"></p>
</div>
<div class="form-group">
<div class="checkbox">
<p><input type="checkbox" id="checkit">Check if billing address are same</p>
</div>
</div>
<div class="form-group">
<h2>Billing Address</h2>
<p><span>Address 1</span><input type="text" placeholder="Name" id="Address1b"></p>
<p><span>Address 2</span><input type="text" placeholder="Name" id="Address2b"></p>
<p><span>City</span><input type="text" placeholder="Name" id="Cityb"></p>
<p><span>Country/Region</span><input type="text" placeholder="Name" id="Countryb"></p>
</div>
<button class="btn btn-default" type="submit">Sign in</button>
</form>

JQUERY (this should be wrapped in tags right before you tag:

$(document).ready(function(){
    $("#checkit").click(function(){
        if($(this).is(':checked')){
        var address = $("#Address1").val();
        var address2 = $("#Address2").val();
        var city = $("#City").val();
        var country = $("#Country").val();
        //set the variable in lower form with vars set above
        $("#Address1b").val(address);
        $("#Address2b").val(address2); 
        $("#Cityb").val(city);
        $("#Countryb").val(country);
        }else{
//uncheck - clear input
        $("#Address1b").val("");
        $("#Address2b").val(""); 
        $("#Cityb").val("");
        $("#Countryb").val("");
        }
    });
});

Make sure to add the jquery file otherwise this will not work. Hope this helps!

Upvotes: 0

musefan
musefan

Reputation: 48415

JQuery

First of all you need to set some ID's on your checkbox and your group div, like this:

<input id="matchedbilling" type="checkbox">

and

<div id="billinggroup" class="form-group">

That will allow you to easily reference them with JQuery ID selector, for example $("#myId").

In your script section you need to register a change event handler for your checkbox, within this you need to set the visibility of the billing group based on the checkbox state:

$("#matchedbilling").change(function(){
    //check if this checkbox is checked
    if($(this).is(":checked"))
        $("#billinggroup").hide();//if selected, hide the billing group
    else
        $("#billinggroup").show();//not selected, so show the billing group
});
$("#matchedbilling").change();//this will call the change event on page load so that the billing group starts of hidden

Here is a working example

Javascript Only

This is the javascript only approach, the concept is the same but we have to manually cache the previous display state of the element so we can ensure it is restored correctly when shown. This is some JQuery does automatically with it's data cache.

document.getElementById("matchedbilling").onchange = checkChanged;
var lastDisplayState = "block";
function checkChanged() {
    //check if this checkbox is checked
    var group = document.getElementById("billinggroup");//get the billing group element
    if (this.checked) {
        lastDisplayState = group.style.display;//store the current display state
        group.style.display = "none"; //if selected, hide the billing group
    } else {
        group.style.display = lastDisplayState; //not selected, so show the billing group
    }
}
checkChanged(); //this will call the change event on page load so that the billing group starts of hidden

Here is a working example

SIDE NOTE

Just to reiterate what you have been told in comments... id attributes should be unique to the entire document. Having duplicates may seem harmless, but when you come to selecting them will javascript/JQuery you will not get consistent results. If you need a common identifier for multiple elements then consider using a class instead with a JQuery class selector, for example $(".myClassName")

Upvotes: 3

Related Questions