I have a problem when I click collapse button - javascript

I have a problem. The view is like this :
When I click button see more the view is like this :
The problem is, I want the view is like this :
city beside state,
country beside zip code
How to fix this ? and what should I have to do ?
<div class="row col-md-12 col-12 mb-20 collapse" id="registerform">
<div class="col-md-6 mb-20">
<label>City</label>
<input class="mb-0" type="text" name="city" placeholder="City" value="<?= set_value('city'); ?>">
<?= form_error('city', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
<div class="col-md-6 mb-20">
<label>State</label>
<input class="mb-0" type="text" name="province" placeholder="State" value="<?= set_value('province'); ?>">
<?= form_error('province', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
<div class="col-md-6 mb-20">
<label>Country</label>
<input class="mb-0" type="text" name="country" value="Indonesia" readonly>
</div>
<div class="col-md-6 mb-20">
<label>Zip Code</label>
<input class="mb-0" type="text" name="zipcode" placeholder="Zipcode" value="<?= set_value('zipcode'); ?>">
<?= form_error('zipcode', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
<div class="col-md-6 mb-20">
<label>Phone Number</label>
<input class="mb-0" type="text" name="phonenumber" placeholder="Phone Number" value="<?= set_value('phonenumber'); ?>">
<?= form_error('phonenumber', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
<input class="mb-0" type="text" name="date_created" value="<?= date('Y-m-d H:i:s');?>" hidden>
<div class="col-12">
<button type="submit" name="register" class="register-button mt-0">Register</button>
</div>
</div>
<a class="cokcok" data-toggle='collapse' href='#registerform' style="margin-left: 15px;">See more...</a>

<div class="row col-md-12 col-12 mb-20 collapse" id="registerform">
<div class="row">
<div class="col-md-6 mb-20">
<label>City</label>
<input class="mb-0" type="text" name="city" placeholder="City" value="">
</div>
<div class="col-md-6 mb-20">
<label>State</label>
<input class="mb-0" type="text" name="province" placeholder="State" value="">
</div>
</div>
<div class="row">
<div class="col-md-6 mb-20">
<label>Country</label>
<input class="mb-0" type="text" name="country" value="Indonesia" readonly>
</div>
<div class="col-md-6 mb-20">
<label>Zip Code</label>
<input class="mb-0" type="text" name="zipcode" placeholder="Zipcode" value="">
</div>
</div>
<div class="row">
<div class="col-md-6 mb-20">
<label>Phone Number</label>
<input class="mb-0" type="text" name="phonenumber" placeholder="Phone Number" value="">
</div>
</div>
<input class="mb-0" type="text" name="date_created" value="" hidden>
<div class="col-12">
<button type="submit" name="register" class="register-button mt-0">Register</button>
</div>
See more...

You're using col-md-6 so I think you should actually get the result you want in larger viewports. You could use col-6 which should work even in small viewports:
<div class="row col-md-12 col-12 mb-20 collapse" id="registerform" >
<div class="row mb-20">
<div class="col-6">
<label>City</label>
<input class="mb-0" type="text" name="city" placeholder="City" value="<?= set_value('city'); ?>">
<?= form_error('city', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
<div class="col-6">
<label>State</label>
<input class="mb-0" type="text" name="province" placeholder="State" value="<?= set_value('province'); ?>">
<?= form_error('province', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
</div>
<div class="row mb-20">
<div class="col-6">
<label>Country</label>
<input class="mb-0" type="text" name="country" value="Indonesia" readonly>
</div>
<div class="col-6">
<label>Zip Code</label>
<input class="mb-0" type="text" name="zipcode" placeholder="Zipcode" value="<?= set_value('zipcode'); ?>">
<?= form_error('zipcode', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
</div>
<div class="col-md-6 mb-20">
<label>Phone Number</label>
<input class="mb-0" type="text" name="phonenumber" placeholder="Phone Number" value="<?= set_value('phonenumber'); ?>">
<?= form_error('phonenumber', '<small class="text-danger pl-2">', '</small>'); ?>
</div>
<input class="mb-0" type="text" name="date_created" value="<?= date('Y-m-d H:i:s');?>" hidden>
<div class="col-12">
<button type="submit" name="register" class="register-button mt-0">Register</button>
</div>
</div>
<a class="cokcok" data-toggle='collapse' href='#registerform' style="margin-left: 15px;">See more...</a>

Related

If checkbox is checked then enable all input field

I'm having a trouble with enabling the input fields via a checkbox in the modal dialog. I tried using the code below but it only works with the first data in the modal. When I closed the modal and select the other user, it is not working.
FIRST DATA: Works fine!
SECOND DATA: As you can see the EDIT button was enabled but the input fields is not.
SCRIPT:
<script>
function enableFields() {
var cb_edit=document.getElementById("cb_edit");
if(cb_edit.checked) {
document.getElementById("user_type").disabled = false;
document.getElementById("stat").disabled = false;
document.getElementById("dept").disabled = false;
document.getElementById("fname").disabled = false;
} else {
document.getElementById("user_type").disabled = true;
document.getElementById("stat").disabled = true;
document.getElementById("dept").disabled = true;
document.getElementById("fname").disabled = true;
}
}
</script>
CHECKBOX BUTTON:
<input class="form-check-input" type="checkbox" id="cb_edit" onclick="enableFields();">
<label class="form-check-label" for="flexSwitchCheckDefault">Edit</label>
MODAL
<div class="modal-body">
<div class="col-md-12 col-12">
<div class="card">
<div class="card-content">
<div class="card-body">
<div class="form-body">
<div class="row">
<form class="form form-vertical" method="post" action="db_user_update.php">
<div class="form-body">
<div class="row">
<div class="col-6">
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">User ID</span>
<input type="text" class="form-control" aria-label="User ID" name="u_id"
aria-describedby="inputGroup-sizing-default" id="u_id" value="<?php echo $row['u_id']; ?>" readonly>
</div>
</div>
<div class="col-6">
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Status</label>
<select class="form-select el_dis" id="stat" name="stat" value="<?php echo $row['stat']; ?>" >
<option value="" disabled>Choose...</option>
<option value="0" <?php if($row['stat']==0) echo 'selected="selected"'; ?>>Active</option>
<option value="1" <?php if($row['stat']==1) echo 'selected="selected"'; ?>>Deactivated</option>
</select>
</div>
</div>
<div class="col-6">
<div class="form-group has-icon-left">
<label for="first-name-icon">First Name</label>
<div class="position-relative">
<input type="text" class="form-control el_dis" name="fname"
placeholder="First Name" id="fname" value="<?php echo $row['fname']; ?>">
<div class="form-control-icon">
<i class="bi bi-person"></i>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group has-icon-left">
<label for="first-name-icon">Middle Name</label>
<div class="position-relative">
<input type="text" class="form-control el_dis" name="mname"
placeholder="Middle Name" id="mname" value="<?php echo $row['mname']; ?>">
<div class="form-control-icon">
<i class="bi bi-person"></i>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group has-icon-left">
<label for="first-name-icon">Last Name</label>
<div class="position-relative">
<input type="text" class="form-control el_dis" name="lname"
placeholder="Last Name" id="lname" value="<?php echo $row['lname']; ?>">
<div class="form-control-icon">
<i class="bi bi-person"></i>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group has-icon-left">
<label for="first-name-icon">Suffix</label>
<div class="position-relative">
<input type="text" class="form-control el_dis" name="suffix"
placeholder="Suffix" id="suffix" value="<?php echo $row['suffix']; ?>">
<div class="form-control-icon">
<i class="bi bi-person"></i>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group has-icon-left">
<label for="first-name-icon">Department</label>
<div class="position-relative">
<fieldset class="form-group">
<select class="form-select el_dis" id="dept" name="dept" value="<?php echo $row['dept']; ?>">
<option value="" disabled selected>Choose...</option>
<option value="GS" <?php if($row['dept']=="GS") echo 'selected="selected"'; ?>>Elementary</option>
<option value="JHS" <?php if($row['dept']=="JHS") echo 'selected="selected"'; ?>>Junior High School</option>
<option value="SHS" <?php if($row['dept']=="SHS") echo 'selected="selected"'; ?>>Senior High School</option>
</select>
</fieldset>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group has-icon-left">
<label for="first-name-icon">User Type</label>
<div class="position-relative">
<fieldset class="form-group">
<select class="form-select el_dis" id="user_type" name="user_type" value="<?php echo $row['user_type']; ?>">
<option value="" disabled selected>Choose...</option>
<option value="S" <?php if($row['user_type']=="S") echo 'selected="selected"'; ?>>Student</option>
<option value="E" <?php if($row['user_type']=="E") echo 'selected="selected"'; ?>>Employee</option>
<option value="P" <?php if($row['user_type']=="P") echo 'selected="selected"'; ?>>Parent</option>
</select>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer justify-content-between">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="cbEdit" name="cbEdit" onclick="terms_changed(this)">
<label class="form-check-label" for="flexSwitchCheckDefault">Edit</label>
</div>
<input type="hidden" class="form-control" name="u_id" id="u_id" value="<?php echo $row['u_id']; ?>">
<button type="submit" class="btn btn-primary ml-1 el_dis" id="btnUpdate" value="update" name="update">
<i class="bx bx-check d-block d-sm-none"></i>
<span class="d-none d-sm-block"><i class="fa fa-paper-plane" aria-hidden="true"></i> Update</span>
</button>
<button type="button" class="btn btn-light-secondary" data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block"><i class="fa fa-times" aria-hidden="true"></i> Close</span>
</button>
<div>
</form>

How to make entire form readonly /disabled but when a button clicked it should be enabled

maybe this question has been asked before, but for my case, an error occurred. I have followed the guidelines here by using jquery.
In my case: When the button is clicked the form changes to enable, but only one second. Then the form changes to be disabled again.
jquery
$(document).ready(function() {
$('.toggleInputs').find('input').prop('disabled', true);
$('.toggleInputs').find('select').prop('disabled', true);
$('.toggleInputs').find('textarea').prop('disabled', true);
});
$('#btnEdit').on('click', function() {
$('.toggleInputs').find('input').prop('disabled', false);
$('.toggleInputs').find('select').prop('disabled', false);
$('.toggleInputs').find('textarea').prop('disabled', false)
});
form html
<form class="toggleInputs" method="post" action="">
<div class="form-group row">
<label class="col-md-3 col-form-label">NIS</label>
<div class="col-md-2">
<input value="<?php echo $nis;?>" name="nisn" placeholder="NIS" class="form-control" required="required" type="text" >
</div>
<div class="col-md-2">
<button id="btnEdit" class="btn btn-danger">UBAH</button>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">NAMA LENGKAP</label>
<div class="col-md-5">
<input id="inputSiswa" value="<?php echo $nama_siswa;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text" >
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">TEMPAT LAHIR</label>
<div class="col-md-3">
<input value="<?php echo $tempatLahir;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text" >
</div>
<label class="col-md-2 col-form-label">TANGGAL LAHIR</label>
<div class="col-md-3">
<input value="<?php echo $tanggalLahir;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text" >
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">JENIS KELAMIN</label>
<div class="col-md-4">
<select name="jenisKelamin" class="form-control"><option class="form-control" selected>Laki-laki</option>
<option class="form-control" >Perempuan</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" readonly>ALAMAT</label>
<div class="col-md-5">
<textarea name="infoguru" cols="40" rows="4" class="form-control" ><?php echo $alamatSiswa;?></textarea>
</div>
</div>
</form>
You need to set disabled property to the value disabled I know it is confusing,
$('.toggleInputs input,.toggleInputs select,.toggleInputs textarea')
.prop("disabled","disabled");
and to enable them back, you just remove the property disabled.
$('.toggleInputs input,.toggleInputs select,.toggleInputs textarea')
.removeProp("disabled");
Don't rely on setting the property to true/false because different browsers don't support it that way.
$(document).ready(function(){
$('.toggleInputs input,.toggleInputs select,.toggleInputs textarea').prop("disabled","disabled");
$('#btnEdit').click(function(){
$('.toggleInputs input,.toggleInputs select,.toggleInputs textarea').removeProp("disabled");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form class="toggleInputs" method="post" action="">
<div class="form-group row">
<label class="col-md-3 col-form-label">NIS</label>
<div class="col-md-2">
<input value="<?php echo $nis;?>" name="nisn" placeholder="NIS" class="form-control" required="required" type="text">
</div>
<div class="col-md-2">
<button id="btnEdit" class="btn btn-danger">UBAH</button>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">NAMA LENGKAP</label>
<div class="col-md-5">
<input id="inputSiswa" value="<?php echo $nama_siswa;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">TEMPAT LAHIR</label>
<div class="col-md-3">
<input value="<?php echo $tempatLahir;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text">
</div>
<label class="col-md-2 col-form-label">TANGGAL LAHIR</label>
<div class="col-md-3">
<input value="<?php echo $tanggalLahir;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">JENIS KELAMIN</label>
<div class="col-md-4">
<select name="jenisKelamin" class="form-control">
<option class="form-control" selected>Laki-laki</option>
<option class="form-control">Perempuan</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" readonly>ALAMAT</label>
<div class="col-md-5">
<textarea name="infoguru" cols="40" rows="4" class="form-control"><?php echo $alamatSiswa;?></textarea>
</div>
</div>
</form>
PS: For some reason, the StackOverflow snippet gives an error when my code runs to re-enable the controls back. But for a moment, you can witness the controls being enabled again, before the error message appears.
May be You have not referenced a jQuery library.
You have to include a line similar to this in your HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
If you referenced jQuery then change priority first add jQuery and then other js.

Event focus on select with Materialize

I want to add a class when a select has event select, this is my code:
$("form").find("input,select").on('focus',function(){
$(this).addClass("focus");
});
$("form").find("input,select").on('blur',function(){
$(this).removeClass("focus");
});
This is my HTML:
<form id="formEdit" method="post" action="<?=current_url();?>" enctype="multipart/form-data">
<div class="form-pad">
<div class="row">
<!--<div class="col s12 m8 push-m4">-->
<div class="col s12">
<div class="input-field">
<input id="nombre" name="nombre" type="text" class="validate" onkeypress="return valid_text(event)" maxlength="20" value="<?=$nombre;?>" required>
<input name="userID" type="hidden" value="<?=$userID;?>">
<input name="status" type="hidden" value="<?=$status;?>">
<label for="nombre" class="active">Nombres</label>
</div>
<div class="input-field">
<input name="apellidos" type="text" class="validate" onkeypress="return valid_text(event)" maxlength="30" value="<?=$apellidos;?>" required>
<label for="apellidos" class="active">Apellidos</label>
</div>
<div class="input-field">
<input name="email" type="email" class="validate" maxlength="49" value="<?=$correo;?>" required>
<label for="email" class="active">Correo Electrónico</label>
</div>
<div class="input-field">
<select id="select_privilegios" name="FK_id_rol" required>
<?=($id_rol=='') ? '<option value="" disabled selected>Seleccionar</option>': ''?>
<?php
foreach ($roles as $role) {
echo '<option value="'.$role->roleId.'" '.(($id_rol == (int)$role->roleId) ? 'selected': '').'>'.$role->role.'</option>';
}
?>
</select>
<label>Privilegios</label>
</div>
<div id="div_empresas" class="input-field">
<select name="id_empresa[]" id="select_empresas" multiple required>
<?php
$ids = array_map(function($e) {
return is_object($e) ? $e->id_empresa : $e['id_empresa'];
}, $id_empresa);
foreach ($empresas as $empresa) {
echo '<option value="'.$empresa->id_empresa.'" '.(in_array($empresa->id_empresa, $ids) ? 'selected': '').'>'.$empresa->nombre .'</option>';
}
?>
</select>
<label>Empresas</label>
</div>
</div>
</div>
<!-- Save Cancelar -->
<div class="row">
<div class="col s12 m12 l12 buttons" style="padding: 0">
<div id="botones">
<button class="waves-effect waves-light btn" type="submit" name="action1"><i class="material-icons right">done</i>Guardar</button>
<?php if($userID>0): ?>
<span href="#warningModal" class="modal-trigger waves-effect waves-light btn <?=($status)? "red lighten-1" : "blue darken-4";?>"><i class="material-icons right"><?=($status)? "delete" : "lock_open";?></i><?=($status)? "Eliminar" : "Habilitar";?></span>
<button type="submit" name="action2" class="hide"></button>
<?php endif; ?>
<i class="material-icons right">clear</i>Cancelar
</div>
</div>
</div>
</div>
</form>
This code work very well in input text or other types of input but, in select elements don´t detect the focus event. If someone could help me,
I would appreciate it very much.

Javascript event.preventDefault() not working on Safari, but working on Chrome and Firefox

Hi, guys:
For some resaon the event.preventDefault() function not working on safari browser, but working fine on Google Chrome and Firefox. What I want to do is prevent the user to submit the form, unless they finish the google reCAPTCHA(Version 2). Please let me know how can I fix this issue. Appreciate you help.
Here is the code:
<div class="row">
<h4>
<center></center>
</h4>
<form action="http://g/r59jr" method="POST" id="form">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<label for="firstname">First Name<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small></label>
<input type="text" class="form-control" name="First" placeholder="First Name" value="<?php echo set_value('First'); ?>" autocomplete="given-name" required>
</div>
<div class="form-group">
<label for="firstname"> Last Name<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small></label>
<input type="text" class="form-control" name="Last" placeholder="Last Name" value="<?php echo set_value('Last'); ?>" autocomplete="given-name" required>
</div>
<div class="form-group">
<label style="font-weight:bold;" for="email">Email<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small></label>
<input type="email" class="form-control" id="email" placeholder="Enter Email" name="email" autocomplete="email" value="<?php echo set_value('email'); ?>" required>
</div>
<div class="form-group">
<label style="font-weight:bold;" for="phone">Phone Number</label>
<input type="text" class="form-control" id="phone" placeholder="Phone Number" name="Phone" autocomplete="cellphone" value="<?php echo set_value('Phone'); ?>">
<span><small></small></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="row top30 ">
<div class="col-sm-12">
<label for="agreeTOS">
<input type="checkbox" id="agreeTOS" name="agreeTOS" value='1' <?php echo set_checkbox('agreeTOS','1'); ?> required> I agree to the Privacy Policy<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small>
</label>
</div>
</div>
<div class="row top30 ">
<div class="col-sm-12">
<!--change-->
<div class="g-recaptcha" data-sitekey="6example.........."></div><br>
<button type="submit" value="<?php echo set_value('Submit'); ?>" class="btn btn-success btn-primary btn-lg signup submit_information_request btn-block" name="submitBtn" id="submitBtn">Sign-Up</button>
</form>
<!--change-->
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
$('#form').submit(function(event) {
var verified = grecaptcha.getResponse();
if (verified.length === 0) {
event.preventDefault();
}
});
});
</script>
</div>
</div>
</div>
</div>

How to Show/Hide the Div using Button

First, i wanted to automatically hide div part, then if i click the add guardian button. It will show the div part. Here's my code. Thankyou in Advance. Also i indicate my script here. Please check, thankyouuu!
<div align="right">
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row" id="guardian">
<h4 class="title-well">Guardian</h4>
<div class="checkbox">
<label> <input id="chkGuardian" type="checkbox">DECEASED
</label>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianFirstName"><span
class="text-danger">*</span> First Name</label> <input
rv-value="applicant:personalInformation:guardianFirstName"
class="form-control input-lg" name="guardianFirstName" id="guardianFirstName"
data-validate="required" placeholder="Enter First Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMiddleName"><span
class="text-danger">*</span> Middle Name</label> <input
class="form-control input-lg" name="guardianMiddleName"
rv-value="applicant:personalInformation:guardianMiddleName"
id="guardianMiddleName" data-validate="required"
placeholder="Enter Middle Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianLastName"><span
class="text-danger">*</span> Last Name</label> <input
rv-value="applicant:personalInformation:guardianLastName"
class="form-control input-lg" name="guardianLastName" id="guardianLastName"
data-validate="required" placeholder="Enter Last Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianNationality"><span
class="text-danger">*</span> Nationality</label> <input
rv-value="applicant:personalInformation:guardianNationality"
class="form-control input-lg" name="guardianNationality" id="guardianNationality"
data-validate="required" placeholder="Enter Nationality" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="dateOfBirth"><span
class="text-danger">*</span> Date of Birth</label>
<div class="input-group">
<input id="dateOfBirth" name="dateOfBirth"
rv-value="applicant:personalInformation:guardianDateOfBirth | date"
type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-4">
<div class="input-group-addon">
<i class="entypo-calendar"></i>
</div>
</div>
</div>
</div>
<div id="guardianDeceased">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianHomeNumber"><span
class="text-danger">*</span> Home Number</label> <input
rv-value="applicant:personalInformation:guardianHomeNumber"
class="form-control input-lg" name="guardianHomeNumber" id="guardianHomeNumber"
data-validate="required" placeholder="Enter Home Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMobileNumber"><span
class="text-danger">*</span> Mobile Number</label> <input
rv-value="applicant:personalInformation:guardianMobileNumber"
class="form-control input-lg" name="guardianMobileNumber" id="guardianMobileNumber"
data-validate="required" placeholder="Enter Mobile Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="inputEmail" class="control-label"><span
class="text-danger">*</span>Email</label> <input
rv-value="applicant:personalInformation:guardianEmailAddress"
type="email" class="form-control input-lg" name="inputEmail" id="inputEmail"
placeholder="Email" data-validate="required" data-parsley-required="true" data-parsley-group="wizard-step-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="checkbox col-sm-12">
<label> <input id="guardianCurrentAddress" type="checkbox">Address same as Current Address
</label>
</div>
</div>
</div>
<div id="guardianAdd">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="guardianStreetAddress"><span
class="text-danger">*</span> Street Address</label> <input
rv-value="applicant:personalInformation:guardianStreetAddress"
class="form-control input-lg" name="guardianStreetAddress" id="guardianStreetAddress"
data-validate="required" placeholder="Enter Street Address" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCity">City</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianCity"
type="text" class="form-control input-lg ref-city" name="guardianCity"
id="guardianCity" data-validate="required">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianProvince">Province</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianProvince"
type="text" id="guardianCity" name="guardianCity"
class="form-control input-lg ref-province">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCountry"><span class="text-danger">*</span>Country</label>
<select
rv-value="applicant:personalInformation:guardianCountry"
name="guardianCountry" class="form-control input-lg ref-country"
id="guardianCountry">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianPostalCode"><span class="text-danger">*</span>Zip Code</label>
<input class="form-control input-lg"
rv-value="applicant:personalInformation:guardianPostalCode"
name="guardianPostalCode" id="guardianPostalCode"
data-validate="required" placeholder="Zip Code" />
</div>
</div>
</div>
</div>
<!-- End Guardian -->
<script type="text/javascript">
function toggle_div_fun(id){
var divelement = document.getElementById(id);
if(divelement.style.display == 'none')
divelement.style.display == 'block';
else
divelement.style.display == 'none';
}
</script>
Since you're using Bootstrap, just use the collapse component..
<div align="right">
<button data-toggle="collapse" data-target="#guardian" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row collapse" id="guardian">
...
Demo: http://www.codeply.com/go/0jvcrckYOL
A tiny error in your code, you had == where you need a single =
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';
function toggle_div_fun(id){
var divelement = document.getElementById(id);
if(divelement.style.visibility == 'hidden')
divelement.style.visibility = 'visible';
else
divelement.style.visibility = 'hidden';
}
<div align="right">
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row" id="guardian">
<h4 class="title-well">Guardian</h4>
<div class="checkbox">
<label> <input id="chkGuardian" type="checkbox">DECEASED
</label>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianFirstName"><span
class="text-danger">*</span> First Name</label> <input
rv-value="applicant:personalInformation:guardianFirstName"
class="form-control input-lg" name="guardianFirstName" id="guardianFirstName"
data-validate="required" placeholder="Enter First Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMiddleName"><span
class="text-danger">*</span> Middle Name</label> <input
class="form-control input-lg" name="guardianMiddleName"
rv-value="applicant:personalInformation:guardianMiddleName"
id="guardianMiddleName" data-validate="required"
placeholder="Enter Middle Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianLastName"><span
class="text-danger">*</span> Last Name</label> <input
rv-value="applicant:personalInformation:guardianLastName"
class="form-control input-lg" name="guardianLastName" id="guardianLastName"
data-validate="required" placeholder="Enter Last Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianNationality"><span
class="text-danger">*</span> Nationality</label> <input
rv-value="applicant:personalInformation:guardianNationality"
class="form-control input-lg" name="guardianNationality" id="guardianNationality"
data-validate="required" placeholder="Enter Nationality" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="dateOfBirth"><span
class="text-danger">*</span> Date of Birth</label>
<div class="input-group">
<input id="dateOfBirth" name="dateOfBirth"
rv-value="applicant:personalInformation:guardianDateOfBirth | date"
type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-4">
<div class="input-group-addon">
<i class="entypo-calendar"></i>
</div>
</div>
</div>
</div>
<div id="guardianDeceased">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianHomeNumber"><span
class="text-danger">*</span> Home Number</label> <input
rv-value="applicant:personalInformation:guardianHomeNumber"
class="form-control input-lg" name="guardianHomeNumber" id="guardianHomeNumber"
data-validate="required" placeholder="Enter Home Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMobileNumber"><span
class="text-danger">*</span> Mobile Number</label> <input
rv-value="applicant:personalInformation:guardianMobileNumber"
class="form-control input-lg" name="guardianMobileNumber" id="guardianMobileNumber"
data-validate="required" placeholder="Enter Mobile Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="inputEmail" class="control-label"><span
class="text-danger">*</span>Email</label> <input
rv-value="applicant:personalInformation:guardianEmailAddress"
type="email" class="form-control input-lg" name="inputEmail" id="inputEmail"
placeholder="Email" data-validate="required" data-parsley-required="true" data-parsley-group="wizard-step-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="checkbox col-sm-12">
<label> <input id="guardianCurrentAddress" type="checkbox">Address same as Current Address
</label>
</div>
</div>
</div>
<div id="guardianAdd">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="guardianStreetAddress"><span
class="text-danger">*</span> Street Address</label> <input
rv-value="applicant:personalInformation:guardianStreetAddress"
class="form-control input-lg" name="guardianStreetAddress" id="guardianStreetAddress"
data-validate="required" placeholder="Enter Street Address" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCity">City</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianCity"
type="text" class="form-control input-lg ref-city" name="guardianCity"
id="guardianCity" data-validate="required">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianProvince">Province</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianProvince"
type="text" id="guardianCity" name="guardianCity"
class="form-control input-lg ref-province">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCountry"><span class="text-danger">*</span>Country</label>
<select
rv-value="applicant:personalInformation:guardianCountry"
name="guardianCountry" class="form-control input-lg ref-country"
id="guardianCountry">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianPostalCode"><span class="text-danger">*</span>Zip Code</label>
<input class="form-control input-lg"
rv-value="applicant:personalInformation:guardianPostalCode"
name="guardianPostalCode" id="guardianPostalCode"
data-validate="required" placeholder="Zip Code" />
</div>
</div>
</div>
</div>
<!-- End Guardian -->
here I'm giving you the short demo. prefer below is your example. where you have to toggle DIV with class " Your_Class ".
HTML
<div class="Your_Class">
"Your Content"
</div>
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
CSS
.Your_Class { display:none;}
.Your_Class.active { display:block;}
JS
$(".btn-primary").click(function(){
if($(".Your_Class").hasClass('active')) {
$(this).removeClass('active');
}
else
{
$(this).addClass('active');
}
});

Categories