We Keep Coding

Copy data using checkbox not working in repeater field

On the 1st image link, I have enter the required data in the first tab.
On the 2nd image link, when I go to second tab and click on checkbox it copy data from 1st tab and show in the 2nd tab form
On the 3rd image link, when I repeat the form and also when click on check box the data did not show in the respective field.
$(document).ready(function() {
$(".repeater").repeater({
defaultValues: {
//"text-input": "foo"
},
show: function() {
$(this).slideDown();
},
hide: function(deleteElement) {
if (confirm("Are you sure you want to delete this element?")) {
$(this).slideUp(deleteElement);
}
},
ready: function(setIndexes) {
//$dragAndDrop.on('drop', setIndexes);
},
repeaters: [
{
selector: ".inner-repeater"
}
]
});
});
function myFunction() {
var checkBox = document.getElementById("single_checkbox");
var door_no = document.getElementById("doorno");
var street_name = document.getElementById("streetname");
var client_area = document.getElementById("area");
var client_statename = document.getElementById("statename");
var client_dist = document.getElementById("distname");
var client_city = document.getElementById("city");
var client_pincode = document.getElementById("pincode");
var dr_number = document.getElementById("doornos");
var contact_street = document.getElementById("streetnames");
var contact_area = document.getElementById("contactarea");
var contact_state = document.getElementById("statenamecontact");
var contact_dist = document.getElementById("contactdist");
var contact_city = document.getElementById("contactcity");
var contact_pincode = document.getElementById("pincode_contact");
if (checkBox.checked == true){
dr_number.value=door_no.value;
contact_street.value=street_name.value;
contact_area.value=client_area.value;
contact_state.value=client_statename.value;
contact_dist.value=client_dist.value;
contact_city.value=client_city.value;
contact_pincode.value=client_pincode.value;
} else {
dr_number.value="";
contact_street.value="";
contact_area.value="";
contact_state.value="";
contact_dist.value="";
contact_city.value="";
contact_pincode.value="";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"></script>
<div class="row match-height">
<div class="col-md-12">
<div class="">
<div class=" collapse show">
<div class="">
<form action="clientinsert2" method="post" enctype="multipart/form-data">
<div class="">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Client</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Client Contact</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="tab-pane active pd_0"><br>
<div class="form-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="">Client Name </label>
<input type="text" class="form-control" value="" name="clientname">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Phone Number</label>
<input type="text" class="form-control" value="" name="phone">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="">Door Number</label>
<input type="text" class="form-control" value="" id="doorno" name="doorno">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="issueinput4">Street Name</label>
<input type="text" class="form-control" value=""id="streetname" name="streetname">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="">Area</label>
<input type="text" class="form-control" id="area" name="area" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">State</label>
<select class="form-control" name="State" id="statename" value="">
<option>Select</option>
<option>odisha</option>
<option>Bihar</option>
<option>Assam</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">District</label>
<select class="form-control" id="distname" name="districtname" value="">
<option>Select</option>
<option>jajpur</option>
<option>puri</option>
<option>cuttack</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">City</label>
<select class="form-control" name="cityname" id="city" value="">
<option>Select</option>
<option>Bhubaneswar</option>
<option>Bari</option>
<option>Mangalpur</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="">Pincode</label>
<input type="text" class="form-control" name="pincode" value="" id="pincode">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Status</label>
<select class="form-control" name="status" value="">
<option selected>Please Select Status</option>
<option value="1">Active</option>
<option value="2">Inactive</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Logo</label>
<input type="file" class="form-control" name="client_logo">
</div>
</div>
</div>
</div>
</div>
<!-- client contact form start-->
<div id="menu1" class="tab-pane fade pd_0"><br>
<div class="form-group mb-2 repeater">
<div data-repeater-list="outer-list">
<div data-repeater-item>
<div class="row mb-1">
<div class="col-md-6">
<div class="form-group">
<label for="">Contact Person </label>
<input type="text" class="form-control" name="contactname">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Contact Person Phone</label>
<input type="text" class="form-control" name="contactphone">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Mail</label>
<input type="email" class="form-control" name="contactmail">
</div>
</div>
<!-- <div class="col-md-4">
<div class="form-group">
<label for="">Client Primary Spoc</label>
<div class="skin skin-square">
<input type="checkbox"
id="single_checkbox1" name="client_contact_primary_spoc"
value="checked">
<label for="single_checkbox1">checked</label>
</div>
</div>
</div> -->
<div class="col-md-4">
<div class="form-group">
<label for="">Designation</label>
<input type="text" class="form-control" name="designation">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Status</label>
<select class="form-control" name="status">
<option selected>Please Select Status</option>
<option value="1">Active</option>
<option value="2">Inactive</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Client Branch</label>
<select class="form-control" name="clientbranch">
<option>Select</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Corporate Address</label>
<div class="">
<input type="checkbox" value="1" id="single_checkbox"
name="checkbox" onclick="myFunction()">
<label for="">checked
</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Door Number</label>
<input type="text" class="form-control" name="doorno" id="doornos">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="issueinput4">Street Name</label>
<input type="text" class="form-control" name="streetname" id="streetnames">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Area</label>
<input type="text" class="form-control" name="area" id="contactarea">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">State</label>
<select class="form-control" name="State"
id="statenamecontact">
<option>Select</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">District</label>
<select class="form-control" name="districtname"
id="contactdist">
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">City</label>
<select class="form-control" name="cityname"
id="contactcity">
<option>Select</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Pincode</label>
<input type="text" class="form-control" name="pincode" id="pincode_contact">
</div>
</div>
<div class="col-12">
<button type="button" data-repeater-delete
class="btn btn-icon btn-danger mr-1"><i
class="ft-x"></i></button>
</div>
</div>
</div>
</div>
<button type="button" data-repeater-create id="repeater-button"
class="btn btn-info">
<i class="ft-plus"></i> Add new file
</button>
</div>
<div class="form-actions">
<span id="hide">
<a href="/client"><input type="button" class="btn btn-warning"
value="Back"></a>
</span>
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
<!-- Tab panes -->
</div>
</div>
</div>
</div>
</div>
<!-- Form wizard with icon tabs section end -->
</div>

Need a form field to be shown depending on the results of another field

Looking for some help here.
I have a HTML page with a form that includes multiple input fields.
One of those fields is dropdown-box with multiple values , being one of the the option "Other".
What i need to do here is to have an input text box show up if the user selects the Other option.
So to sum it up , i need a function that will show the hidden form field if that value is selected.
This needs to be done before submission , so using onexit() or anything like this.
I have been searching but i am not able to find a way to do it.
Any help will be appreciated.
Thank you:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Style -->
<link rel="stylesheet" href="css/style.css">
<title>Pedido de Assistência Técnica</title>
</head>
<body>
<script>
function validateForm() {
var x = document.forms["brat"]["Marca"].value;
var y = document.forms["brat"]["outram"].value;
if (x == "" && y=="") {
alert("Necessita de seleccionar uma marca");
return false;
}
}
</script>
<div class="d-lg-flex half">
<div class="bg order-1 order-md-2" style="background-image: url('images/bgbr.jpg');"></div>
<div class="contents order-2 order-md-1">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-md-7 py-5">
<h3>Pedido de Assistência</h3>
<p class="mb-4">Por favor preencha o formulário com os dados correctos.</p>
<form action="#" method="post" name="brat" onsubmit="return validateForm()">
<div class="row">
<div class="col-md-12">
<div class="form-group first">
<label for="fname">Nome</label>
<input type="text" class="form-control" placeholder="Nome" id="fname">
</div>
</div>
<div class="col-md-12">
<div class="form-group first">
<label for="fmorada">Morada</label>
<input type="text" class="form-control" placeholder="Morada" id="fmorada">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group first">
<label for="lemail">Email</label>
<input type="text" class="form-control" placeholder="xxxx#xxxxx.xx" id="lemail">
</div>
</div>
<div class="col-md-6">
<div class="form-group first">
<label for="ltelefone">Telefone</label>
<input type="text" class="form-control" placeholder="9xxxxxxxx" id="ltelefone">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group first">
<label for="codpostal">Cod.Postal</label>
<input type="text" class="form-control" placeholder="XXXX-XXX" id="codpostal">
</div>
</div>
<div class="col-md-6">
<div class="form-group first">
<label for="localidade">Localidade</label>
<input type="text" class="form-control" placeholder="Localidade" id="localidade">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group first">
<label for="NIF">NIF</label>
<input type="text" class="form-control" placeholder="Nif" id="NIF">
</div>
</div>
<div class="col-md-6">
<div class="form-group first">
<label for="obs">Observações</label>
<input type="text" class="form-control" placeholder="Observações" id="obs">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group first">
<label for="marca">Marca</label>
<select name="Marca" class="form-control" id="Marca">
<option value="" selected>Selecione uma marca</option>
<option value="ALBATROSS">ALBATROSS</option>
<option value="BERING">BERING</option>
<option value="BOSS">BOSS</option>
<option value="CERTINA">CERTINA</option>
<option value="CK">CK</option>
<option value="ELETTA">ELETTA</option>
<option value="GUCCI">GUCCI</option>
<option value="HAMILTON">HAMILTON</option>
<option value="LACOSTE">LACOSTE</option>
<option value="LONGINES">LONGINES</option>
<option value="OMEGA">OMEGA</option>
<option value="PIERRE BALMAIN">PIERRE BALMAIN</option>
<option value="RADO">RADO</option>
<option value="SCUDERIA FERRARI">SCUDERIA FERRARI</option>
<option value="TECHNOMARINE">TECHNOMARINE</option>
<option value="TECHNOSPORT">TECHNOSPORT</option>
<option value="TISSOT">TISSOT</option>
<option value="TOMMY HILFIGER">TOMMY HILFIGER</option>
<option value="ZENO">ZENO</option>
<option value="OUTRAS">Outras</option>
</select>
</div>
</div><br>
<div class="col-md-6">
<div class="form-group last mb-3">
<label for="outram">Outras Marcas</label>
<input type="text" class="form-control" placeholder="Outra Marca" id="outram" name="outram">
</div>
</div>
</div>
<div class="d-flex mb-5 mt-4 align-items-center">
<div class="d-flex align-items-center">
<label class="control control--checkbox mb-0"><span class="caption">Ao solicitar a assistência está a concordar com os Termos e Condições.</span>
<input type="checkbox" name="termos" required/>
<div class="control__indicator"></div>
</label>
</div>
</div>
<input type="submit" value="Solicitar Assistência" class="btn px-5 btn-primary">
</form>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

Change the CSS-property display of the -element depending on chosen value in the drop down.
document.querySelector("#dropdown").addEventListener("change", function(e) {
const other = document.querySelector("#other");
if (e.target.value === "other") {
other.style.display = "block";
} else {
other.style.display = "none";
}
});
#other {
display: none;
}
<select id="dropdown">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="other">Other</option>
</select>
<br>
<input id="other" type="text">

Laravel : Fill out a form with several drop-down lists

im looking from a laravel or html example of fill out a form with several drop-down lists.
Here is my case. I have these inputs-text name_customer, phone_customer, email_customer,
I would like that when I select the customer, the form fields are filled with the customer information:(name_customer, phone_customer, email_customer from de database).
This what i have done so far.
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label>N° Commande</label>
<input
type="text"
class="form-control"
v-model="num_order"
name="num_order"
/>
</div>
<div class="form-group">
<label>customer</label>
<div class="form-check form-check-inline mr-1">
<input
onclick="document.getElementById('select_customer').disabled=!this.checked;
document.getElementById('text_name').disabled=this.checked;
document.getElementById('text_Tel').disabled=this.checked;
document.getElementById('text_Email').disabled=this.checked;
document.getElementById('text_address').disabled=this.checked"
class="form-check-input"
id="inline-checkbox1"
type="checkbox"
value="check1"
v-model="num_order"
name="num_order"
/>
<label
class="form-check-label"
for="inline-checkbox1"
>Existant</label
>
<div class="col-md-8">
<select
class="form-control form-control-sm"
id="select_customer"
name="select_customer"
disabled
onclick="document.getElementById('inline-checkbox1').disabled=!this.checked;"
v-model="customers_id"
#change="getcustomers()"
>
<option disabled value="0">
Choisir un customer
</option>
<option
v-for="customer in customers"
v-bind:key="customer.id"
v-bind:value="customer.id"
name="customers_id"
>
{{ customer.name_customer }}
</option>
</select>
</div>
</div>
<input
type="text"
class="form-control"
id="text_name"
placeholder="Name"
v-model="name_customer"
name="name_customer"
/>
</div>
<div class="form-group">
<label>Phone</label>
<input
type="text"
class="form-control"
id="text_Tel"
placeholder="Phone"
/>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>Adresse du customer</label>
<textarea
rows="4"
class="form-control"
id="text_address"
placeholder="Address"
>
</textarea>
</div>
<div class="form-group">
<label>Email</label>
<input
type="text"
class="form-control"
id="text_Email"
placeholder="Email"
/>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>Libellé</label>
<input type="text" class="form-control" />
</div>
<div class="row">
<div class="col-sm-6">
<label>Date Commande</label>
<input type="date" class="form-control" />
</div>
<div class="col-sm-6">
<label>Date Validation</label>
<input type="date" class="form-control" />
</div>
</div>
</div>
</div>
Thank you in advance.

Hi i found the solution to my problem.
<select
class="form-control form-control-sm"
id="select_customer"
name="select_customer"
v-model="customers_id"
#change="getcustomers()"
>
<option disabled value="0">
Choose a customer
</option>
<option
v-for="customer in customers"
v-bind:key="customer.id"
v-bind:value="{
id: customer.id,
name_customer: customer.name_customer,
phone_customer: customer.phone_customer}"
name="customers_id"
>
{{ customer.name_customer }}
</option>
</select>
<div class="form-group">
<label>Name</label>
<input
type="text"
class="form-control"
id="text_name"
v-model="customers_id.name_customer"
/>
</div>
<div class="form-group">
<label>Téléphone</label>
<input
type="text"
class="form-control"
id="text_Tel"
v-model="customers_id.phone_customer"
/>
</div>
var app = new Vue({
el: '#app',
data: {
customers_id: '',
customers: []
}
})
Here is how you can, after a selection from a drop-down list, fill in the input fields, the data obtained from the database.
You can also consult the vuejs documentation on this subject. https://v2.vuejs.org/v2/guide/forms.html#Select

Form submits even when i use prevent default on submit button click

what i want is that when i click on button "find reservation", the form submit should not refresh the page. Instead it should enable some fields in find reservation form underneath. But I am not able to achieve that. I am using bootstrap.
Here is my html part:-
<div class="container">
<div class="jumbotron checkInGuest">
<h3 class="h3Heading">Request for following information from guest</h3>
<form class="form-horizontal" id="checkInForm">
<div class="form-group">
<label for="reservationId" class="col-md-4">Reservation Id</label>
<div class="col-md-8">
<input type="text" class="form-control" id="reservationId" name="reservationId" required>
</div>
</div>
<div class="form-group">
<label for="dlNum" class="col-md-4">Driver License #</label>
<div class="col-md-8">
<input type="number" class="form-control" id="dlNum" min="0" name="dlNum" required>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<button type="submit" class="btn btn-success" id="findResButton">Find Reservation</button>
</div>
</div>
</form>
<!-- Form when info is found. Initially all fields are disabled-->
<div class="clear clearWithBorder"></div>
<h3 class="h3Heading">Information Found</h3>
<form class="form-horizontal">
<div class="form-group">
<label for="resId" class="col-md-3">Reservation Id</label>
<div class="col-md-3">
<input type="text" class="form-control" id="resId" name="resId" disabled>
</div>
<label for="dlNumReadOnly" class="col-md-3">Driver License #</label>
<div class="col-md-3">
<input type="number" class="form-control" id="dlNumReadOnly" min="0" name="dlNumReadOnly" disabled>
</div>
</div>
<div class="form-group">
<label for="guestFullName" class="col-md-3">Guest Full Name</label>
<div class="col-md-3">
<input type="text" class="form-control" id="guestFullName" name="guestFullName" disabled>
</div>
<label for="email" class="col-md-3">Email</label>
<div class="col-md-3">
<input type="email" class="form-control" id="email" name="email" disabled>
</div>
</div>
<div class="form-group">
<label for="numRooms" class="col-md-3">Rooms Booked</label>
<div class="col-md-3">
<input type="number" class="form-control readable" id="numRooms" name="numRooms" disabled>
</div>
<label for="roomType" class="col-md-1">Room Type</label>
<div class=" col-md-2">
<label for="smoking">
<input type="radio" name="roomType" id="smoking" class="roomType readable" disabled> Smoking
</label>
</div>
<div class=" col-md-3">
<label for="nonSmoking">
<input type="radio" name="roomType" id="nonSmoking" class="roomType readable" disabled>Non-Smoking
</label>
</div>
</div>
<div class="form-group">
<label for="discount" class="col-md-3">Discount</label>
<div class="col-md-3">
<select class="form-control readable" id="discount" disabled>
<option selected>0%</option>
<option>10%</option>
<option>20%</option>
<option>30%</option>
</select>
</div>
<label for="checkInDate" class="col-md-3">CheckIn Date</label>
<div class="col-md-3">
<input type="date" class="form-control readable" id="checkInDate" name="checkInDate" disabled>
</div>
</div>
<div class="form-group">
<label for="checkOutDate" class="col-md-3">CheckOut Date</label>
<div class="col-md-9">
<input type="date" class="form-control readable" id="checkOutDate" name="checkInDate" disabled>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<button type="button" class="btn btn-success" id="roomOrdButton">Confirm Room Order</button>
</div>
</div>
</form>
<div class="clear clearWithBorder"></div>
<h3 class="h3Heading">Final Room Order</h3>
<form class="form-horizontal">
<div class="form-group">
<label for="perInEachRoom" class="col-md-12">Number of people in each room</label>
<div class="col-md-8 " id="perInEachRoom">
</div>
<div class="form-group">
<div class="col-md-2">
<button type="button" class="btn btn-success" id="checkInButton">Check In</button>
</div>
</div>
</div>
</form>
</div>
</div>
And this is jquery part:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$("#checkInForm").validator();
$("#findResButton").click(function(e){
e.preventDefault();
$(".readable").prop("disabled",false);
});
$("#roomOrdButton").click(function(){
var numberOfRooms=$("#numRooms").val();
var counter=0;
var container=$('<div/>');
$(".readable").prop("disabled",true);
for(counter=1;counter<=numberOfRooms;counter++){
container.append('<label for="room">Room '+counter+'</label><input type="number" class="form-control readable" name="checkInDate" />');
}
$("#perInEachRoom").html(container);
});
$("#checkInButton").click(function(){
$("#perInEachRoom").html("");
});
</script>

You need to put your code in a document.ready() function, so:
$(document).ready(function() {
$("#checkInForm").validator();
$("#findResButton").click(function(e){
e.preventDefault();
$(".readable").prop("disabled",false);
});
$("#roomOrdButton").click(function(){
var numberOfRooms=$("#numRooms").val();
var counter=0;
var container=$('<div/>');
$(".readable").prop("disabled",true);
for(counter=1;counter<=numberOfRooms;counter++){
container.append('<label for="room">Room '+counter+'</label><input type="number" class="form-control readable" name="checkInDate" />');
}
$("#perInEachRoom").html(container);
});
$("#checkInButton").click(function(){
$("#perInEachRoom").html("");
});
});
You should also have a look at this question: Form is submitted when I click on the button in form. How to avoid this?
Long story short, you should use
<button type="button"...
not
<button type="submit"...

Actually, all I did is:-
$("#checkInForm").submit(function(e)
{
e.preventDefault();
});
And that solved it. I didnt have to change button type or anything. Basically, in future when I will make AJAX calls I will have the code underneath preventDefault statement.

when one option selected in one drop down list then how to display its related value in another drop down list using javascript

<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Registration.aspx.cs" Inherits="Practical_5.View.Registration" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap</title>
<link href="../Content/bootstrap.css" rel="stylesheet" />
<script type="text/javascript">
//function Change() {
// if ((document.getElementById('India').checked)) {
// document.getElementById('div1').style.visibility = "visible";
// }
// else {
// document.getElementById('di1v').style.visibility = "hidden";
// }
//}
function toggleDiv() {
// first check if display then hide otherwise show
if ((document.getElementById('div1').style.display == 'none')) {
document.getElementById('div1').style.display = "block";
document.getElementById('div2').style.display = "none";
}
else {
document.getElementById('div1').style.display = "none";
document.getElementById('div2').style.display = "block";
}
}
</script>
</head>
<body>
<div style="background-color: red; font-size: x-large; font-weight: bold; text-align: center"><span>You are registering for Matrimony Meet "Matrimonial Get Together - Pune - 22-Aug-2015"</span></div>
<form id="form1" runat="server">
<div class="container">
<div class="panel">
<div class="panel panel-default">
<div class="panel-heading">
<img src="../Images/BJS_Logo-hindi.png" alt="logo" style="height: 71px; width: 161px" />
<label class="pull-right" style="font-size: x-large; vertical-align:bottom;margin-top:15px;">Register</label>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="fname">First Name</label>
<input type="text" class="form-control" id="fname" placeholder="First Name" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="mname">Middle Name</label>
<input type="text" class="form-control" id="mname" placeholder="Middle Name" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="lname">Last Name</label>
<input type="text" class="form-control" id="lname" placeholder="Last Name" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="sell">Gender</label>
<select class="form-control" id="sel1">
<option>Select</option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="mnunber">Mobile Number</label>
<input type="text" class="form-control" id="mnumber" placeholder="Mobile Number" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-1">
<label>India</label>
<div class="row">
<div class="col-md-1">
<div class="checkbox">
<label>
<input value="" type="checkbox" onchange="toggleDiv()" id="India" />India</label>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<label>Address</label>
<div class="form-group">
<textarea class="form-control" rows="5" id="address" placeholder="Address"></textarea>
</div>
</div>
<div class="col-md-8">
<div id="div1" style="display:none;" class="row">
<div class="col-md-6">
<div class="form-group">
<label for="state">State</label>
<select class="form-control" id="State">
<option class="active">Select State</option>
<option>Maharashtra</option>
<option>Andhra Pradesh</option>
<option>Gujrat</option>
</select>
</div>
</div>
if i select state as maharashtra then i want to display all the cities of maharashtra in following dropdown list.
<div class="col-md-6">
<div class="form-group">
<label for="city">City</label>
<select class="form-control" id="city">
<option class="active">Select City</option>
</select>
i want to display automatcally the city dropdown list as
Pune
nagpur
mumbai
nashik
......
......
</div>
</div>
</div>
in above code there are div having id div1. in that div there are two dropdown list one for state and one for city. suppose i select one option in state dropdown list eg. i select state maharashtra then i want display all the cities of maharashtra in another dropdown list which is city. how i should
<div id="div2" style="display:block;" class="row">
<div class="col-md-6">
<div class="form-group">
<label for="state">State</label>
<input type="text" class="form-control" id="Text2" placeholder="Enter State" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="city">City</label>
<input type="text" class="form-control" id="Text3" placeholder="Enter City" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="zip">Country</label>
<select class="form-control" id="Select1">
<option class="active">Select Country</option>
<option>India</option>
<option>US</option>
<option>Singapore</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="zip">Zip</label>
<input type="text" class="form-control" id="zip" placeholder="Enter Zip" />
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="lid">Login ID</label>
<input type="text" class="form-control" id="lid" placeholder="Login ID" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="pwd">Password</label>
<input type="text" class="form-control" id="pwd" placeholder="Password" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="cpwd">Conform Password</label>
<input type="text" class="form-control" id="cpwd" placeholder="Conform Password" />
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-3">
<button type="button" class="btn btn-primary">Register Me!</button>
<button type="button" class="btn btn-primary">Cancel</button>
</div>
<div class="col-md-4"></div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
please help me how should i do this???

Please see the following working example
function populateStates(countryElementId, stateElementId) {
var selectedCountryIndex = document.getElementById(countryElementId).selectedIndex;
var stateElement = document.getElementById(stateElementId);
stateElement.length = 0; // Fixed by Julian Woods
stateElement.options[0] = new Option('Select State', '');
stateElement.selectedIndex = 0;
var state_arr = s_a[selectedCountryIndex].split("|");
for (var i = 0; i < state_arr.length; i++) {
stateElement.options[stateElement.length] = new Option(state_arr[i], state_arr[i]);
}
}
function populateCountries(countryElementId, stateElementId) {
// given the id of the <select> tag as function argument, it inserts <option> tags
var countryElement = document.getElementById(countryElementId);
countryElement.length = 0;
countryElement.options[0] = new Option('Select Country', '-1');
countryElement.selectedIndex = 0;
for (var i = 0; i < country_arr.length; i++) {
countryElement.options[countryElement.length] = new Option(country_arr[i], country_arr[i]);
}
// Assigned all countries. Now assign event listener for the states.
if (stateElementId) {
countryElement.onchange = function () {
populateStates(countryElementId, stateElementId);
};
}
}
https://jsfiddle.net/mq313sga/