I'm wanting to disable one select box when the other select box == 1 and visa versa. I know how to do this with IDs, but where this gets tricky is that the IDs and names of the select boxes that I'm trying to target are getting dynamically generated by php. So I need to be able to target the select elements without using the unique, numeric number inside of it. I've tried a few things before this such as the ":contains" or ":input" selector to narrow it down by tr but to no avail so I resulted to using wildcards but I'm still not able to get it working. I'm fairly new to jQuery so it's probably just a simple syntax error.
var update_tickets = function() {
if ($("select[id$='Online']").selectedIndex == "1") {
$("select[id$='On-site']").prop('disabled', true);
} else if ($("select[id$='On-site']").selectedIndex == "1") {
$("select[id$='Online']").prop('disabled', true);
} else {
$("select[id$='Online']").prop('disabled', false);
$("select[id$='On-site']").prop('disabled', false);
}
};
$(update_tickets);
$("select[id$='On-site']").change(update_tickets);
$("select[id$='Online']").change(update_tickets);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="em-tickets fusion-table table-1 table" cellspacing="0" cellpadding="0">
<tr>
<th class="em-bookings-ticket-table-type">Location</th>
<th class="em-bookings-ticket-table-price">Price</th>
<th class="em-bookings-ticket-table-spaces">Spaces</th>
</tr>
<tr class="em-ticket" id="em-ticket-14">
<td class="em-bookings-ticket-table-type">On-site Enrollment</td>
<td class="em-bookings-ticket-table-price">$50.00</td>
<td class="em-bookings-ticket-table-spaces boyyyyyyy">
<select name="em_tickets[14][spaces]" class="em-ticket-selection" id="em-ticket-spaces-14-On-site">
<option>0</option>
<option>1</option>
</select>
</td>
</tr>
<tr class="em-ticket" id="em-ticket-16">
<td class="em-bookings-ticket-table-type">Online registration</td>
<td class="em-bookings-ticket-table-price">$50.00</td>
<td class="em-bookings-ticket-table-spaces boyyyyyyy">
<select name="em_tickets[16][spaces]" class="em-ticket-selection" id="em-ticket-spaces-16-Online">
<option>0</option>
<option>1</option>
</select>
</td>
</tr>
</table>
You were trying to use selectedIndex to get the value of your select elements, but that's vanilla JS which works on DOM nodes, not jQuery selectors, and doesn't return a string (just the index). (The proper way to access that would be $('select')[0].selectedIndex.)
Instead, use .val() to return the string value of an input/select element using jQuery.
Here's a fixed demo:
var update_tickets = function() {
if ($("select[id$='Online']").val() == "1") {
$("select[id$='On-site']").prop('disabled', true);
} else if ($("select[id$='On-site']").val() == "1") {
$("select[id$='Online']").prop('disabled', true);
} else {
$("select[id$='Online']").prop('disabled', false);
$("select[id$='On-site']").prop('disabled', false);
}
};
$(update_tickets);
$("select[id$='On-site']").change(update_tickets);
$("select[id$='Online']").change(update_tickets);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="em-tickets fusion-table table-1 table" cellspacing="0" cellpadding="0">
<tr>
<th class="em-bookings-ticket-table-type">Location</th>
<th class="em-bookings-ticket-table-price">Price</th>
<th class="em-bookings-ticket-table-spaces">Spaces</th>
</tr>
<tr class="em-ticket" id="em-ticket-14">
<td class="em-bookings-ticket-table-type">On-site Enrollment</td>
<td class="em-bookings-ticket-table-price">$50.00</td>
<td class="em-bookings-ticket-table-spaces boyyyyyyy">
<select name="em_tickets[14][spaces]" class="em-ticket-selection" id="em-ticket-spaces-14-On-site">
<option>0</option>
<option>1</option>
</select>
</td>
</tr>
<tr class="em-ticket" id="em-ticket-16">
<td class="em-bookings-ticket-table-type">Online registration</td>
<td class="em-bookings-ticket-table-price">$50.00</td>
<td class="em-bookings-ticket-table-spaces boyyyyyyy">
<select name="em_tickets[16][spaces]" class="em-ticket-selection" id="em-ticket-spaces-16-Online">
<option>0</option>
<option>1</option>
</select>
</td>
</tr>
</table>
Try this:
$('body').on('change', 'select[id$="On-site"]', update_tickets);
$('body').on('change', 'select[id$="Online"]', update_tickets);
Related
I need to perform validation on TextArea based on below scenario:
If Mobile is selected in the dropdown, only number should allow to enter in the TextArea.
If Email is selected in the dropdown, we can enter any character in the TextArea.
image snippet here
Below is my code to achieve above scenario. I have performed validation based on class name of Text Area. When I change dropdown value, I am changing the class name of Text Area.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function changeNotifyTypeValue(textboxControl)
{
textboxControl.value="";
if (textboxControl.className=="mobileValidation")
textboxControl.className="emailValidation";
else
textboxControl.className="mobileValidation";
}
$(function() {
$('.numberValidation').keyup(function() {
this.value = this.value.replace(/[^0-9,][.]?/g, '');
});
$('.emailValidation').keyup(function() {
//email validation
});
});
</script>
</head>
<body>
<table border="1" class="display"
id="NotificationTable">
<thead>
<tr style="background: #0086cd; color: #fff;">
<th>Update NotifyType</th>
<th>Update Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select
id="notifyTypeID0"
class="form-control" name="notifyType0" onchange="changeNotifyTypeValue(updateAddress0)" >
<option selected value=EMAIL>EMAIL</option>
<option value="mobile">Mobile</option>
</select>
</td>
<td>
<textarea name="address0" id="updateAddress0"
class="emailValidation">abc#gmail.com</textarea>
</td>
</tr>
<tr>
<td>
<select id="notifyTypeID1" class="form-control" name="notifyType1" onchange="changeNotifyTypeValue(updateAddress1)" >
<option value="EMAIL">EMAIL</option>
<option selected value="mobile">Mobile</option>
</select>
</td>
<td> <textarea name="address1" id="updateAddress1" class="numberValidation">9999999999</textarea> </td>
</tr>
</tbody>
</table>
</body>
</html>
Here is my doubt
I can see through inspect element, when I change dropdown value, the class name of text Area is being changed on run time. But, still validation is being perform based on old class name of text Area.
There are some issue with your <script>, you are trying to use pure javascript in jquery.
Once try this script and check
$(document).ready(function(){
$('textarea').keyup(function(){
if($(this).hasClass("mobileValidation")){
var cv = $(this).val();
$(this).val(cv.replace(/[^0-9,][.]?/g, ''));
} else if($(this).hasClass("emailValidation")){
//your email validation code;
}
});
});
The code is messed up with both javascript and jQuery. I'm providing javascript only solution. And classes are also mismatching (mobileValidation and numberValidation).
Here is the running code. You can run code snippet and check.
<html>
<head>
<script>
function changeNotifyTypeValue(textboxControl) {
textboxControl.value = '';
if (textboxControl.className == "mobileValidation")
textboxControl.className = "emailValidation";
else
textboxControl.className = "mobileValidation";
}
function validate(textboxControl) {
console.log(textboxControl.className);
if (textboxControl.className == "emailValidation") {
console.log('email');
} else {
console.log('number');
textboxControl.value = textboxControl.value.replace(/[^0-9,][.]?/g, '');
}
}
</script>
</head>
<body>
<table border="1" class="display" id="NotificationTable">
<thead>
<tr style="background: #0086cd; color: #fff;">
<th>Update NotifyType</th>
<th>Update Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="notifyTypeID0" class="form-control" name="notifyType0" onchange="changeNotifyTypeValue(updateAddress0)">
<option selected value=EMAIL>EMAIL</option>
<option value="mobile">Mobile</option>
</select>
</td>
<td>
<textarea name="address0" id="updateAddress0" class="emailValidation" onkeyup="validate(updateAddress0)">abc#gmail.com</textarea>
</td>
</tr>
<tr>
<td>
<select id=" notifyTypeID1" class="form-control" name="notifyType1" onchange="changeNotifyTypeValue(updateAddress1)">
<option value="EMAIL">EMAIL</option>
<option selected value="mobile">Mobile</option>
</select>
</td>
<td> <textarea name="address1" id="updateAddress1" class="mobileValidation" onkeyup="validate(updateAddress1)">9999999999</textarea> </td>
</tr>
</tbody>
</table>
</body>
</html>
I am trying to create an change event so when a user selects an option from a dropdown, the corresponding row in the table is highlighted (via adding a class).
I have tried two things.. jQuery and javascript.
Here is my jQuery:
$("#phoneType").change(function() {
if (document.getElementById("optionSelect").value == 2) {
var selectedStatus = parseInt(document.getElementById("optionSelect").value);
$('.clickable-row').removeClass("cra-children-item-selected");
$(this).addClass('cra-children-item-selected');
}
});
Note that I am using javascript for the first two lines because I kept getting "val() is not a function" errors.
I tried using javascript to simply add/remove classes, but it doesn't seem to like my syntax...
document.getElementsByClassName("clickable-row").className = "clickable-row";
document.getElementById(selectedStatus).className = "clickable-row item-selected");
What I don't understand is why the jQuery isn't working... I have another function that works perfectly:
$(".clickable-row").click(function(event) {
console.log($(this).attr('id'));
$('.clickable-row').removeClass("item-selected");
$(this).addClass('item-selected');
});
Why is the code above (on click) working, but not my on change function?
Here is HTML:
<table class="table table-striped table-bordered">
<tr>
<th scope="col">Type</th>
<th scope="col">Number</th>
</tr>
<tr id="1" class="clickable-row">
<td>
Work
</td>
<td>
705-556-6677
</td>
</tr>
<tr id="6" class="clickable-row">
<td>
Cellular phone
</td>
<td>
613-444-7777
</td>
</tr>
</table>
<select name="phoneType" id="phoneType">
<option value="-1">Select</option>
<option value="3">Home</option>
<option value="1">Work</option>
<option value="6">Cellular phone</option>
</select>
Check this, it's actually working.
$("#phoneType").change(function() {
var val = $(this).val();
$("tr").removeClass("selected");
$("#tr" + val).addClass("selected");
})
.selected {border: solid 1px #000; background-color:blue;};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<th scope="col">Type</th>
<th scope="col">Number</th>
</tr>
<tr id="tr1" class="clickable-row">
<td>
Work
</td>
<td>
705-556-6677
</td>
</tr>
<tr id="tr6" class="clickable-row">
<td>
Cellular phone
</td>
<td>
613-444-7777
</td>
</tr>
</table>
<select name="phoneType" id="phoneType">
<option value="-1">Select</option>
<option value="3">Home</option>
<option value="1">Work</option>
<option value="6">Cellular phone</option>
</select>
Based on the HTML you presented, it seems the conditional is never true:
if (document.getElementById("optionSelect").value == 2) {
and should be rewritten referring to the select element for an option value that actually exists
$("#phoneType").change(function() {
var t = $(this),
tVal = t.val();
if (tVal === '3') {
console.log(tVal);
}
});
I would highly recommend you don't try to use id="1" as your row IDs. Use HTML5 data attributes instead:
<tr class="clickable-row" data-id="6">
Then simple jQuery which will select the row:
$("#phoneType").change(function() {
var id = parseInt($(this).val());
var $row = $('.clickable-row[data-id="' + id + '"]');
$('.clickable-row').removeClass("cra-children-item-selected");
if (id > 0) {
$row.addClass('cra-children-item-selected');
}
});
I have a html select tag with several options in it, I want to make users to select any one options and depending on the user's selection, pass this in a JS function, and perform varoius actions depending on what is selected by user.
My Problem is that, it does not match user selection with the if else condition, on which my rotate() function will get executed, but it does not work.
here is my code.
<table class="table-box">
<thead>
<th colsapn="5" style="color:red">
My Photo Album
</th>
</thead>
<tbody>
<tr>
<td id="r1">Roboust</td>
<td id="r2">Dynamic</td>
<td id="r3">Adhere</td>
</tr>
<tr>
<td id="r4">Popular</td>
<td id="r5">Trending</td>
<td id="r6">Favourite</td>
</tr>
<tr>
<td id="r7">Famous</td>
<td id="r8">Blockbouster</td>
<td id="r9">Navie</td>
</tr>
</tbody>
</table>
<p>Select Box from Below to flip:</p>
<select id="ddlbox" onchange="GetSelectedTextValue(this)">
<option value=""></option>
<option value="1">Roboust</option>
<option value="2">Dynamic</option>
</select>
<script>
//var selectDdl = function(ddlbox) {
var seletion=document.getElementById('ddlbox');
var selectedText = seletion.options[seletion.selectedIndex].Value;
if(selectedText == "Roboust") {
rotate();
}
else {
alert("Else called");
}
var rotate =function() {
document.getElementById('r1').style="transform:rotateX(180deg);transition:0.6s;transform-style:preserve-3d";
</script>
I can't see your GetSelectedTextValue function which should be something
function GetSelectedTextValue (t){
var selectedText = t.options[t.selectedIndex].innerHTML;
if(selectedText == "Roboust") {
rotate();
}
else {
alert("Else called");
}
}
As mentioned in the title, I want to know how to make an HTML select box to make an ajax request and use that to filter table. I have searched a lot and was not able to find a good solution.
How can i get it to filter??
My source code on jsfiddle.net:
<select>
<option value="all">All</option>
<option value="tim">Tim</option>
<option value="cook">Cook</option>
</select>
<br>
<br>
<br>
<table border="1">
<tr>
<th>Name</th>
<th>Year</th>
</tr>
<tr>
<td>Tim</td>
<td>2015</td>
</tr>
<tr>
<td>Cook</td>
<td>2015</td>
</tr>
</table>
Your example is a little odd because you are filtering down to only one row, but here is how you can make it work.
First, give your <select> and <table> each an id. I chose something generic:
<select id='column-select'>
<option value="all">All</option>
<option value="tim">Tim</option>
<option value="cook">Cook</option>
</select>
<br>
<br>
<br>
<table id='data' border="1">
<tr>
<th>Name</th>
<th>Year</th>
</tr>
<tr>
<td>Tim</td>
<td>2015</td>
</tr>
<tr>
<td>Cook</td>
<td>2015</td>
</tr>
</table>
Now, just use some Jquery to filter out the rows you don't want when the column changes
$(document).ready(function() { // Do nothing until document is ready
$("#column-select").change(function() { // On <select> change...
var selection = $("#column-select").val();
if (selection == "all")
{
$("#data tr").show(); // Show all rows
} else
{
$("#data tr").each(function() { // For each row
if ($(this).find("th").length == 0) // If this is not a heading row
{
if ($(this).find("td").eq(0).text().toLowerCase() == selection)
{
// Show rows where the first column matches
$(this).show();
} else
}
// Hide rows where the first column does not match
$(this).hide();
}
}
});
}
});
});
Here is a jsfiddle to demonstrate.
I am both adding and removing table rows with jQuery. I can add rows easily, but am having trouble removing ones that were created.
You can view the page in action here: http://freshbaby.com/v20/wic/request_quote.cfm, with the relevant code pasted below.
HTML
<table style="width:600px;" id="product-list" summary="Lists details about products users wish to purchase">
<thead valign="top" align="left">
<tr>
<th>Products</th>
<th>Language</th>
<th>Quantity</th>
<th></th>
</tr>
</thead>
<tbody valign="top" align="left">
<tr>
<td>
<cfselect query="getProductListing" name="product" size="1" display="name" value="name" queryPosition="below">
<option value=""></option>
</cfselect>
</td>
<td>
<select name="language" size="1">
<option value="English">English</option>
<option value="Spanish">Spanish</option>
</select>
</td>
<td>
<cfinput name="quantity" required="yes" message="Enter your desired quantity" size="10" maxlength="3" mask="999">
</td>
<td valign="bottom">Add Another Product</td>
</tr>
</tbody>
</table>
JavaScript:
<script>
$(function() {
var i = 1;
$(".addrow").click(function() {
$("table#product-list tbody > tr:first").clone().find("input").each(function() {
$(this).attr({
'id': function(_, id) { return id + i },
'value': ''
});
}).end().find("a.addrow").removeClass('addrow').addClass('removerow').text('< Remove This Product')
.end().appendTo("table#product-list tbody");
i++;
return false;
});
$("a.removerow").click(function() {
//This should traverse up to the parent TR
$(this).parent().parent().remove();
return false;
});
});
</script>
When I click the link to remove the row that said link is contained in, nothing happens. No script error, so it has to be logic.
Try this instead
$("#product-list").on('click','a.removerow',function(e) {
e.preventDefault();
//This should traverse up to the parent TR
$(this).closest('tr').remove();
return false;
});
This will ensure that newly created elements can be removed. When you use the $("a.removerow").click(.. it only affects the elements in existence (none) and not the ones that will be dynamically created.