I'm try to make an input non-editable after user click on icon and will chose date by select. So, i tought if i did a jQuery script for check if that date salect is visible than make a date text input non-editable.
But it doesn't work, i tried it woth .css and .is(":visible") but no one worked.
My code:
$(document).ready(function() {
if ($('#dropdown-date').is(':visible')) {
document.getElementById('datumNaroz').disabled = true;
} else {
document.getElementById('datumNaroz').disabled = false;
}
if ($('#dropdown-date').css('display') == 'none') {
document.getElementById('datumNaroz').disabled = false;
} else {
document.getElementById('datumNaroz').disabled = true;
}
$('#dropdown-date').click(function(event) {
event.stopPropagation();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="form-group">
<label for="datumNaroz">Birth date</label>
<div class="row">
<div class="col-6">
<div class="input-group datum-group">
<input class="form-control" id="datumNaroz" type="text" placeholder="Day / Month / Year" name="datumNaroz" maxlength="14" autocomplete="off" required>
<div class="input-group-append" id="pickerToggle" data-toggle="dropdown">
<div class="input-group-text">
<i class="fas fa-calendar-alt"></i>
</div>
</div>
<div class="custom-date dropright">
<div class="dropdown-menu" id="dropdown-date">
<div class="container">
<div class="input-group">
<select class="custom-select" id="den">
<option value="day" disabled selected hidden>Day</option>
<option value="02">02</option>
</select>
<select class="custom-select" id="den">
<option value="month" disabled selected hidden>Month</option>
<option value="09">September</option>
</select>
<select class="custom-select" id="den">
<option value="year" disabled selected hidden>Year</option>
<option value="1995">1995</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I am using an intl-tel-input plugin to get the country code dropdown along with the country flag. I have another input field that has a country name as a dropdown. what I want is when the user selects any country from the country dropdown, then country code automatically gets selected in the country code dropdown. I used several methods but nothing works for me, I didn't find suitable documentation of this plugin too. this is my code.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/css/intlTelInput.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<h1>Select Country</h1>
</div>
<div class="row">
<div class="col-md-12 form-group">
<div class="col-md-6 form-group hire-input-country_box position-relative">
<select name="country" class="form-control" id="country">
<option data-countryCode="DZ" value="213">Algeria</option>
<option data-countryCode="AD" value="376">Andorra</option>
<option data-countryCode="AO" value="244">Angola</option>
<option data-countryCode="AI" value="1264">Anguilla</option>
<option data-countryCode="AG" value="1268">Antigua & Barbuda
</option>
</select>
</div>
</div>
<div class="col-md-12 form-group">
<input type="tel" id="txtPhone" class="txtbox" />
</div>
</div>
</div>
<!-- Use as a jQuery plugin -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/js/intlTelInput-jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#country").change(function()
{
let value="+"+$(this).val();
$('#txtPhone').val(value);
})
var code = "+977"; // Assigning value from model.
$('#txtPhone').val(code);
$('#txtPhone').intlTelInput({
});
});
</script>
</body>
</html>
To do what you require, call the setCountry option of intlTelInput and provide the country-code data attribute value from the selected option:
$(function() {
$("#country").change(function() {
let countryCode = $(this).find('option:selected').data('country-code');
let value = "+" + $(this).val();
$('#txtPhone').val(value).intlTelInput("setCountry", countryCode);
});
var code = "+977";
$('#txtPhone').val(code).intlTelInput();
});
<div class="container-fluid">
<div class="row">
<h1>Select Country</h1>
</div>
<div class="row">
<div class="col-md-12 form-group">
<div class="col-md-6 form-group hire-input-country_box position-relative">
<select name="country" class="form-control" id="country">
<option data-country-code="DZ" value="213">Algeria</option>
<option data-country-code="AD" value="376">Andorra</option>
<option data-country-code="AO" value="244">Angola</option>
<option data-country-code="AI" value="1264">Anguilla</option>
<option data-country-code="AG" value="1268">Antigua & Barbuda
</option>
</select>
</div>
</div>
<div class="col-md-12 form-group">
<input type="tel" id="txtPhone" class="txtbox" />
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/js/intlTelInput-jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/css/intlTelInput.css" />
I have a form where I have a text input, radio buttons and a select.
What I want is to be able to select the radio button only once and only one option at a time and if I select either of the two again I want the code to not allow it, only in case the data has been saved with the button 'guardar cambios'.
This is because every option changes an image for another and I only want one image to change at a time and after that, send the data to a table.
if (!$('input[id^="prest"').is(":checked")) {
$('select').attr('disabled', true)
$('textarea').attr('disabled', true)
$('.obserSelect').attr('disabled', true)
}
$('input[id^="prest"').on('click', function() {
$('select[id$="Select"]').attr('disabled', false)
$('textarea').attr('disabled', false)
$('.obserSelect').attr('disabled', false)
})
$('input[id^="d"]').prop('disabled', true)
$('input[id$="Color"]').prop('disabled', true)
$('input[name="colorPrestacion"').prop('disabled', true)
$("#paciente").keyup(function() {
var valPac = $(this).val();
if ($(valPac !== 0)) {
$('input[id^="d"]').prop('disabled', false)
$('input[id$="Color"]').prop('disabled', false)
$('input[name="colorPrestacion"').prop('disabled', false)
}
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container-fluid">
<div class="card tarjetaDatos">
<div class="card-body">
<div class="card-title d-flex justify-content-center">
<h5>Ingrese los datos del odontograma</h5>
</div>
<hr>
<div id="tratamientos">
<div class="row">
<div class="col-md-4">
Seleccione paciente
<div class="m-1"></div>
<input class=" pacInput" autocomplete="off" list="browsers" name="paciente" id="paciente">
</div>
<div class="col-md-4">
Seleccione el tipo de Prest. requerida
<div class="form-inline">
<input type="radio" id="prestExistente" name="colorPrestacion" value='rojo'>
<div class="mr-1"></div>
<font style="color:red"> Prestaciones existentes</font>
</div>
<div class="row">
<div class="col-md-12">
<input type="radio" id="prestRequerida" name="colorPrestacion" value='azul'>
<font style="color:blue"> Prestaciones requeridas</font>
</div>
</div>
</div>
<div class="col-md-4">
Seleccione referencia
<select class="form-control" name="tratamientos" id="tratSelect">
<option value='none' selected disabled>Seleccione referencia</option>
<option value="1">Obturación/caries</option>
<option value="2">Corona</option>
<option value="3">Puente</option>
</select>
</div>
<div class="row">
<button type="submit" class="btn btn-primary " style="width:100%">Guardar cambios</button>
</div>
</div>
</div>
<br>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
Could someone give me any idea of how to make this? thank you so much.
First to say this seems like bad user experience design. And not quite sure is this even a wanted result:
$("[name='colorPrestacion']").on("click", function() {
$("[name='colorPrestacion']").prop('disabled', true);
});
$("#tratSelect").on("click", function() {
$(this).prop('disabled', true);
});
$("button[type='submit']").on("click", function() {
$("[name='colorPrestacion']").prop('disabled', false).prop('checked', false);
$("#tratSelect").prop('disabled', false).prop("selectedIndex", 0);
});
This will on radio check and on selecting option put both of those to disabled, and reset after button click. You should at least put the general reset button to reset all if user changes his made without saving...
if (!$('input[id^="prest"').is(":checked")) {
$('select').attr('disabled', true)
$('textarea').attr('disabled', true)
$('.obserSelect').attr('disabled', true)
}
$('input[id^="prest"').on('click', function() {
$('select[id$="Select"]').attr('disabled', false)
$('textarea').attr('disabled', false)
$('.obserSelect').attr('disabled', false)
})
$('input[id^="d"]').prop('disabled', true)
$('input[id$="Color"]').prop('disabled', true)
$('input[name="colorPrestacion"').prop('disabled', true)
$("#paciente").keyup(function() {
var valPac = $(this).val();
if ($(valPac !== 0)) {
$('input[id^="d"]').prop('disabled', false)
$('input[id$="Color"]').prop('disabled', false)
$('input[name="colorPrestacion"').prop('disabled', false)
}
})
$("[name='colorPrestacion']").on("click", function() {
$("[name='colorPrestacion']").prop('disabled', true);
});
$("#tratSelect").on("click", function() {
$(this).prop('disabled', true);
});
$("button[type='submit']").on("click", function() {
$("[name='colorPrestacion']").prop('disabled', false).prop('checked', false);
$("#tratSelect").prop('disabled', false).prop("selectedIndex", 0)
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container-fluid">
<div class="card tarjetaDatos">
<div class="card-body">
<div class="card-title d-flex justify-content-center">
<h5>Ingrese los datos del odontograma</h5>
</div>
<hr>
<div id="tratamientos">
<div class="row">
<div class="col-md-4">
Seleccione paciente
<div class="m-1"></div>
<input class=" pacInput" autocomplete="off" list="browsers" name="paciente" id="paciente">
</div>
<div class="col-md-4">
Seleccione el tipo de Prest. requerida
<div class="form-inline">
<input type="radio" id="prestExistente" name="colorPrestacion" value='rojo'>
<div class="mr-1"></div>
<font style="color:red"> Prestaciones existentes</font>
</div>
<div class="row">
<div class="col-md-12">
<input type="radio" id="prestRequerida" name="colorPrestacion" value='azul'>
<font style="color:blue"> Prestaciones requeridas</font>
</div>
</div>
</div>
<div class="col-md-4">
Seleccione referencia
<select class="form-control" name="tratamientos" id="tratSelect">
<option value='none' selected disabled>Seleccione referencia</option>
<option value="1">Obturación/caries</option>
<option value="2">Corona</option>
<option value="3">Puente</option>
</select>
</div>
<div class="row">
<button type="submit" class="btn btn-primary " style="width:100%">Guardar cambios</button>
</div>
</div>
</div>
<br>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
Add this to the bottom should work
$('input[name="colorPrestacion"]').on('change',function(){
$('input[name="colorPrestacion"]').attr('disabled',true);
})
$('#tratSelect').on('change',function(){
$('#tratSelect').attr('disabled',true)
})
$('button[type="submit"]').on('click',function(){
if($('input[name="colorPrestacion"]').val() && $('#tratSelect').val()){
$('input[name="colorPrestacion"').prop('disabled', false)
}
})
I have a dropdown menu through which a button is visible. When I select a state from the list, I can click on the button through the drop-down menu. What is the problem and how to fix it?
html:
<link rel="stylesheet" href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006288/BBBootstrap/choices.min.css?version=7.0.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006273/BBBootstrap/choices.min.js?version=7.0.0"></script>
<div class="col-md-10">
<select id="multiple-state" placeholder="Select state" multiple>
<option value="al"/>Alabama</option>
<option value="ak"/>Alaska</option>
<option value="az"/>Arizona</option>
</select>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Display</button>
<div class="dropdown-menu">
<ul id="list" class="list-group list-group-flush"></ul>
</div>
</div>
<input type="text" class="form-control" placeholder="Input city and press Enter" id="city">
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var multipleCancelButton = new Choices('#multiple-state', {
removeItemButton: true,
searchResultLimit:5
});
});
</script>
Just add a z-index to the dropdown
$(document).ready(function() {
var multipleCancelButton = new Choices('#multiple-state', {
removeItemButton: true,
searchResultLimit: 5
});
});
.choices__list.choices__list--dropdown.is-active {
z-index: 3;
}
<link rel="stylesheet" href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006288/BBBootstrap/choices.min.css?version=7.0.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1569006273/BBBootstrap/choices.min.js?version=7.0.0"></script>
<div class="col-md-10">
<select id="multiple-state" placeholder="Select state" multiple>
<option value="al" />Alabama</option>
<option value="ak" />Alaska</option>
<option value="az" />Arizona</option>
</select>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Display</button>
<div class="dropdown-menu">
<ul id="list" class="list-group list-group-flush"></ul>
</div>
</div>
<input type="text" class="form-control" placeholder="Input city and press Enter" id="city">
</div>
</div>
</div>
I just have the small problem.. 1st of all im new to jQuery.. im a learner..
So, here i create a small form like 2 dropdowns, i just try to validate and when all validation's done, the submit button goes to enable, after
clicking the submit button the success modal comes to open..
i just try my way, but its not..
jQuery("#accMergebtn").prop('disabled', true);
var toValidate = jQuery('#frm_acc', '#to_acc'),
valid = false;
toValidate.keyup(function() {
if (jQuery(this).val().length > 0) {
jQuery(this).data('valid', true);
} else {
jQuery(this).data('valid', false);
}
toValidate.each(function() {
if (jQuery(this).data('valid') == true) {
valid = true;
} else {
valid = false;
}
});
if (valid === true) {
jQuery("#accMergebtn").prop('disabled', false);
$('#accloading').modal('show');
} else {
jQuery("#accMergebtn").prop('disabled', true);
}
});
$(document).ready(function() {
$("#accMergebtn").click(function() {
$('#accloading').modal('show');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<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>
<form class="form-horizontal" action="" method="post" id="contactForm">
<div class="row">
<!-- From Account name -->
<div class="form-group col-6" style="margin-bottom: 0px;">
<label class="col-sm-6 control-label p-sm-0 acc-merge" for="frm_acc">Text from:*</label>
<select class="form-control select-data .has-success" name="frm_account" id="frm_acc" required>
<option value="">Choose an items</option>
<option value="1">Plumz</option>
<option value="2">Plumz2</option>
<option value="3">Plumz3</option>
<option value="4">Plumz4</option>
<option value="5">Plumz5</option>
</select>
<div class="input-group col-sm-6 p-sm-0 form-group"></div>
</div>
<!-- To account name -->
<div class="form-group col-6" style="margin-bottom: 0px;">
<label class="col-sm-6 control-label p-sm-0 acc-merge" for="to_acc">Text to:*</label>
<select class="form-control select-data .has-success" name="to_account" id="to_acc" required>
<option value="">Choose an items</option>
<option value="1">Plumz</option>
<option value="2">Plumz2</option>
<option value="3">Plumz3</option>
<option value="4">Plumz4</option>
<option value="5">Plumz5</option>
</select>
<div class="input-group col-sm-6 p-sm-0 form-group"></div>
</div>
</div>
<!-- Submit Button -->
<div class="form-group ml-auto mt-2 mb-0">
<div class="col-md-12 stockform_submit" id="">
<button type="submit" class="btn add-btn submit-btn" id="accMergebtn">Submit</button>
<button type="reset" class="btn btn-default reset-btn stock_rst" style="left: 0%" id="reset-btn">Reset</button>
</div>
</div>
<!-- modal -->
<div class="modal fade" id="accloading" role="dialog" data-backdrop="static" aria-hidden="true">
<div class="modal-dialog modal_load">
<div class="modal-body">
<img src="./img/loading.gif" alt="Please Wait" class="load_icon">
</div>
</div>
</div>
</form>
Here is my Fiddle
I just want after all validations done enable submit button and if submit button click open modal popups..
jQuery("#accMergebtn").prop('disabled', true);
var toValidate = "#frm_acc,#to_acc";
valid = false;
$(toValidate).change(function() {
if (jQuery(this).val().length > 0) {
jQuery(this).data('valid', true);
} else {
jQuery(this).data('valid', false);
}
$(toValidate).each(function() {
if (jQuery(this).data('valid') == true) {
valid = true;
} else {
valid = false;
}
});
if (valid === true) {
jQuery("#accMergebtn").prop('disabled', false);
//$('#accloading').show();
} else {
jQuery("#accMergebtn").prop('disabled', true);
}
});
function show() {
event.preventDefault();
alert('show');
$('#accloading').show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<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>
<form class="form-horizontal" action="" method="post" id="contactForm">
<div class="row">
<!-- From Account name -->
<div class="form-group col-6" style="margin-bottom: 0px;">
<label class="col-sm-6 control-label p-sm-0 acc-merge" for="frm_acc">Text from:*</label>
<select class="form-control select-data .has-success" name="frm_account" id="frm_acc" required>
<option value="">Choose an items</option>
<option value="1">Plumz</option>
<option value="2">Plumz2</option>
<option value="3">Plumz3</option>
<option value="4">Plumz4</option>
<option value="5">Plumz5</option>
</select>
<div class="input-group col-sm-6 p-sm-0 form-group"></div>
</div>
<!-- To account name -->
<div class="form-group col-6" style="margin-bottom: 0px;">
<label class="col-sm-6 control-label p-sm-0 acc-merge" for="to_acc">Text to:*</label>
<select class="form-control select-data .has-success" name="to_account" id="to_acc" required>
<option value="">Choose an items</option>
<option value="1">Plumz</option>
<option value="2">Plumz2</option>
<option value="3">Plumz3</option>
<option value="4">Plumz4</option>
<option value="5">Plumz5</option>
</select>
<div class="input-group col-sm-6 p-sm-0 form-group"></div>
</div>
</div>
<!-- Submit Button -->
<div class="form-group ml-auto mt-2 mb-0">
<div class="col-md-12 stockform_submit" id="">
<button type="submit" class="btn add-btn submit-btn" id="accMergebtn" onclick="show()">Submit</button>
<button type="reset" class="btn btn-default reset-btn stock_rst" style="left: 0%" id="reset-btn">Reset</button>
</div>
</div>
<!-- modal -->
<div class="modal fade" id="accloading" role="dialog" data-backdrop="static" aria-hidden="true">
<div class="modal-dialog modal_load">
<div class="modal-body">
<img src="./img/loading.gif" alt="Please Wait" class="load_icon">
</div>
</div>
</div>
</form>
Using the bootstrap multi-select.js for selecting multiple options from the select box. I have tried, when i click on the button multiple options not selecting. below is my code:
// bootstrap multiselect box
$(document).ready(function() {
$('#ddlPermission').multiselect({
buttonWidth : '100%',
maxHeight : 100,
includeSelectAllOption : true,
dropRight : true
});
$(".clickbutton").click(function(){
$('.multiselect').val(['A','B']);
});
});
function myFunction() {
var allVal=$("#ddlPermission").val();
alert(allVal);
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<link href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<input class="form-control btn-primary clickbutton" type="button" name="select" id="select" value="Click">
</div>
</div>
<br>
<select id="ddlPermission" class="multiselect" multiple="multiple" name="permission_ddl">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<input type="submit" name="btnSubmit" id="btnSubmit" onclick="myFunction()" class="button active" value="Submit">
</div>
You need to apply the selection to the dropdown's id instead of the class then refresh the multiselect.
$('#ddlPermission').val(['A','B']);
$('#ddlPermission').multiselect("refresh");
// bootstrap multiselect box
$(document).ready(function() {
$('#ddlPermission').multiselect({
buttonWidth : '100%',
maxHeight : 100,
includeSelectAllOption : true,
dropRight : true
});
$(".clickbutton").click(function(){
$('#ddlPermission').val(['A','B']);
$('#ddlPermission').multiselect("refresh");
});
});
function myFunction() {
var allVal=$("#ddlPermission").val();
alert(allVal);
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<input class="form-control btn-primary clickbutton" type="button" name="select" id="select" value="Click">
</div>
</div>
<br>
<select id="ddlPermission" class="multiselect" multiple="multiple" name="permission_ddl">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<input type="submit" name="btnSubmit" id="btnSubmit" onclick="myFunction()" class="button active" value="Submit">
</div>