I have this working code which updates attributes based on the selection from a drop down box. I have it so the input fields and drop down save but currently the attributes do not. So when I refresh the page all of the data is still their but the input fields are no longer set to disabled. What would be the best way to go about that?
$(document).ready(function() {
$('.my_option').on('change', change_attribute);
});
function change_attribute() {
var version_val = $(this).val();
var parent_row = $(this).closest('tr');
if (version_val == 10) {
parent_row.find('.1').find('input').attr("disabled", "disabled");
parent_row.find('.2').find('input').removeAttr("disabled");
} else if (version_val == 20) {
parent_row.find('.2').find('input').attr("disabled", "disabled");
parent_row.find('.1').find('input').removeAttr("disabled");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<select class="my_option">
<option>10</option>
<option>20</option>
</select>
</td>
<td class="1"><input type="text"></td>
<td class="2"><input type="text"></td>
</tr>
<tr>
<td>
<select class="my_option">
<option>10</option>
<option>20</option>
</select>
</td>
<td class="1"><input type="text"></td>
<td class="2"><input type="text"></td>
</tr>
<tr>
<td>
<select class="my_option">
<option>10</option>
<option>20</option>
</select>
</td>
<td class="1"><input type="text"></td>
<td class="2"><input type="text"></td>
</tr>
</tbody>
</table>
Related
I'm trying to select multiple options on the select box by clicking on different divs or table row.
I have a multiple select named #events.
I'm using the code below which is fully functional with a simple selectbox but not with a multiple one.
$("td.eventID").on("click", function(e) {
var $select = $("select#events");
$select.val($(this).data("value"));
// simulate click:
$select.find(":selected").click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="eventID" data-value="1" style="cursor:pointer;">
FirstEventName
</td>
</tr>
<tr>
<td class="eventID" data-value="11" style="cursor:pointer;">
EV_Hildegard Spinka
</td>
</tr>
<tr>
<td class="eventID" data-value="14" style="cursor:pointer;">
EV_Melody Parker
</td>
</tr>
<tr>
<td class="eventID" data-value="4" style="cursor:pointer;">
EV_Theodore Auer
</td>
</tr>
<tr>
<td class="eventID" data-value="17" style="cursor:pointer;">
EV_Aditya Stracke
</td>
</tr>
</tbody>
</table>
<select name="events[]" id="events" class="form-control" multiple="" required="">
<option value="1">FirstEventName</option>
<option value="14">EV_Melody Parker</option>
<option value="4">EV_Theodore Auer</option>
<option value="17">EV_Aditya Stracke</option>
<option value="11">EV_Hildegard Spinka</option>
</select>
You could separate the multiple values by comma , like data-value="books,html" then split when you're selecting them.
NOTE: To update the view after selecting the options programmatically you could use .change()
$(".eventID").on("click", function(e) {
$("#events").val($(this).data("value").split(',')).change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="events" multiple>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
<button class="eventID" data-value="css">css</button>
<button class="eventID" data-value="php">php</button>
<button class="eventID" data-value="books,html">Books + html</button>
I SOLVED thanks to Zakaria Acharki's answer. However, I don't know if it's the best solution but it's working as I want.
I added a hidden input which will recieve all values I want to select.
After that I changed a little bit the JS code and add a new one.
// This code add values to the hidden input with "," and then, selecting every value on multiple select
$("td.eventID").on("click", function(e) {
var group = $('#groupingEvents');
var groupValues = group.val();
if(groupValues == "") {
group.val($(this).data("value") + ',');
} else
group.val(groupValues + $(this).data("value"));
$("#events").val(group.val().split(',')).change();
});
// This code is used if you click the selectbox to choose a new option, you need to send values to hidden input, otherwise, a bug appears.
$("#events").on("click", function() {
var group = $('#groupingEvents');
var selectValues = $(this).val();
if(group.val() == "") {
group.val(selectValues.join(","));
} else
group.val(selectValues.join(",") + ',')
});
$("td.eventID").on("click", function(e) {
var group = $('#groupingEvents');
var groupValues = group.val();
if(groupValues == "") {
group.val($(this).data("value") + ',');
} else
group.val(groupValues + $(this).data("value"));
$("#events").val(group.val().split(',')).change();
});
$("#events").on("click", function() {
var group = $('#groupingEvents');
var selectValues = $(this).val();
if(group.val() == "") {
group.val(selectValues.join(","));
} else
group.val(selectValues.join(",") + ',')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="eventID" data-value="1" style="cursor:pointer;">
FirstEventName
</td>
</tr>
<tr>
<td class="eventID" data-value="11" style="cursor:pointer;">
EV_Hildegard Spinka
</td>
</tr>
<tr>
<td class="eventID" data-value="14" style="cursor:pointer;">
EV_Melody Parker
</td>
</tr>
<tr>
<td class="eventID" data-value="4" style="cursor:pointer;">
EV_Theodore Auer
</td>
</tr>
<tr>
<td class="eventID" data-value="17" style="cursor:pointer;">
EV_Aditya Stracke
</td>
</tr>
</tbody>
</table>
<input type="hidden" id="groupingEvents" value="">
<select name="events[]" id="events" class="form-control" multiple="" required="">
<option value="1">FirstEventName</option>
<option value="14">EV_Melody Parker</option>
<option value="4">EV_Theodore Auer</option>
<option value="17">EV_Aditya Stracke</option>
<option value="11">EV_Hildegard Spinka</option>
</select>
I have created a table with multiple columns and written a jquery javascript that duplicates or clones the the last row of the table. However when it clones the last row it also gives each column the same name and id as the previous row.
jsp code:
<div id="invTruck" class="invTruck">
<table id="tbl_invTruck" width="100%" border="0">
<tbody>
<tr>
<td width="15%" style="display:none;"><center>Work Order Id</center></td>
<td width="17%"><center>Truck Type</center></td>
<td width="17%"><center>Licences Plate #</center></td>
<td width="17%"><center>Driver ID</center></td>
<td width="17%"><center>Max Haulage Weight</center></td>
<td width="17%"><center>Job Number</center></td>
</tr>
<tr>
<td style="display:none;"><input name="wInv_work_Id" type="text"></td>
<td><select id="invTru_Type" name="invTru_Type" onchange="getTruckPlates(this.value)">
<option disabled selected hidden value="">Select A Truck Type</option>
<%while(rsinvTru1.next()){%>
<option><%=rsinvTru1.getString(1)%></option>
<%}%>
</select>
</td>
<td><select id="invTru_LicensePlateNo" name="invTru_LicensePlateNo" required>
<option disabled selected hidden value="">Select A Truck</option>
</select></td>
<td><input name="driver_emp_Id" type="text"></td>
<td><input name="invTru_MaxHw" type="text"></td>
<td><input name="" type="text"></td>
</tr>
</tbody>
</table>
<table width="100%" height="50%" border="0">
<tr>
<td width="50%"><input class="buttonCreateInv" id="btn_AddTruck" type="button" value="Add A Truck"></td>
<td width="50%"><input class="buttonCreateInv" name="btn_RemoveTruck" type="button" value="Remove A Truck"></td>
</tr>
</table>
</div>
JQuery Javascript:
$(document).ready(function(){
$("#btn_AddTruck").click(function(){
var $tableBody = $('#tbl_invTruck').find("tbody"),
$trLast = $tableBody.find("tr:last"),
$trNew = $trLast.clone();
$trLast.after($trNew);
});
});
The expected output i would like is for the duplicated table row
where id in id1 is the orignal tables td id and 1 is appended to it.
and that if i was to add another row to the table
where id in id2 is the orignal tables td id and 2 is appended to it.
Try next one:
$(document).ready(function () {
$("#btn_AddTruck").click(function () {
var $tableBody = $('#tbl_invTruck').find("tbody"),
$trLast = $tableBody.find("tr:last"),
$trNew = $trLast.clone();
// Find by attribute 'id'
$trNew.find('[id]').each(function () {
var num = this.id.replace(/\D/g, '');
if (!num) {
num = 0;
}
// Remove numbers by first regexp
this.id = this.id.replace(/\d/g, '')
// increment number
+ (1 + parseInt(num, 10));
});
$trLast.after($trNew);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="invTruck" class="invTruck">
<table id="tbl_invTruck" width="100%" border="0">
<tbody>
<tr>
<td width="15%" style="display:none;"><center>Work Order Id</center></td>
<td width="17%"><center>Truck Type</center></td>
<td width="17%"><center>Licences Plate #</center></td>
<td width="17%"><center>Driver ID</center></td>
<td width="17%"><center>Max Haulage Weight</center></td>
<td width="17%"><center>Job Number</center></td>
</tr>
<tr>
<td style="display:none;"><input name="wInv_work_Id" type="text"></td>
<td><select id="invTru_Type" name="invTru_Type" onchange="getTruckPlates(this.value)">
<option disabled selected hidden value="">Select A Truck Type</option>
<!-- %while(rsinvTru1.next()){%>
<option><%=rsinvTru1.getString(1)%></option>
<%}% -->
</select>
</td>
<td><select id="invTru_LicensePlateNo" name="invTru_LicensePlateNo" required>
<option disabled selected hidden value="">Select A Truck</option>
</select></td>
<td><input name="driver_emp_Id" type="text"></td>
<td><input name="invTru_MaxHw" type="text"></td>
<td><input name="" type="text"></td>
</tr>
</tbody>
</table>
<table width="100%" height="50%" border="0">
<tr>
<td width="50%"><input class="buttonCreateInv" id="btn_AddTruck" type="button" value="Add A Truck"></td>
<td width="50%"><input class="buttonCreateInv" name="btn_RemoveTruck" type="button" value="Remove A Truck"></td>
</tr>
</table>
</div>
I have a table containing a checkbox , some text and a select box. The user will select a checkbox and then select a value in select box. I'm trying to find out if the user has selected a value in the select box corresponding to the checked checkboxes.
Following is my code:
$(document).ready(function() {
console.log("ready!");
$("#submit").click(function() {
$(".cb:checked").each(function() {
var cb = $(this);
console.log(cb.find('select option:selected').text());
if (cb.find('select option:selected').text() == "-") {
cb.find('select').css("border-color", "red");
}
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
</table>
<button id="submit">
Save
</button>
The selected text value always seems to be empty. What am I doing wrong ?
I have used closest() to get to the tr parent tag and then applied find to get to corresponding checkbox.
$(document).ready(function() {
console.log("ready!");
$("#submit").click(function(e) {
$(".cb:checked").each(function() {
var cb = $(this);
console.log(cb.closest('tr').find('select option:selected').text());
if (cb.closest('tr').find('select option:selected').text() == "-") {
cb.closest('tr').find('select').css("border-color", "red");
}
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
</table>
<button id="submit">
Save
</button>
You're using .find() with each checkbox, which searches descendant elements, but your select boxes aren't descendants of the checkboxes.
You could combine .closest() with .find() in order to target the selected option which corresponds to the current checkbox:
$(this).closest('tr').find('option').filter(':selected');
Simply change your script code to
$(document).ready(function() {
console.log("ready!");
$("#submit").click(function() {
$(".cb:checked").each(function() {
var cb = $(this).parent().parent();
console.log(cb.find('select option:selected').text());
if (cb.find('select option:selected').text() == "-") {
cb.find('select').css("border-color", "red");
}
else
cb.find('select').css("border-color", "");
})
});
});
I want to make the disappear when Other Countries is selected.
This is my HTML
<select class="country" name="country">
<option value="Portugal">Portugal</option>
<option value="OtherCountries">Other Countries</option>
</select>
<tr id="this">
<td valign="middle"><label class="registration">VAT (23%)</label></td>
<td valign="middle"></td>
<td valign="middle"><input class="input_form_reg" name="vat_price" type="text"></td>
</tr>
And this is my script (which I found here on stackoverflow)
<script>
$("select").on('change', function() {
var sel = $("select").val();
if (sel=='Portugal') {
$("#this").css("display", "inline");
}else if (sel=='OtherCountries') {
$("#this").css("display", "none");
}
});
</script>
And I don't know why but it isn't working, it just stays there.
try
your html is invalid, wrap the tr inside table
<table>
<tr id="this">
<td valign="middle"><label class="registration">VAT (23%)</label></td>
<td valign="middle"></td>
<td valign="middle"><input class="input_form_reg" name="vat_price" type="text"></td>
</tr>
</table>
Working demo
JS
$("select").on('change', function () {
if (this.value == 'Portugal') {
$("#this").show();
} else {
$("#this").hide();
}
});
$("select").on('change', function () {
$("#this").toggle(this.value != "OtherCountries");
});
DEMO
Use this code
<select class="country" name="country">
<option value="Portugal">Portugal</option>
<option value="OtherCountries">Other Countries</option>
</select>
<table>
<tr id="this">
<td valign="middle"><label class="registration">VAT (23%)</label></td>
<td valign="middle"></td>
<td valign="middle"><input class="input_form_reg" name="vat_price" type="text"></td>
</tr>
</table>
<script>
$(".country").change(function() {
var sel = $(this).val();
if (sel=='Portugal') {
$("#this").show();
}
if (sel=='OtherCountries') {
$("#this").hide();
}
});
</script>
You can use show/hide instead of using css() method.
Try this:
$(".country").on('change', function() {
if($(this).val()=="OtherCountries"){
$("#this").hide();
}else{
$("#this").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="country" name="country">
<option value="Portugal">Portugal</option>
<option value="OtherCountries">Other Countries</option>
</select>
<table id="this">
<tr>
<td valign="middle"><label class="registration">VAT (23%)</label></td>
<td valign="middle"></td>
<td valign="middle"><input class="input_form_reg" name="vat_price" type="text"></td>
</tr>
</table>
First change the ID to another one more explicit like "vat" or something, and try this:
$('.country').change(function(){
if($(this).val() == "OtherCountries"){
$("#vat").hide();
}else{
$("#vat").show();
}
});
Table tag was missing in your HTML due to which it was not identifying table row with ID. I have corrected the code. Please take a look at the code given below.
<select class="country" name="country">
<option value="Portugal">Portugal</option>
<option value="OtherCountries">Other Countries</option>
</select>
<table>
<tr id="this">
<td valign="middle"><label class="registration">VAT (23%)</label></td>
<td valign="middle"></td>
<td valign="middle"><input class="input_form_reg" name="vat_price" type="text"></td>
</tr>
</table>
<script>
$("select").on('change', function() {
var sel = $("select").val();
if (sel=='Portugal') {
$("#this").css("display", "block");
}else if (sel=='OtherCountries') {
$("#this").css("display", "none");
}
});
</script>
I have a select list containing variables from a query
<tr>
<td>County Name:</td>
<td>
<select name="countyName" onchange="countyID.value = countyName.value">
<option>Select a County</option>
<cfloop query = "getCounties">
<option value="#countyName#" >#countyName# #countyID#</option>
</cfloop>
</select>
</td>
</tr>
How can I populate the County ID field?
<tr>
<td>County ID:</td>
<td><input type="Text" name="countyID">
</td>
</tr>
I've never used jQuery. Is there a way to use just JavaScript? As you can see I've attempted JavaScript, however I can only populate countyID with the countyName and I need it populated with countyID.
Just out of curiousity, why are you using #countyName# as the values for your options? What if the county (erroneously or not) has a quotaton mark or something else that will screw with your HTML.
Why wouldn't you do:
<select name="countyName" onchange="countyID.value = this.value">
<option value="#countyID#">#countyName#</option>
</select>
Breaking it out into a function this should work for you: Live Example
<table>
<tbody>
<tr> <td>County ID:</td> <td><input id="countyId" type="Text" name="countyID"> </td> </tr>
<tr> <td>County Name:</td>
<td>
<select name="countyName" onchange="update(this)">
<option>Select a County</option>
<option value="1234">asdf</option>
<option value="4321">asdf2</option>
</select>
</td>
</tr>
</tbody>
</table>
<script>
function update( elem ) {
document.getElementById('countyID').value = elem.value;
}
</script>
Or in short just change
this:
<select name="countyName" onchange="countyID.value = countyName.value">
to this, and it should work
<select name="countyName" onchange="document.getElementById('countyId').value = this.value">
You need to reference your DOM elements via document.getElementById() and not just their id alone
Another example here