Dynamically add new rows if option is equal to value - javascript

I've created a specific form in bootstrap. however i would like to make this dynamic so that it shows fields depending on a field value. For instance how can i add a textarea if the value of the option field is 1 or 2?
<div class="container">
<h3>Kontakt</h3>
<div class="row">
<div class="form-group form-group-options col-lg-6 col-centered">
<div class="input-group input-group-option col-xs-12 col-centered">
<input type="text" name="option[]" class="form-control" placeholder="Navn">
</div>
<div class="input-group input-group-option col-xs-12 col-centered">
<input type="text" name="option[]" class="form-control" placeholder="Email">
</div>
<div class="input-group input-group-option col-xs-12 col-centered">
<input type="text" name="option[]" class="form-control" placeholder="Address">
</div>
<div class="input-group input-group-multiple-select col-xs-12">
<select class="form-control" name="values[]">
<option value="">Vælg</option>
<option value="1">Tilflytning</option>
<option value="2">Fraflytning</option>
<option value="3">Andet</option>
</select>
</div>
</div>
</div>
</div>
https://jsfiddle.net/DTcHh/12528/


A change event its what you need
$('#select').change(function(){
$(this).val()=="1" || $(this).val()=="2" ? $('#textarea').removeClass("hidden") : $('#textarea').addClass("hidden");
}).trigger("change");
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
body {
margin: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h3>Kontakt</h3>
<div class="row">
<div class="form-group form-group-options col-lg-6 col-centered">
<div class="input-group input-group-option col-xs-12 col-centered">
<input type="text" name="option[]" class="form-control" placeholder="Navn">
</div>
<div class="input-group input-group-option col-xs-12 col-centered">
<input type="text" name="option[]" class="form-control" placeholder="Email">
</div>
<div class="input-group input-group-option col-xs-12 col-centered">
<input type="text" name="option[]" class="form-control" placeholder="Address">
</div>
<div class="input-group input-group-multiple-select col-xs-12">
<select id="select" class="form-control" name="values[]">
<option value="">Vælg</option>
<option value="1">Tilflytning</option>
<option value="2">Fraflytning</option>
<option value="3">Andet</option>
</select>
</div>
<div class="input-group input-group-option col-xs-12 col-centered">
<textarea class="form-control" id="textarea"></textarea>
</div>
</div>
</div>
</div>


you can exploit change event. You can do something like this:
$('select').on('change',function(e){
//Insert your conditions, for example:
if($(this).val()=='2'|| $(this).val()=='3'){
//Insert here what you want, for example:
$('<p>Test</p>').insertAfter('.input-group-multiple-select');
}
})
Fiddle
Let me now it this was useful.


A bit late, but this is my contribution:
jQuery(document).ready(function ($) {
$("select[name='values\[\]']").on("change", function () {
if ($(this).val() == 1 || $(this).val() == 2) {
$("#textarea").remove();
$("<div id='textarea' class='input-group input-group-option col-xs-12 col-centered'><textarea name=''></textarea></div>")
.insertAfter(this)
.parent();
} else {
$("#textarea").remove();
}
});
});
Fiddle

Related

JQuery - Hiding/Showing items on form based on checkbox/select

I am hiding inputs on my modal form. I am using both a select dropdown and a checkbox. My code is working fine but I want to better understand what I have done as I am still new to JQuery.
For the checkbox the code works fine without calling the function once the modal is opened however for the select to work I have to call the code once the modal is open. I want to better understand why this is the case. Thanks!
Code below:
//select change
$('#modal-track').on('shown.bs.modal', function() {
$('#track_type').change(function() {
if ($('#track_type').val() == 'Source') {
$('.mfnswitch').show();
} else {
$('.mfnswitch').hide();
}
});
});
//checkbox change
function valueChanged() {
if (
$('.checkboxinput').is(':checked') &&
$('input[name=budget]').is(':hidden')
) {
$('.hidden').show();
$('.mfnhide').hide();
} else if (!$('.checkboxinput').is(':checked') &&
!$('input[name=budget]').is(':hidden')
) {
$('.hidden').hide();
$('.mfnhide').show();
}
if (!$('.checkboxinput').is(':checked') &&
$('input[name=sync_budget]').is(':hidden')
) {
$('.hidden').show();
$('.mfnhide').hide();
} else if (
$('.checkboxinput').is(':checked') &&
!$('input[name=sync_budget]').is(':hidden')
) {
$('.hidden').hide();
$('.mfnhide').show();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<form action="add_track" id="TrackForm" method="post">
<div class="form-row ">
<div class="col-md-3 mb-0">
<div id="div_id_track_type" class="form-group">
<label for="track_type" class=" requiredField">
Track type<span class="asteriskField">*</span> </label>
<div class="">
<select name="track_type" class="track_type select form-control" id="track_type">
<option value="Source" selected="">Source</option>
<option value="Library">Library</option>
<option value="Original Composition">Original Composition</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-row form-row">
<div class="col-md-2 mb-0 mfnswitch" id="mfnswitch">
<div class="custom-control custom-switch">
<div class="form-group">
<div id="div_id_mfn" class="custom-control custom-checkbox"> <input type="checkbox" name="mfn" class="custom-control-input checkboxinput custom-control-input" onchange="valueChanged()" id="customSwitch1" checked=""> <label for="customSwitch1" class="custom-control-label">
MFN
</label> </div>
</div>
</div>
</div>
<div class="col-md-10 mb-0 mfnhide" id="mfnhide">
<div id="div_id_budget" class="form-group"> <label for="id_budget" class=" requiredField">
Budget<span class="asteriskField">*</span> </label>
<div class=""> <input type="number" name="budget" value="0" class="numberinput form-control" required="" id="id_budget"> </div>
</div>
</div>
<div class="col-md-4 mb-0 hidden" id="hidden">
<div id="div_id_sync_budget" class="form-group"> <label for="id_sync_budget" class=" requiredField">
Sync budget<span class="asteriskField">*</span> </label>
<div class=""> <input type="number" name="sync_budget" value="0" class="numberinput form-control" required="" id="id_sync_budget"> </div>
</div>
</div>
<div class="col-md-6 mb-0 hidden" id="hidden">
<div id="div_id_master_budget" class="form-group"> <label for="id_master_budget" class=" requiredField">
Master budget<span class="asteriskField">*</span> </label>
<div class=""> <input type="number" name="master_budget" value="0" class="numberinput form-control" required="" id="id_master_budget"> </div>
</div>
</div>
</div>
<div class="form-row ">
<div class="col-md-1 mb-0"> <input type="submit" name="submit" value="Save" class="btn btn-primary" id="submit-id-submit">
</div>
</div>
</form>

User input validation Bootstrap 4 and JQuery?

I started learning Bootstrap 4 validation and there are few things that are not clear to me. Some of the situations are confusing in case where input fields that are not required are showing valid-feedback / invalid-feedback. Also, I'm wondering if there is a way to trigger validation with button on click instead of submit process? Here is example of what I have so far:
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<fieldset class="fieldset-info">
<legend class="hcs-legend">Add New Profile</legend>
<form name="new-profile" id="new-profile" class="needs-validation" novalidate>
<div class="form-group required">
<label for="agency">Profile Name:</label>
<input class="form-control" type="text" name="profile" id="profile" value="" maxlength="120" placeholder="Enter the official name of your profile" required>
<div class="invalid-feedback">Please provide Profile Name</div>
</div>
<div class="form-group required">
<label>Type:</label>
<select class="custom-select browser-default" name="type" id="type" required>
<option value="">--Select Type--</option>
<option value="1">Large</option>
<option value="2">Medium</option>
<option value="3">Small</option>
</select>
<div class="invalid-feedback">Please provide Type</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="fname">First Name:</label>
<div class="col-10">
<input class="form-control" type="text" name="fname" id="fname" value="" maxlength="20" placeholder="Enter First name" required>
<div class="invalid-feedback">Please provide First Name</div>
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label" for="middle_ini">Middle Init:</label>
<div class="col-10">
<input class="form-control" type="text" name="middle_ini" id="middle_ini" value="" maxlength="1" placeholder="Enter Middle Initial (optional).">
</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="lname">Last Name:</label>
<div class="col-10">
<input class="form-control" type="text" name="lname" id="lname" value="" maxlength="30" placeholder="Enter Last name" required>
<div class="invalid-feedback">Please provide Last Name</div>
</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="email">Email:</label>
<div class="col-10">
<input class="form-control" type="text" name="email" id="email" value="" maxlength="50" placeholder="Enter Email" required>
<div class="invalid-feedback">Please provide Email</div>
</div>
</div>
<div class="row">
<div class="col-12"><strong><u>Physical Address</u></strong></div>
</div>
<div class="form-row">
<div class="form-group col-6 required">
<div class="row">
<label class="col-3 col-form-label" for="Addr1">Address 1:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr1" id="Addr1" value="" placeholder="Enter Physical Address 1" maxlength="40" required>
<div class="invalid-feedback">Please provide Address 1</div>
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="city">City:</label>
<div class="col-10">
<input class="form-control" type="text" name="city" id="city" value="" placeholder="Enter City" maxlength="25" required>
<div class="invalid-feedback">Please provide City</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<div class="col-3">
<label for="Addr2">Address 2:</label>
</div>
<div class="col-9">
<input class="form-control" type="text" name="Addr2" id="Addr2" value="" placeholder="Enter Physical Address 2" maxlength="40">
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="state">State:</label>
<div class="col-10">
<select class="custom-select browser-default" name="state" id="state" required>
<option value="">--Select State--</option>
<option value="ny">New York</option>
<option value="fl">Florida</option>
</select>
<div class="invalid-feedback">Please provide State</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<label class="col-3 col-form-label" for="Addr3">Address 3:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr3" id="Addr3" value="" placeholder="Enter Physical Address 3" maxlength="40">
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="zip">Zip:</label>
<div class="col-10">
<input class="form-control" type="text" name="zip" id="zip" value="" placeholder="Enter Zip Code, formatted: 99999 or 99999-9999" maxlength="10" required>
<div class="invalid-feedback">Please provide Zip</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<label class="col-3 col-form-label" for="Addr4">Address 4:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr4" id="Addr4" value="" placeholder="Enter Physical Address 4" maxlength="40">
</div>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
<label class="form-check-label" for="sameAddress">check this box if mailing address is the same of physical address</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12"><strong><u>Access options</u></strong></div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_1" id="flag_1" value="Y">
<label class="form-check-label" for="flag_1">Allow for access level 1?</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_2" id="flag_2" value="Y">
<label class="form-check-label" for="flag_2">Allow for access level 2?</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_3" id="flag_3" value="Y">
<label class="form-check-label" for="flag_3">Allow for access level 3?</label>
</div>
<div class="row">
<div class="col-12 text-center">
<input class="btn btn-primary" type="submit" name="save" id="save" value="Save">
</div>
</div>
</form>
</fieldset>
</div>
In the example above I used the code for validation form the Bootstrap web site. There is very little explained on how this works. I have few questions:
How I can trigger validation on click since I will use ajax to send request to the server?
Why fields that are not required are turning green (color around the input)?
How I can use pattern attribute to validate input value if it's correct or not with custom message for the user?
Please let me know if anyone knows how to achieve this?
Thank you.

Change forms displayed on change of value of drop down

I have this HTML form and jQuery script:
$(document).ready(function() {
$('#accounttype').on('change', function() {
if (this.value == '1') {
$("#corporate").show();
} else if (this.value == '0') {
$("#individual").show();
} else {
$("#corporate").hide();
$("#individual").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
<form role="form">
<div class="form-group row">
<label class="col-md-5 control-label">Customer Account ID:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="ACT-2015-000011" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Customer Account Type:</label>
<div class="col-md-7">
<select id='accounttype' class="form-control">
<option value="0">Individual</option>
<option value="1">Corporate</option>
</select>
</div>
</div>
<div id='corporate' class="form-group row">
<label class="col-md-5 control-label">Customer Account Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="5SOS">
</div>
</div>
<div id='individual' class="form-group row">
<label class="col-md-5 control-label">Customer ID:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="CST-2015-000011">
</div>
</div>
<div id='individual' class="form-group row">
<label class="col-md-5 control-label">Customer First Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Luke">
</div>
</div>
<div id='individual' class="form-group row">
<label class="col-md-5 control-label">Customer Middle Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Robert">
</div>
</div>
<div id='individual' class="form-group row">
<label class="col-md-5 control-label">Customer Last Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Hemmings">
</div>
</div>
<div id='individual' class="form-group row">
<label class="col-md-5 control-label">Gender:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Male">
</div>
</div>
<div id='individual' class="form-group row">
<label class="col-md-5 control-label">Birthday:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="01/01/01">
</div>
</div>
<div class="col-md-offset-9">
Create/Enroll
</div>
</form>
</div>
What I need to do is to display the forms according to the value selected in the dropdown using onchange but It doesn't seem to be working. Can someone point out what's wrong? Thanks!

Your Javascript code is not correct... First remove semi colons from the if statement then use the Javascript below.
Also your HTML code should be reformatted as below.
The id individual is now tied to one parent div which covers the div's for the individual data instead of having multiple divs with the same id.
$(document).ready(function() {
$("#corporate").hide();
$("#individual").hide();
$('#accounttype').on('change', function() {
if (this.value == '1') {
$("#individual").hide();
$("#corporate").show();
} else if (this.value == '0') {
$("#corporate").hide();
$("#individual").show();
} else {
$("#corporate").hide();
$("#individual").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
<form role="form">
<div class="form-group row">
<label class="col-md-5 control-label">Customer Account ID:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="ACT-2015-000011" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Customer Account Type:</label>
<div class="col-md-7">
<select id='accounttype' class="form-control">
<option value="">Select account type...</option>
<option value="0">Individual</option>
<option value="1">Corporate</option>
</select>
</div>
</div>
<div id='corporate' class="form-group row">
<label class="col-md-5 control-label">Customer Account Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="5SOS">
</div>
</div>
<div id='individual'>
<div class="form-group row">
<label class="col-md-5 control-label">Customer ID:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="CST-2015-000011">
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Customer First Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Luke">
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Customer Middle Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Robert">
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Customer Last Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Hemmings">
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Gender:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Male">
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Birthday:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="01/01/01">
</div>
</div>
</div>
<div class="col-md-offset-9">
Create/Enroll
</div>
</form>
</div>

<div class="panel-body">
<form role="form">
<div class="form-group row">
<label class="col-md-5 control-label">Customer Account ID:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="ACT-2015-000011" disabled>
</div>
</div>
<div class="form-group row">
<label class="col-md-5 control-label">Customer Account Type:</label>
<div class="col-md-7">
<select id='accounttype' class="form-control">
<option value="0">Individual</option>
<option value="1">Corporate</option>
</select>
</div>
</div>
<div class="form-group row corporate">
<label class="col-md-5 control-label">Customer Account Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="5SOS">
</div>
</div>
<div class="form-group row individual">
<label class="col-md-5 control-label">Customer ID:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="CST-2015-000011">
</div>
</div>
<div class="form-group row individual">
<label class="col-md-5 control-label">Customer First Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Luke">
</div>
</div>
<div class="form-group row individual">
<label class="col-md-5 control-label">Customer Middle Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Robert">
</div>
</div>
<div class="form-group row individual">
<label class="col-md-5 control-label">Customer Last Name:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Hemmings">
</div>
</div>
<div class="form-group row individual">
<label class="col-md-5 control-label">Gender:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="Male">
</div>
</div>
<div class="form-group row individual">
<label class="col-md-5 control-label">Birthday:</label>
<div class="col-md-7">
<input class="form-control" type="text" placeholder="01/01/01">
</div>
</div>
<div class="col-md-offset-9">
Create/Enroll
</div>
</form>
<script src="../resources/scripts/jquery2.2.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".corporate").hide();
$(".individual").hide();
$("#accounttype").change(function () {
if ($(this).val() == 1) {
$(".corporate").show();
$(".individual").hide();
} else if ($(this).val() == 0) {
$(".individual").show();
$(".corporate").hide();
} else {
$(".corporate").hide();
$(".individual").hide();
}
});
});
</script>
Please try above code, hope this will help you,
Note:- there must be a unique id for each html element, for multiple you can use clsss
please don't forget to add jquery library above the js code

Button click is not responding

<form class="cityForm form-horizontal form-label-right" action="" method="POST" novalidate>
<div class="form-group">
<div class="city col-md-4 col-sm-4 col-xs-12">
<div class="item form-group">
<label class="control-label" for="city">City<span class="required">*</span> </label>
<div class="">
<select class="form-control" id="city" name="pick_up_city">
<option>Select City</option>
<option>Mumbai</option>
<option>Delhi</option>
<option>Jaipur</option>
</select>
</div>
</div>
</div>
<div class="address col-md-8 col-sm-8 col-xs-12">
<div class="item form-group">
<label class="control-label" for="address">Address<span class="required">*</span> </label>
<div class="">
<input type="text" class="form-control" id="address" name="pick_up_address"> </div>
</div>
</div>
<div class="multiCheck">
<input type="checkbox" value="Yes" id="multiCheck">Have more than one pickup point?
<br> </div>
</div>
<div class="form-group hide" id="cityFormExtend">
<div class="city col-md-4 col-sm-4 col-xs-12">
<div class="item form-group">
<label class="control-label" for="city">City<span class="required">*</span> </label>
<div class="">
<select class="form-control" id="city" name="pick_up_city">
<option>Select City</option>
<option>Mumbai</option>
<option>Delhi</option>
<option>Jaipur</option>
</select>
</div>
</div>
</div>
<div class="address col-md-8 col-sm-8 col-xs-12">
<div class="item form-group">
<label class="control-label" for="address">Address<span class="required">*</span> </label>
<div class="">
<input type="text" class="form-control" id="address" name="pick_up_address"> </div>
</div>
</div>
<div class="multiBtn">
<button type="button" class="addBtn">Add another pickup location</button>
<button type="button" class="removeBtn">Remove this pickup location</button>
</div>
</div>
</form>
The above is my html form and it has got two form-group classes. The first one is always displayed as the browser opens and the second one appears only when the checkbox is checked. It is working fine up to here.
Now, I want the removeBtn to remove the new form created and addBtn to add another form.
Below is my JavaScript code:
$(document).ready(function() {
$('#multiCheck').change(function() {
if (this.checked) {
var $pick = $('#cityFormExtend');
$clone = $pick.clone().removeClass('hide').removeAttr('id').insertBefore($pick);
}
if (!this.checked) {
$clone.remove();
}
}).on('click', '.addBtn', function() {
var $pick = $(this).parents('.form-group');
$clone = $pick.clone().insertBefore($pick);
}).on('click', '.removeBtn', function() {
var $pick = $(this).parents('.form-group');
$pick.remove();
})
});

use
<script>
$(document).on('click', '.addBtn', function(){
var $pick = $(this).parents('.form-group');
$clone = $pick.clone().insertBefore($pick);
});
$(document).on('click', '.removeBtn', function() {
var $pick = $(this).parents('.form-group');
$pick.remove();
});
</script>

Jquery toggle and reset form elements

I need to show and hide some form elements according to a checkbox selection.
This is my HTML:
<div class="form-group">
<label>
<input name="address_check" value="1" type="checkbox">
<span class="lbl"> Yes, My postal address is different</span>
</label>
</div>
<div id="address2">
<div class="form-group">
<label class="control-label" for="street_no">Street No:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="street_no" class="col-xs-12 col-sm-4" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="street_name">Street Name:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="street_name" class="col-xs-12 col-sm-4" />
</div>
</div>
</div>
Here I want to display #address2 DIV if address_check check box checked and other wise it should be hide.
This how I tried it.
$('input[name="address_check"]').bind('change',function(){
$('#address2').fadeToggle(!$(this).is(':checked'));
});
My problem is I want to reset the form elements inside address2 div when this is toggling down. Reset mean I want to make empty these elements.
Can anybody tell me how to do it?
Thank you.

Try doing:
$('#address2').find("input").val("");
$("#address2").find('select option:first').prop('selected',true);
Working fiddle

Try this:
var address2 = $('#address2');
$('input[name="address_check"]').bind('change',function(){
var isChecked = $(this).is(':checked');
isChecked ? address2.fadeIn() : address2.fadeOut();
if(!isChecked)
{
address2.find('input, textarea').val('');
address2.find('select').prop('selectedIndex',0);
}
});

The easiest way to do this is using:
$("#address2 :input").val("");
$("#address2 :select").prop('selected',false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
$('input[name="address_check"]').bind('change',function(){
$('#address2').fadeToggle(!$(this).is(':checked'));
$("#address2 :input").val("");
$("#address2 :select").prop('selected',false);
});
});
</script>
<div class="form-group">
<label>
<input name="address_check" value="1" type="checkbox">
<span class="lbl"> Yes, My postal address is different</span>
</label>
</div>
<div id="address2">
<div class="form-group">
<label class="control-label" for="street_no">Street No:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="street_no" class="col-xs-12 col-sm-4" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="street_name">Street Name:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="street_name" class="col-xs-12 col-sm-4" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="street_name">select Name:</label>
<div class="col-xs-12 col-sm-9">
<select name="name" class="col-xs-12 col-sm-4" >
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
</div>

Try this
$('input[name="address_check"]').bind('change',function(){
$('#address2').fadeToggle(!$(this).is(':checked'));
$('#address2').find("input").val("");
});

Categories