How to make the select dropdown be responsive to the input box - javascript

Iam trying to make the select dropdown be responsive to the input box
So when there's sth being enter in the input box (can be anything), the select will change to closed, If nothing is being enter in the input box, the select will be open. Any idea what's wrong with the code.Thanks in advance
$('.input').change(function() {
if ($(this).val() === '') {
$('.msg').text('open');}
else {
$('.msg').text('closed');}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr> <td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td></tr>
<tr> <td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td></tr>
</table>

I would suggest three changes:
Change the event binding to $('.input').on("input",function() { - it will ensure that the dropdown changes with every keypress rather than on blur. So the user will be able to see the changes as they type in.
Change $(".msg") to $(this).parents("tr").find('.msg'). The former selects all elements in DOM that have .msg class, while the latter only affects the .msg elements belonging to the current tr.
Change .text('open') to .val("open") - this sets the value of the select element.
$('.input').on("input",function() {
if ($(this).val() === '') {
$(this).parents("tr").find('.msg').val('open');
} else {
$(this).parents("tr").find('.msg').val('closed');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px">
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td>
</tr>
<tr>
<td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px">
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td>
</tr>
</table>

Use val() to change the value of the select and use keyup to trigger it if something is being pressed because if you use change it will only trigger if the focus is not already in the input.
$('.input').on('keyup',function() {
if ($(this).val() === '' ) {
$(this).parent().next().children('select').val('open');
}else {
$(this).parent().next().children('select').val('closed');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr> <td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td></tr>
<tr> <td><input type="text" class="input"> </td>
<td><select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open"> open</option>
<option value="closed">closed</option>
</select></td></tr>
</table>

As I commented on the question, use .val() function and introduce the same name as the value to select the value you want.
Take in mind that the code you provided, if there are many .msg dropdowns, it will change it for all of them.
Here is the snippet code.
$('.input').change(function() {
if ($(this).val() === '') {
$(this).parents("tr").find('.msg').val('open');
}
else {
$(this).parents("tr").find('.msg').val('closed');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open">open</option>
<option value="closed">closed</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" class="input">
</td>
<td>
<select class="msg" name="status[]" style="border: none" style="width: 5px" >
<option value="open">open</option>
<option value="closed">closed</option>
</select>
</td>
</tr>
</table>

Related

How to change check/uncheck listbox when click checkbox in Javascript

I'm usig div and id of css to check and uncheck in checkbox, but my source cannot as expected
step 1: as default checkbox is uncheck and listbox is disable
step 2: when i check checkbox, listbox is enable
step 3: back step 1, if i uncheck checkbox, listbox is disable
my souce:
$('#parnerCheck2').click(function() {
$('#partnerName').prop("checked", false).prop("disabled", true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
<th scope="row">Partner</th>
<td colspan="1" style="margin-top: 4px;">
<input id="parnerCheck2" name="parnerCheck" type="checkbox" value="0" /><span>PARTNER</span>
</td>
<td>
<select id="partnerName" name="partnerName">
<option value="" selected>Choose One</option>
<option>01 - Elite</option>
</select>
</td>
</tr>
How to fix the problem as my description? thank a lot
You where almost there. You can set disabled property on the list box with the checked value of the checkbox, prefixed with the not operator ! to reverse the value, to get the result you want.
$('#parnerCheck2').click(function() {
$('#partnerName').prop("disabled", !$(this).prop("checked"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
<th scope="row">Partner</th>
<td colspan="1" style="margin-top: 4px;">
<input id="parnerCheck2" name="parnerCheck" type="checkbox" value="0" /><span>PARTNER</span>
</td>
<td>
<select id="partnerName" name="partnerName" disabled>
<option value="" selected>Choose One</option>
<option>01 - Elite</option>
</select>
</td>
</tr>
This would also work.
<body>
<script>
$(document).ready(function() {
//set initial state.
$('#partnerName').prop('disabled', true);
$('#partnerCheck').click(function() {
if ($('#partnerCheck').is(':checked')) {
$('#partnerName').prop('disabled', false);
}
});
});
</script>
<tr>
<th scope="row">Partner</th>
<td colspan="1" style="margin-top: 4px;">
<input id="partnerCheck" name="partnerCheck" type="checkbox" value="0" /><span>PARTNER</span>
</td>
<td>
<select id="partnerName" name="partnerName">
<option value="" selected >Choose One</option>
<option>01 - Elite</option>
</select>
</td>
</tr>
</body>

How to Hide (or Show) child drop-down (dynamic html) in jquery?

Here create a dynamic table row when clicking on + button add a new row and click on - button remove row design like this,
Here subject drop-down display and also instructor drop-down display but the problem is when select subject maths instructor drop-down show and when select a science instructor drop-down hide but it's changing in all drop-down.
$('body').on('change', '.course_topic', function() {
var topic_name = $(this).val();
var names = ['Registration', 'Lunch Break', 'Tea Break'];
if (jQuery.inArray(topic_name, names) != '-1') {
$(this).closest('table').find('tbody#schedule_table').find('td:last').parent().find('td').hide();
} else {
$(this).closest('table').find('tbody#schedule_table').find('td:last').parent('td').find('td').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<th>From Time</th>
<th>To Time</th>
<th>Subject</th>
<th>Instructor</th>
<th></th>
</tr>
</tbody>
<tbody id="schedule_table">
<tr id="ScheduleTable1">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="" value="11:54 AM" type="text" id="CourseScheduleScheduleFromTime"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text" id="CourseScheduleScheduleToTime"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic" id="CourseScheduleScheduleSubject">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule][schedule_instructor][]" default="" class="form-control select2me instructor_name" id="CourseScheduleScheduleInstructor" style="display: none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant</option>
</select>
</td>
<td><input type="button" class="btn btn-primary btn-style" onclick="remove('ScheduleTable1')" name="Delete" value="-"></td>
</tr>
<tr id="ScheduleTable0">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="readonly" value="11:54 AM" type="text" id="CourseScheduleScheduleFromTime"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text" id="CourseScheduleScheduleToTime"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic" id="CourseScheduleScheduleSubject">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule]
[schedule_instructor][]" default="" class="form-control select2me
instructor_name" id="CourseScheduleScheduleInstructor" style="display:
none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant
</option>
</select>
</td>
<td><input type="button" class="btn btn-
primary btn-style" id="AddScheduleRow1" name="Add" value="+">
</td>
</tr>
</tbody>
</table>
That happens because of duplicate identifiers, the id attribute must be unique in the same document.
That will be fixed by replacing the duplicate ones with common classes.
Then your selector could be simply :
$(this).closest('tr').find('.instructor_name');
$('body').on('change', '.course_topic', function() {
var topic_name = $(this).val();
var names = ['Registration', 'Lunch Break', 'Tea Break'];
var instructor_name = $(this).closest('tr').find('.instructor_name');
if ($.inArray(topic_name, names) != -1) {
instructor_name.hide();
} else {
instructor_name.show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<th>From Time</th>
<th>To Time</th>
<th>Subject</th>
<th>Instructor</th>
<th></th>
</tr>
</tbody>
<tbody id="schedule_table">
<tr class="ScheduleTable1">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="" value="11:54 AM" type="text"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule][schedule_instructor][]" default="" class="form-control select2me instructor_name" style="display: none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant</option>
</select>
</td>
<td><input type="button" class="btn btn-primary btn-style" onclick="remove('ScheduleTable1')" name="Delete" value="-"></td>
</tr>
<tr class="ScheduleTable0">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="readonly" value="11:54 AM" type="text"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule]
[schedule_instructor][]" default="" class="form-control select2me
instructor_name" style="display:
none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant
</option>
</select>
</td>
<td><input type="button" class="btn btn-
primary btn-style" id="AddScheduleRow1" name="Add" value="+">
</td>
</tr>
</tbody>
</table>

JavaScript to show in label each selected value of drop downs in a table

I am trying to print next to each dropdown of my table the selected value.
I used the following code:
<script type="text/javascript">
$(window).load(function() {
$("select").change(function() {
var str = "";
$(".item-number option:selected").each(function(i) {
if ($(this).attr('label'))
str = $(this).attr('label');
else
str = "Description shows up here ";
});
$(".item-name").text(str);
}).trigger('change');
});
</script>
Whenever I change one of the drop downs value the labels of all the table becomes the same.
Is there a way to change only the label next to the drop down I change the selected option?
The HTML code of the table is:
<tr>
<td>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select name="status[]" class="item-number">
<option value="1" label="Active">Active</option>
<option value="0" label="Deactive" selected="selected">Deactive</option>
<option value="delete" label="Delete">Delete</option>
</select>
</td>
<td><span class="item-name">Description shows up here</span></td>
</tr>
<tr>
<td><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select name="status[]" class="item-number">
<option value="1" label="Active">Active</option>
<option value="0" label="Deactive" selected="selected">Deactive</option>
<option value="delete" label="Delete">Delete</option>
</select>
</td>
<td><span class="item-name">Description shows up here</span></td>
</tr>
<tr>
<td><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select name="status[]" class="item-number">
<option value="1" label="Active">Active</option>
<option value="0" label="Deactive" selected="selected">Deactive</option>
<option value="delete" label="Delete">Delete</option>
</select></td>
<td><span class="item-name">Description shows up here</span></td>
</tr>
Updated to fit your html.
$(document).ready(function(){
$("select").change(function() {
// No need to loop through all the selects each time, since you can only change one value at a time.
var str = $(this).find("option:selected").attr('label') || "Description shows up here";
$(this).closest("tr").find(".item-name").html(str);
}).trigger('change');
});
table td{
border:1px solid black;
}
select,
table td{
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<select name="status[]" class="item-number">
<option value="1" label="Active">Active</option>
<option value="0" label="Deactive" selected="selected">Deactive</option>
<option value="delete" label="Delete">Delete</option>
</select>
</td>
<td><span class="item-name">Description shows up here</span></td>
</tr>
<tr>
<td>
<select name="status[]" class="item-number">
<option value="1" label="Active">Active</option>
<option value="0" label="Deactive" selected="selected">Deactive</option>
<option value="delete" label="Delete">Delete</option>
</select>
</td>
<td><span class="item-name">Description shows up here</span></td>
</tr>
<tr>
<td>
<select name="status[]" class="item-number">
<option value="1" label="Active">Active</option>
<option value="0" label="Deactive" selected="selected">Deactive</option>
<option value="delete" label="Delete">Delete</option>
</select></td>
<td><span class="item-name">Description shows up here</span></td>
</tr>
</tbody>
</table>

jQuery and digging down elements for a keypress event

Hey all I want to be able to hit the enter when I am on either a dropdown box (select box) or a normal text field box.
My current HTML code looks like:
<tr class="jsgrid-edit-row">
<td class="jsgrid-cell jsgrid-align-left" style="width: 100px;">
<select>
<option value="1">SW</option>
<option value="2">HW</option>
</select>
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 100px;">
<select>
<option value="1">COMPUTER</option>
<option value="2">MONITOR</option>
<option value="3">NETWORK COMPONENTS</option>
<option value="4">OFFICE EQUIPMENT</option>
<option value="5">SOFTWARE</option>
<option value="6">STORAGE</option>
</select>
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
</tr>
I've tried doing the following:
$('.jsgrid-edit-row > input').keypress(function (e) {
var key = e.which;
console.log(e.which);
if (key == 13) // the enter key code
{
console.log('hit enter!');
return false;
}
});
Using .jsgrid-edit-row > input I figured it would find that class and then move to its child and look for any input element that I was currently on?
So what am I doing incorrectly?
Here you go with one more solution https://jsfiddle.net/q7r4ccb4/1/
$('.jsgrid-edit-row > td > input').keypress(function (e) {
var key = e.which;
console.log(e.which);
if (key == 13) // the enter key code
{
console.log('hit enter!');
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="jsgrid-edit-row">
<td class="jsgrid-cell jsgrid-align-left" style="width: 100px;">
<select>
<option value="1">SW</option>
<option value="2">HW</option>
</select>
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 100px;">
<select>
<option value="1">COMPUTER</option>
<option value="2">MONITOR</option>
<option value="3">NETWORK COMPONENTS</option>
<option value="4">OFFICE EQUIPMENT</option>
<option value="5">SOFTWARE</option>
<option value="6">STORAGE</option>
</select>
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
<td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
<input type="text" />
</td>
</tr>
</table>
Use this instead
$('.jsgrid-edit-row input').keypress(function (e) {
This syntax searches for all input tags present inside the jsgrid-edit-row class

Form validation if user leaves drop down populated with text

I have a page that I need to pop up an error message if the user leaves information in a box.
The user is selecting "Yes" from the Sale drop down and selecting a price (for example £10) from the New Product drop down. They are then changing the Sale drop down to "No" but leaving the price (£10) and this information is being submitted to the database.
How can I add code that warns the user that they have left the price (£10) when they have selected "No" in the Sale drop down?
<form name="test" onsubmit="return validateForm()" method="POST">
<table width="716">
<input name="CallType2" type="hidden" id="CallType2" value="Unfulfilled Sales"/></td>
</tr><tr>
<td style="text-align: left;">Mobile Number: </td>
<td colspan="2" style="text-align: left;"><input name="MobileNumber" type="text" id="MobileNumber" maxlength="11" /></td>
</tr>
<tr>
<td style="text-align: left;">Sale:</td>
<td colspan="2" style="text-align: left;"><select name="Sale" id="Sale" onchange="display(this,'Yes','No');" >
<option value=""></option>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select> </td>
</tr>
<tbody id="Yes" style="display: none;">
<tr>
<td class="title"><div align="left">New Product:</div></td>
<td colspan="2" class="field">
<div align="left">
<label>
<select name="SaleProduct" id="SaleProduct">
<option value=""></option>
<option value="£10">£10</option>
<option value="£6.50">£6.50</option>
</select> </label>
</div></td>
</tr>
<tr>
</p>
</div></td>
</tr>
<tbody id="No" style="display: none;">
<tr>
<td class="title"><div align="left">Non Sale Reason:</div></td>
<td colspan="2" class="field">
<div align="left">
<label>
<span style="text-align: left;">
<select name="CancelReason" id="CancelReason">
<option value=""></option>
<option value="Account changes incomplete">Account changes incomplete</option>
<option value="Customer Credit Rating">Customer Credit Rating</option>
<option value="Handset Ineligible Damaged">Handset Ineligible Damaged</option>
<option value="Handset Ineligible (Matrix)">Handset Ineligible (Matrix)</option>
<option value="Migration not yet complete">Migration not yet complete</option>
<option value="No transaction number">No transaction number</option>
<option value="Insurance already on account">Insurance already on account</option>
</select>
</span></label>
</div></td>
</tr>
</tbody>
</tr>
</tr>
<br>
</tr>
</table>
<p>
<input type="hidden" name="MM_insert" value="test">
<p align="center">
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
</fieldset>
</body>
https://jsfiddle.net/hpowe25j/
There is already a validateForm() running on submit to check that other boxes (that I have removed from this example) are not left blank
Thank you
I don't think warning a user at that point is the right thing to do. They don't want to sale, why they should be getting a warning about the price. I think you should just remove the value in your validateForm function if Sale=No.
if(document.getElementById("Sale").value == undefined || document.getElementById("Sale").value == 'No')
document.getElementById('SaleProduct').value = "";
Or, if you really want to warn the user, change your 'display' function triggered from the onchange event. add this to the code
if(document.getElementById("Sale").value == 'No' && document.getElementById('SaleProduct').value != '')
alert('You should remove the price!'); // or make some div visible that contains the error message
You can also do this on validateForm.

Categories