Javascript not working for multiple datasets - javascript

I have a list of persons in a bootstrap table and to delete a single person i am using a form in bootstrap modal. For deleting user needs to select some information for which i have a select box. On select value,different divs are shown. IF user selects married, then div with married_approval class should be show and if user selects Others then div with other class should be shown else both div should be hidden. I have tried this and it works fine for 1st user but for rest of the users show/hide is not working. Please help.
HTML
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-sm-4" for="email">Reason</label>
<div class="col-sm-8">
<select name="i_deletereason" id="i_deletereason" class="form-select select" onchange="checkselect(this);">
<option value="Deceased">Deceased</option>
<option value="Married">Married</option>
<option value="Others" >Others</option>
</select>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group other" style="display: none;">
<textarea id="i_deletereason_other" name="i_deletereason_other" class="form-control" placeholder="Please Specify others" ></textarea>
</div>
</div>
</div>
<div class="row">
<div class="married_approval" align="center" style="display: none;">
<div class="col-sm-12">
<label class="control-label"><b>Married in same cast or other cast ?</b></label>
</div>
<div class="col-sm-12" align="center">
<label class="radio-inline"><input type="radio" name="cast" class="cast" value="same_cast">Same Cast</label>
<label class="radio-inline"><input type="radio" name="cast" class="cast" value="other_cast">Other Cast</labe>
</div>
</div>
</div>
JS:
<script type="text/javascript">
function checkselect(delSelect){
var selected_var = $(delSelect).val();
var other_text=document.getElementsByClassName("other");
var is_married = document.getElementsByClassName("married_approval");
console.log('selected_var: '+selected_var);
//return false;
switch(selected_var){
case 'Married':
{
console.log('var: '+selected_var);
other_text[0].style.display='none';
is_married[0].style.display='block';
break;
}
case 'Others':
{
console.log('var: '+selected_var);
other_text[0].style.display='block';
is_married[0].style.display='none';
break;
}
default:
{console.log('var: '+selected_var);
other_text[0].style.display='none';
is_married[0].style.display='none';
}
}
}
</script>

Related

Changing content of an single input field after cloning form fields

I am having an interface for my admins where they can add fields to a database. If they want to add several fields they can easily add a new line. This is done by cloning via JavaScript. Now there is one dropdown menu and based on the selection from the dropdown I want to write default values to the text-input fields for min[] and max[].
This works fine if I am having just one line. But if I clone it several times and make a selection (e. g. I am selecting the option "relative_number") in just one line (e. g.) the min and max fields are updated in every line. What can I do so that when the drop down is selected in a certain line only the min and max values in the same line are updated?
Here is my code:
<div class="wrapper">
<div class="entities_wrap">
<div class="row">
<div class="col-md-3">
<label>Name</label>
<input type="text" name="entity_name[]" value="" style="width: 275px;" class="form-control" id="entity_name[]" />
</div>
<div class="col-md-3">
<label>Field Name</label>
<input type="text" name="entity_field_name[]" value="" style="width: 275px;" class="form-control" id="entity_field_name[]" />
</div>
<div class="col-md-2">
<label>Category</label>
<select id="entity_field_type[]" name="entity_field_type[]" class="form-select"> <option value=""></option> <option value="absolute_number">absolute_number</option> <option value="relative_number">relative_number</option> <option value="likert_5">likert_5</option> <option value="likert_7">likert_7</option> <option value="string">string</option> </select>
</div>
<div class="col-md-1 minValue">
<label>Min</label>
<input type="text" class="form-control min" id="min[]" name="min[]" value=""/>
</div>
<div class="col-md-1">
<label>Max</label>
<input type="text" class="form-control max" id="max[]" name="max[]" value=""/>
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-trash remove-item"></i></span>
</div>
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-plus add-plus"></i> <span class="plus">Add Line</span>
</div>
</div>
</div><br>
</div>
</div>
<script>
$(document).ready(function () {
$(".add-plus").click(function(){
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".plus").click(function(){
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".remove-item").click(function () {
$(this).closest(".entities_wrap").remove();
});
});
$('select[id^="entity_field_type"]').on('change', function()
{
var sel_cat = this.value;
if(sel_cat == 'relative_number')
{
$('input[id^="min"]').val("0");
$('input[id^="max"]').val("100");
}
if(sel_cat == 'absolute_number')
{
$('input[id^="min"]').val("0");
$('input[id^="max"]').val("infinite");
}
// For the other options the code should work alike
});
</script>
Tried already different ways to solve it via DOM, identifying parent nodes, siblings and so on but I don't get it working.
Thanks a lot in advance for your help!
While you should definitely look at dynamically modifying the names and id's of your cloned inputs, the issue you are having relates to your selectors for min and max
In the case of your javascript
$('input[id^="min"]').val("0");
$('input[id^="max"]').val("100");
You are selecting all min and max on the page.
You need to find the related min and max, which means finding the closet .row to the select-box and then finding the child min/max
var $row = $(this).closest("div.row");
$row.find('input[id^="min"]').val("0");
$row.find('input[id^="max"]').val("100");
jQuery closest()
jQuery find()
Here is a functioning snippet example.
$(document).ready(function() {
$(".add-plus").click(function() {
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".plus").click(function() {
$(".entities_wrap:last").clone(true).appendTo(".wrapper");
});
$(".remove-item").click(function() {
$(this).closest(".entities_wrap").remove();
});
});
$('select[id^="entity_field_type"]').on('change', function() {
var sel_cat = this.value;
var $row = $(this).closest("div.row"); //find the parent row we are in.
if (sel_cat == 'relative_number') {
$row.find('input[id^="min"]').val("0"); //use that row to find the related min
$row.find('input[id^="max"]').val("100"); //use that row to find the related max
}
if (sel_cat == 'absolute_number') {
$row.find('input[id^="min"]').val("0");
$row.find('input[id^="max"]').val("infinite");
}
// For the other options the code should work alike
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="entities_wrap">
<div class="row">
<div class="col-md-3">
<label>Name</label>
<input type="text" name="entity_name[]" value="" style="width: 275px;" class="form-control" id="entity_name[]" />
</div>
<div class="col-md-3">
<label>Field Name</label>
<input type="text" name="entity_field_name[]" value="" style="width: 275px;" class="form-control" id="entity_field_name[]" />
</div>
<div class="col-md-2">
<label>Category</label>
<select id="entity_field_type[]" name="entity_field_type[]" class="form-select">
<option value=""></option>
<option value="absolute_number">absolute_number</option>
<option value="relative_number">relative_number</option>
<option value="likert_5">likert_5</option>
<option value="likert_7">likert_7</option>
<option value="string">string</option>
</select>
</div>
<div class="col-md-1 minValue">
<label>Min</label>
<input type="text" class="form-control min" id="min[]" name="min[]" value="" />
</div>
<div class="col-md-1">
<label>Max</label>
<input type="text" class="form-control max" id="max[]" name="max[]" value="" />
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-trash remove-item"></i></span>
</div>
</div>
<div class="col-md-1" style="vertical-align: middle;">
<label> </label>
<div style="margin: 0px 10px;">
<i class="fas fa-plus add-plus"></i> <span class="plus">Add Line</span>
</div>
</div>
</div><br>
</div>
</div>

remove required tags on hidden tabs with Javascript

I would remove required tag from fields are in hidden tabs when I click on tab using Javascript. The fields with required tag, since they are not used, block the submit form, preventing insertion into the database. This is my code:
<ul class="nav nav-tabs nav-justified">
<li class="active">Cliente</li>
<li>Azienda</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="cliente">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="nome">Nome*</label>
<input class="form-control" name="nome" id="nome" required="true" autocomplete="off" value="">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="sesso">Sesso*</label>
<select class="form-control chosen chzn-done" name="sesso" id="sesso" required="true" style="display: none;">
<option value="" selected="\"selected\""></option>
<option value="M">M</option>
<option value="F">F</option>
</select>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="azienda">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="ragione_sociale">Ragione sociale*</label>
<input class="form-control " name="ragione_sociale" id="ragione_sociale" required="true" autocomplete="off" value="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="desc_attivita">Descrizione attività dell'azienda*</label>
<textarea class="form-control " name="desc_attivita" id="desc_attivita" required="true"></textarea></ul>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="citta">Città*</label>
<input class="form-control " name="citta" id="citta" required="true" value="" autocomplete="off">
</div>
</div>
</div>
First find all the select elements, then loop through them, if they are rendered as display: none then change the required attribute to false.
document.querySelectorAll('select').forEach((elem) => {
if (window.getComputedStyle(elem).display === 'none') {
elem.required = false;
}
});
If you know the id's or classes of the elements that will be display none, then you can just use those instead of using the loop.

How to Enable or Disable Bootstrap-Select Dropdown with radiobutton using Javascript and jquery

I have two radio buttons and one Bootstrap-select Dropdown.I want to enable/disable dropdown using javascript with the help of two radio buttons.
My Html Code is Given Below:
<div class="container" style="margin-top: 5px;background-color: wheat;">
<div class="card" style="background-color: white;margin: 1em">
<!--<div class="card-header"></div>-->
<div class="card-body">
<div class="row">
<div class="col-lg-2">
<label style="margin-top: 1.2em;margin-left: 1em">Type</label>
</div>
<div class="row" >
<div class="col-sm-1">
<div class="form-check" style="margin-top: 1.1em;margin-left: 1em">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="rbType" id="typeNew" value="enable" >New
</label>
</div>
</div>
<div class="col-sm-2">
<div class="form-check" style="margin-top: 1.1em;margin-left: 1em">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="rbType" id="typeVisisting" value="disable">Visiting
</label>
</div>
</div>
</div>
</div>
<div class="row" >
<div class="col-lg-2">
<label style="margin-top: 1.2em;margin-left: 1em" for="selectCustomer" >Customer Name</label>
</div>
<div class="col-lg-10">
<div class="form-group" style="margin-top: .5em;margin-right: 1em">
<select class=" form-control input-lg" data-live-search="true" title="-- Select a Customer --" name="selectCustomer" id="selectCustomer" >
<!--<option value="none">-- Select a Customer --</option>-->
#foreach($customers as $customer)
<option value="{{$customer->customer_id}}">{{$customer->customer_id}} {{$customer->customer_name}}</option>
#endforeach
</select>
</div>
</div>
</div>
</div>
</div>
Please help me to solve this problem.I am working at this upto three days.
Add the jquery below
$('input[name="rbType"]').change(function(){
if(this.value == "enable"){
$('#selectCustomer').removeAttr('disabled')
}
if(this.value == "disable"){
$('#selectCustomer').attr('disabled','true')
}
})
Try this in your javascript tag using jquery
$('input[name="rbType"]').change(function(){
if(this.value == "enable"){
$('#selectCustomer').prop('disabled',false)
}
if(this.value == "disable"){
$('#selectCustomer').prop('disabled','true')
}
})

Jquery dynamically select an item from dropdown not workingq

I'm trying to dynamically select an item from a dropdown menu but it doesn't seem to be working although I've been utilizing the ways people have mentioned on this forum.
This is my html:
<div>
<div class="form-group">
<label class="col-sm-4 control-label requiredLabel">TITLE</label>
<div class="col-sm-5">
<select name="selectedDialInSetting" id="selectedDialInSetting">
<option value="SIP">SIP</option>
<option value="SIPS">SIPS</option>
<option value="H323">H323</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-5">
<input type="text" class="form-control" name="sipOrH323DialIn" id="sipOrH323DialIn" value="{{sipOrH323DialIn}}">
</div>
</div>
</div>
And here is how I'm attempting to change it:
$("#selectedDialInSetting").val("H323").change();
$("#sipOrH323DialIn").val("hello) // this gets set correctly
Edit: Trying to use $('#selectedDialInSetting option[value="H323"]').prop('selected', true); now
I would appreciate any insight!
Thanks
Try this: $('#selectedDialInSetting option[value="H323"]').prop('selected', true);
edit: we found the problem, the ID was being changed after page load so #selectedDialInSetting wasn't targeting correctly.
How about this?
$(document).ready(function(){
$("#selectedDialInSetting").change(function(){
$("#sipOrH323DialIn").val($("#selectedDialInSetting").val())
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="form-group">
<label class="col-sm-4 control-label requiredLabel">TITLE</label>
<div class="col-sm-5">
<select name="selectedDialInSetting" id="selectedDialInSetting">
<option value="SIP">SIP</option>
<option value="SIPS">SIPS</option>
<option value="H323">H323</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-5">
<input type="text" class="form-control" name="sipOrH323DialIn" id="sipOrH323DialIn" value="">
</div>
</div>
</div>

Why does the change event never fire on a select box?

I've 3 list box like this one with a different id and name:
<div class="col-md-4 column">
<div class="form-group">
<input type="hidden" name="identityCardList[0].identityCardId">
<label for="identityCardType1" class="col-sm-3 control-label">Type</label>
<div class="col-sm-9">
<select id="identityCardType1" name="identityCardList[0].identityCardType" class="form-control">
</select>
</div>
</div>
<div class="form-group">
<label for="idCardValue1" class="col-sm-3 control-label">Valeur</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="idCardValue1" name="identityCardList[0].value" placeholder="Entrer la valeur">
</div>
</div>
<div class="form-group">
<label for="expirationDateCard1" class="col-sm-3 control-label">Expiration</label>
<div class="col-sm-9">
<div class="input-group date" id="expirationDateCardPicker1">
<input type="text" id="expirationDateCard1" name="identityCardList[0].expiration" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label><input type="checkbox" name="identityCardList[0].lodgerOwn" value="">Garde sur eux</label>
</div>
</div>
</div>
</div>
<div class="col-md-4 column">
...
</div>
<div class="col-md-4 column">
...
</div>
In the list box, I've this kind of value:
<select id="identityCardType1" name="identityCardList[0].identityCardType" class="form-control">
<option value=""></option>
<option value="1" data-card-expiration="false">Certificat de naissance</option>
<option value="2" data-card-expiration="false">N.A.S</option>
<option value="3" data-card-expiration="true">N.A.M</option>
</select>
When I select a value in the list box, I'd like to read the data-card-expiration value and disable expiration input text if needed.
This is my generic attempt:
$("select[id^='identityCardType']").on('change', 'select', function (e){
debugger;
if($(e.target).data("data-card-expiration")){
//disabled the nearest component expirationDateCard after this select
}
});
Why does the change event never occur?
You don't need to pass the selector 'select' to .on() just remove it. the selector filters the descendant of element.
$("select[id^='identityCardType']").on('change', function (e){ //Removed 'select'
});
Try this easy code
$("select#identityCardType1").on('change', function (e){
if($(this).data("cardexpiration")){
//disabled the nearest component expirationDateCard after this select
}
});

Categories

Resources