Once button is click the dropdown will reset

Once button is click the dropdown will reset - javascript

I have this script:
$(function () {
/* function for dynamic numbering */
function updateRowOrder() {
$('td.id').each(function (i) {
$(this).text(i + 1);
});
}
/* if input textValue get press keyboard enter */
$("#textValue").keydown(function (e) {
if (e.keyCode == 13) {
/* if get so trigger to addBtn */
$("#addBtn").trigger("click");
$(this).val("");
}
});
$(document).on("click", "#addBtn, .delRow ", function (e) {
/* if document clicked is addBtn */
if ($(this).is("#addBtn")) {
/* Append template script to table tbody */
$($("#template").html()).appendTo("#dataTables-example tbody");
/* Append textValue value to class rowValue and change classname */
$(".rowValue").append($("#textValue").val()).attr("class", "rowValues");
$(".taskValue").append($("#task").val()).attr("class", "taskValues");
$(".roleValue").append($("#role").val()).attr("class", "roleValues");
var appendComma = ($(".roleValue1").val() == '') ? '' : ' , ';
$(".roleValue1").append(appendComma + $("#id_select").val()).attr("class", "roleValues");
/* Update Numbering */
updateRowOrder();
}
else {
/* Just remove the tr on the click of a mouse */
$(this).closest("tr").remove();
/* Update Numbering */
updateRowOrder();
}
$('.up, .down').click(function(e){
e.preventDefault();
var row = $(this).parents("tr:first");
//selects all of row's tds except position number
// var row = $(this).parents("tr:first");
// selects the entire row
if ($(this).is(".up")) {
row.insertBefore(row.prev());
}
else if ($(this).is(".down")){
row.insertAfter(row.next());
}
else{
}
$('tbody tr[class="move"] td:first-child').each(function(idx, item) {
$(this).text(idx+1);
});
});
/* clearing input textValue */
$("#textValue").val("");
$('select option').filter(function(i){ return this.hasAttribute('selected') }).prop('selected', 'selected');
});
});
I include here that when addBtn click the drop down o select tag will reset into its default value.
This code:
$('select option').filter(function(i){ return this.hasAttribute('selected') }).prop('selected', 'selected');
And this is my sample table:
<table class="table table-bordered" id="dataTables-example">
<thead>
<tr>
<td>Activity</td>
<td><input type="text" id="textValue" class="typeahead form-control"/></td>
</tr>
<tr>
<td>Task Code</td>
<td>
<select name="" id="task" class="selectpicker form-control">
<option value="default" disabled="disabled" selected="selected">Default</option>
<?php
foreach($tasktype as $task)
{
?>
<option value="<?=$task['TaskCode']?>"><?=$task['TaskCode']?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>Primary Role Code</td>
<td>
<select name="" id="role" class="selectpicker form-control">
<option value=""></option>
<?php
foreach($rolecode as $role)
{
?>
<option value="<?=$role['RoleName']?>"><?=$role['RoleName']?></option>
<?php
}
?>
</select>
</td>
</tr>
<tr>
<td>Secondary Role Code</td>
<td>
<select id="id_select" class="selectpicker form-control" multiple data-live-search="true">
<?php
foreach($rolecode as $role)
{
?>
<option value="<?=$role['RoleName']?>"><?=$role['RoleName']?></option>
<?php
}
?>
</select>
</td>
</tr>
</thead>
</table>
<button type="button" class="btn btn-primary" id="addBtn"><i class="fa fa-plus fa-fw"></i>Add</button>
When I try it, I select values then click the Add button but still it not reset but instead it display the one I selected. And when I add again without choosing anything in the drop down, the value is null or no value.
I think it is working at the back-end but not working on the one I display.
Anyone tell me what is the problem?

Set the value on the select, not the selected property on the option.

function displaymessage() {
$("select").each(function() { this.selectedIndex = 0 });}
This Will reset the drop down value to index number 0.

Related

How to give value from select box everytime increase button of dynamically Input Jquery

I am using jQuery dynamic table inputs in my form.Whenever i select country,i get the value from select box.But when i increase dynamic button (+) and again select the country from select box from another input field.i get same value of country from first selectbox field
<table class="dynamic-fields-table">
<thead>
<tr>
<th >Country</th>
<th >City</th>
<th></th>
</tr>
</thead>
<tbody data-role="dynamic-fields">
<tr class="form-inline">
<td>
<select name="country[]" class="form-control">
<option value="1">USA</option>
<option value="2">Russia</option>
<option value="3">Japan</option>
</select>
</td>
<td>
<input type="text" name="city[]" class="form-control">
</td>
<td>
button data-role="add">Add</button>- // button for increasing or decreasing input
</td>
</tr>
</tbody>
</table>
In script file.When I select country at first it will come value right in console.but when i increase input form then i select again another country then value of country will give same as first time selected.So how should i give value of country i selected everytime i increase dynamically input button
$(document).on(
'click',
'[data-role="dynamic-fields"],
function(e) {
e.preventDefault();
var container = $(this).closest('[data-role="dynamic-fields"]');
new_field_group = container.children().filter('.form-inline:first- child').clone();
new_field_group.find('input').each(function(){
$(this).val('');
});
container.append(new_field_group);
updatecity()
}
);
$(document).on('change', " select[name='country[]']", function(){
updatecity();
});
function updatecity(){
$country = $(" select[name='country[]']").val();
console.log($country)
}

Currently, updatecity always gives you the value of the first result of $(" select[name='country[]']"). While the values of the other dropdown lists are ignored.
function updatecity(){
$country = $("select[name='country[]']").val();
console.log($country)
}
To make each dropdown list's call to updatecity behave with respect to its own value, you can add a parameter to updatecity to tell which country to update.
function updatecity($target){
$country = $target.val();
console.log($country);
}
Having the function signature changed, you will also need to update places where you call updatecity
$(document).on(
'click',
'[data-role="add"]',
function(e) {
// ...
updatecity($("select[name='country[]']"))
});
$(document).on('change', "select[name='country[]']", function(e){
updatecity($(this));
});
Also, the code you're showing will insert a new inline-form whenever <tbody> is clicked, so I changed the selector from [data-role="dynamic-fields"] to [data-role="add"]
As a sidenote, I notice that updatecity doesn't actually do anything except logging a value. You might want to have its behavior match its name.
Below I've attached a code snippet for demonstration.
$(document).on(
'click',
'[data-role="add"]',
function(e) {
e.preventDefault();
var container = $(this).closest('[data-role="dynamic-fields"]');
new_field_group = container.children().filter('.form-inline:first-child').clone();
new_field_group.find('input').each(function(){
$(this).val('');
});
container.append(new_field_group);
updatecity($("select[name='country[]']"))
}
);
$(document).on('change', "select[name='country[]']", function(e){
updatecity($(this));
});
function updatecity($target){
$country = $target.val();
console.log($country)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table class="dynamic-fields-table">
<thead>
<tr>
<th >Country</th>
<th >City</th>
<th></th>
</tr>
</thead>
<tbody data-role="dynamic-fields">
<tr class="form-inline">
<td>
<select name="country[]" class="form-control">
<option value="1">USA</option>
<option value="2">Russia</option>
<option value="3">Japan</option>
</select>
</td>
<td>
<input type="text" name="city[]" class="form-control">
</td>
<td>
<button data-role="add">Add</button><!-- button for increasing or decreasing input-->
</td>
</tr>
</tbody>
</table>

JQuery hide all elements

I want to hide the table row if one of the <span> tags has the class from the value variable.
The variable val comes from a select box.
$(".hostgroup").change(function(event) {
var val = $(this).val();
console.log(val);
$("#groups > span").each(function() {
$(this).closest("tr").show();
$(this).removeClass("hd");
});
$("#groups > span").each(function() {
if ($(this).hasClass(val)) {} else {
$(this).closest("tr").hide();
$(this).closest("tr").addClass("hd");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="hostgroup" data-placeholder="Choose a hostgroup...">
<option value="delete">delete</option>
<option value="add">add</option>
<option value="OS">OS</option>>
</select>
<tr>
<td id="groups">
<span class="add">add,</span>
<span class="OS">OS,</span>
</td>
</tr>
<tr>
<td id="groups">
<span class="delete">delete,</span>
<span class="OS">OS,</span>
</td>
</tr>
For example: I select delete and it should only display table rows that not have got a <span> with the delete class. But now it will hide all results.

$("span.delete").parent().parent().hide()
will hide entire rows with spans in them with "delete" class. Swap the class to the value of your choosing in the "change" event.
Edit:
It should be like this:
$(".hostgroup").change(function(event) {
var val = $(this).val();
console.log(val);
$("span."+val).parent().parent().hide()
});

You could search for the class based on the tr, see the working example below :
$(".hostgroup").change(function(event) {
var val = $(this).val();
$("tr").each(function() {
if ( $(this).find('.' + val).length ) {
$(this).closest("tr").addClass("hd");
} else {
$(this).closest("tr").removeClass("hd");
}
});
});
.hd {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="hostgroup">
<option></option>
<option>add</option>
<option>OS</option>
<option>delete</option>
</select>
<table>
<tr>
<td class="groups">
<span class="add">add,</span>
<span class="OS">OS,</span>
</td>
</tr>
<tr>
<td class="groups">
<span class="delete">delete,</span>
<span class="OS">OS,</span>
</td>
</tr>
</table>

Enable/disable dropdowns when checkbox checked/unchecked

I'm creating a web app using Java servlets and JSP. I have a table which contains songs. Every song has its own checkbox and drop-down. like this:
You can see that taken songs have their checkbox and drop-down disabled and that's how I want it.
What I want is when the page loads all the drop-downs will be disabled, and when I check one of the available checkboxes the drop-down that is in the same line will be enabled and when I uncheck that checkbox the dropdown will be disabled again.
Here is the JSP code:
<table id="myTable">
<tr>
<th>Songs</th>
<th>Selected</th>
<th>#</th>
<th>Available/Taken</th>
</tr>
<c:forEach items="${Entities}" varStatus="loop">
<tr>
<td><c:out value="${Entities[loop.index]}"/></td>
<td><input id="checkbox1" type="checkbox" name="selected" value=" ${Entities[loop.index]}" ${checkboxDis[loop.index]} ><br></td>
<td>
<select name="myselect" id="drop" disabled >
<option selected disabled>#</option>
<option>Cmaj</option><option>Gmaj</option>
<option>Dmaj</option><option>Amaj</option>
<option>Emaj</option><option>Bmaj</option>
<option>Fmaj</option><option>Bb_maj</option>
<option>Eb_maj</option><option>Ab_maj</option>
<option>Db_maj</option><option>Gb_maj</option>
<option>Amin</option><option>Emin</option>
<option>Bmin</option><option>F#min</option>
<option>C#_min</option><option>G#_min</option>
<option>D#_min</option><option>Cb_maj</option>
<option>Gmaj</option><option>Dmaj</option>
<option>F#maj</option><option>Cmaj</option>
<option>Fmaj</option><option>Bb_maj</option>
<option>Eb_maj</option><option>Ab_maj</option>
<option>Db_maj</option><option>A#</option>
</select>
</td>
<td>
<c:choose>
<c:when test="${checkboxDis[loop.index].equals('disabled')}">
<i class="fa fa-ban" style="color:red;"></i>
</c:when>
<c:when test="${checkboxDis[loop.index].equals('')}">
<i class="fa fa-check-circle" style="color:green;"></i>
</c:when>
</c:choose>
</td>
</tr>
</c:forEach>
</table>
The jQuery code I've done so far:
var selected1 = new Array();
$(document).ready(function() {
$("input[type='checkbox']").on('change', function() {
if ($(this).is(":checked")) {
selected1.push($(this).val());
for (var i = 0; i < selected1.length; i++) {
if (selected1[i] == $(this).val()) {
$('#drop')[i].prop("disabled", false);
}
}
} else {
for (var i = 0; i < selected1.length; i++) {
if (selected1[i] == $(this).val()) {
selected1.splice(i, 1);
$('#drop')[i].prop("disabled", true);
}
}
}
});
});
The code isn't working because I don't know how to handle the drop-downs since they have the same names and ids.

Your IDs need to be unique - in this case not needed at all for enabling the select
$(function() {
$("input[type='checkbox']").on('change', function() {
$(this).closest("tr").find("select[name=myselect]").prop("disabled", !this.checked)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input id="checkbox_1" type="checkbox" name="selected" value="1"></td>
<td>
<select name="myselect" id="drop_1" disabled>
<option selected disabled>#</option>
<option>Cmaj</option>
<option>Gmaj</option>
<option>Dmaj</option>
<option>Amaj</option>
<option>Emaj</option>
<option>Bmaj</option>
<option>Fmaj</option>
<option>Bb_maj</option>
<option>Eb_maj</option>
<option>Ab_maj</option>
<option>Db_maj</option>
<option>Gb_maj</option>
<option>Amin</option>
<option>Emin</option>
<option>Bmin</option>
<option>F#min</option>
<option>C#_min</option>
<option>G#_min</option>
<option>D#_min</option>
<option>Cb_maj</option>
<option>Gmaj</option>
<option>Dmaj</option>
<option>F#maj</option>
<option>Cmaj</option>
<option>Fmaj</option>
<option>Bb_maj</option>
<option>Eb_maj</option>
<option>Ab_maj</option>
<option>Db_maj</option>
<option>A#</option>
</select>
</td>
</tr>
<tr>
<td><input id="checkbox_2" type="checkbox" name="selected" value="2"></td>
<td>
<select name="myselect" id="drop_2" disabled>
<option selected disabled>#</option>
<option>Cmaj</option>
<option>Gmaj</option>
<option>Dmaj</option>
<option>Amaj</option>
<option>Emaj</option>
<option>Bmaj</option>
<option>Fmaj</option>
<option>Bb_maj</option>
<option>Eb_maj</option>
<option>Ab_maj</option>
<option>Db_maj</option>
<option>Gb_maj</option>
<option>Amin</option>
<option>Emin</option>
<option>Bmin</option>
<option>F#min</option>
<option>C#_min</option>
<option>G#_min</option>
<option>D#_min</option>
<option>Cb_maj</option>
<option>Gmaj</option>
<option>Dmaj</option>
<option>F#maj</option>
<option>Cmaj</option>
<option>Fmaj</option>
<option>Bb_maj</option>
<option>Eb_maj</option>
<option>Ab_maj</option>
<option>Db_maj</option>
<option>A#</option>
</select>
</td>
</tr>
</table>

Change your JSP to this:
<td><input id="checkbox_${checkboxDis[loop.index]}" type="checkbox" name="selected" value="${Entities[loop.index]}"><br></td>
<td>
<select name="myselect" id="drop_${checkboxDis[loop.index]}" disabled >
<option selected disabled>#</option>
<option>Cmaj</option><option>Gmaj</option>
<option>Dmaj</option><option>Amaj</option>
<option>Emaj</option><option>Bmaj</option>
<option>Fmaj</option><option>Bb_maj</option>
<option>Eb_maj</option><option>Ab_maj</option>
<option>Db_maj</option><option>Gb_maj</option>
<option>Amin</option><option>Emin</option>
<option>Bmin</option><option>F#min</option>
<option>C#_min</option><option>G#_min</option>
<option>D#_min</option><option>Cb_maj</option>
<option>Gmaj</option><option>Dmaj</option>
<option>F#maj</option><option>Cmaj</option>
<option>Fmaj</option><option>Bb_maj</option>
<option>Eb_maj</option><option>Ab_maj</option>
<option>Db_maj</option><option>A#</option>
</select>
</td>
Now your checkboxes and dropdowns have corresponding IDs which you can then use with jQuery:
var selected1 = new Array();
$(document).ready(function() {
$("input[type='checkbox']").on('change', function() {
if ($(this).is(":checked")) {
selected1.push($(this).val());
$('#drop_' + $(this).val()).prop("disabled", false);
} else {
$('#drop_' + $(this).val()).prop("disabled", true);
// Instead of a for-loop for removing the unchecked song,
// you can also use Array.filter():
selected1 = selected1.filter(song_id => song_id !== $(this).val());
/*
for (var i = 0; i < selected1.length; i++) {
if (selected1[i] == $(this).val()) {
selected1.splice(i, 1);
}
}
*/
}
});
});

How to toggle text when a specific value in drop-down AND checkbox is checked

So right now, I have:
<tr>
<td class="label">Status:</td>
<td>
<select name="bookStatus" id="status">
<option value="-1">- Select -</option>
<option value="0">- Active -</option>
<option value="1">- Disabled -</option>
<option value="2">- Cancelled -</option>
</select>
</td>
</tr>
</br>
<div id=outprint style="display:none">
<tr>
<td class="label">Out of Print?</td>
<td><input type="checkbox" name="outOfPrint" id="chk"/></td>
</tr>
</div>
<div id="showthis" style="display:none">
<tr>
<td class="label">Remove from ALL QUEUES and Notify?</td>
<td><input type="checkbox" name="removeAndNotify"/></td>
</tr>
</div>
and my script as:
$('#status').change(function () {
var show = $(this).val();
if (show != "-1") {
$('#outprint').show();
}
else {
$('#outprint').hide();
$('#showthis').hide();
}
$('#chk').change(function (){
if (show == "1") {
if ($(this).is(":checked")) {
$('#showthis').show();
} else {
$('#showthis').hide();
}
}
else {
$('#showthis').hide();
}
});
});
Basically I am looking for the hidden texts to pop up
When the drop-down menu is changed AND when it's set to Disabled
and you check the checkbox, the last checkbox appears.
The problems I am having are:
1) When I click on Disabled and check the checkbox, and then I change the Disabled to another option, the hidden text still pops up.
2) You click on any option other than the default one, then you click on the checkbox first before you change the option from the drop-down menu to Disabled -> the hidden text does not show up.
How would I approach this?
Fiddle

Changes made: Invalid htmls fixed, Improper event bindings fixed.
Your HTML:
<table>
<tbody>
<tr>
<td class="label">Status:</td>
<td>
<select name="bookStatus" id="status">
<option value="-1">- Select -</option>
<option value="0">- Active -</option>
<option value="1">- Disabled -</option>
<option value="2">- Cancelled -</option>
</select>
</td>
</tr>
</tbody>
</table>
<table id=outprint style="display:none">
<tbody>
<tr>
<td class="label">Out of Print?</td>
<td>
<input type="checkbox" name="outOfPrint" id="chk" />
</td>
</tr>
</tbody>
</table>
<table id="showthis" style="display:none">
<tbody>
<tr>
<td class="label">Remove from ALL QUEUES and Notify?</td>
<td>
<input type="checkbox" name="removeAndNotify" />
</td>
</tr>
</tbody>
</table>
Javascript:
var show;
$('#status').change(function() {
show = $(this).val();
if (show != "-1") {
$('#outprint').show();
} else {
$('#outprint').hide();
$('#showthis').hide();
}
});
$('#chk').change(function() {
if (show == "1") {
if ($(this).is(":checked")) {
$('#showthis').show();
} else {
$('#showthis').hide();
}
} else {
$('#showthis').hide();
}
});
DEMO

I guess you just need to reset the state of your hidden controls to default once you change the options from the dropdown and then iterate through the logic.
$('#status').change(function () {
ResetState();
var show = $(this).val();
if (show != "-1") {
$('#outprint').show();
}
else {
$('#outprint').hide();
$('#showthis').hide();
}
$('#chk').change(function (){
if (show == "1") {
if ($(this).is(":checked")) {
$('#showthis').show();
} else {
$('#showthis').hide();
}
}
else {
$('#showthis').hide();
}
});
});
function ResetState()
{
$('#outprint').hide();
$('#showthis').hide();
$('#chk').prop("checked", false);
}
Example : https://jsfiddle.net/DinoMyte/up4j39qr/4/

Show all hidden table rows when selecting empty option in select box

So far my code works fine but when I select empty select option, all the rows in my table should be visible (in other words reset the table to initial state) again. How do I do it?
I've seen this (JQuery Selector for table with hidden row - alternate row colouring) but couldn't apply to my structure.
Thanks
JQUERY:
$(document).ready(function()
{
$("#cars").change(function()
{
var selected = $(this).val();
if (selected != '')
{
var values = $.map($('#cars>option'), function(e) { return e.value; });
values.forEach(function(item)
{
if (item != '')
{
if (selected == item)
{
$('.' + item).show();
}
else
{
$('.' + item).hide();
}
}
else
{
//Show all rows
}
});
}
});
});
HTML:
<table border="1">
<tr id="header">
<td>1</td>
<td><select id="cars">
<option value=""></option>
<option value="bmw">BMW</option>
<option value="audi">AUDI</option>
<option value="mercedes">MERCEDES</option>
</select></td>
</tr>
<tr class="bmw">
<td>3.16</td>
<td>BMW</td>
</tr>
<tr class="bmw">
<td>3.18</td>
<td>BMW</td>
</tr>
<tr class="bmw">
<td>3.00</td>
<td>BMW</td>
</tr>
<tr class="audi">
<td>A1</td>
<td>AUDI</td>
</tr>
<tr class="audi">
<td>A3</td>
<td>AUDI</td>
</tr>
<tr class="mercedes">
<td>300sel</td>
<td>MERCEDES</td>
</tr>
</table>

Working Fiddle
Add this else part in your code
else {
$('table tr').show();
}

just place this:
$(this).closest('table').find('tr:hidden').show();
Although you can simplify your code like this:
$("#cars").change(function(){
$(this).closest('table').find('tr:gt(0)').hide();
this.value !== '' ? $('.'+this.value).show() : $(this).closest('table').find('tr:hidden').show();
});

Your code is unnecessarily complex. You don't need map, foreach, etc.
$("#cars").change(function()
{
$('tr[id!=header]').hide()
if (this.value)
$('.' + this.value).show()
else
$('tr').show()
}
)

Develop Reference

JavaScript is the programming language of the Web.

Once button is click the dropdown will reset - javascript

Set the value on the select, not the selected property on the option.

function displaymessage() { $("select").each(function() { this.selectedIndex = 0 });} This Will reset the drop down value to index number 0.

Related

How to give value from select box everytime increase button of dynamically Input Jquery

JQuery hide all elements

Enable/disable dropdowns when checkbox checked/unchecked

How to toggle text when a specific value in drop-down AND checkbox is checked

Show all hidden table rows when selecting empty option in select box

Categories

Resources