I know this has been asked many times before but none of those solutions seem to work in my situation.
I need the checkbox on each row to disable the next text field. Each table row is created on the fly (JS clone). Only the first row is static. Each subsequent row, the name and ID are appended with a new number (formfield1, formfield2, etc) and happen after the page has loaded.
HTML
<div class="add_rec_container" id="fuel_stop" style="display:block;"><!--open #fuel_stop-->
<p class="label">Enter Fuel Stop:</p>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="fuel_stop_table" class="fuel_data">
<tbody>
<tr>
<td><select name="data_fuel_state1" id="data_fuel_state1" class="state_menu">
<option value="AZ">AZ</option>
<option value="CA" selected="selected">CA</option>
<option value="NM">NM</option>
<option value="NV">NV</option>
<option value="OR">OR</option>
<option value="UT">UT</option>
</select>
</td>
<td><input type="tel" name="data_total_gal1" id="data_total_gal1" class="help total_gal_field" title="Gallons"/></td>
<td><input type="checkbox" name="data_yard1" id="data_yard1" class="enablePPG" value="yes" onclick="disablePPG(this);"/> Yard
</td>
<td>$ <input type="tel" name="data_price1" id="data_price1" class="help price_field" title="PPG" /></td>
</tr>
</tbody>
</table>
<a id="add_fuel_row" class="add_btn">+ State</a>
</div><!--close #fuel_stop-->
<input type="submit" name="Submit" class="send_button" value="Send"/>
</form>
</div><!--close .record_entry_container-->
JS (not working but I think should)
function disablePPG() {
$(this).click(function() {
if ($(this).is(':checked')){
$(this).next('.price_field').prop('disabled', true);
} else {
$(this).next('.price_field').prop('disabled', false);
}
});
}
The following JS works on the first row of form elements, but obviously not a solution for multiple rows when added.
function disablePPG() {
$(this).click(function() {
if ($('#data_yard1').is(':checked')) {
$('#data_price1').prop('disabled', true);
} else {
$('#data_price1').prop('disabled', false);
}
});
}
Any help much appreciated.
$(".enablePPG").on("click", function()
{
if($(this).is(":checked") == true)
$(this).parent().next().children().attr("disabled", "disabled");
else
$(this).parent().next().children().removeAttr("disabled");
});
Related
My code use 2 same value of dropdown list of Product : in html and javascript.
When i edit my product data, need double update in 2 place.
In html:
<td ><select name="product_text" id="new_product">
<option value="A" id="option-1">A</option>
<option value="B" id="option-2">B</option>
<option value="C" id="option-3">C</option>
</select>
</td>
In Javascript
product.innerHTML='<select id="product_text'+no+'">\
<option value="A" id="option-1">A</option>\
<option value="B" id="option-2">B</option>\
<option value="C" id="option-3">C</option>\
</select>' ;
How can i use function in javascript to reduce display dropdown database again in javascript?
My code link: https://jsfiddle.net/bvotcode/b6wj85dt/21/
HTML
<meta name="Table dropdown number va date" content="dropdown number va date">
<html>
<body>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Date</th>
</tr>
<tr>
<td ><select name="product_text" id="new_product">
<option value="A" id="option-1">A</option>
<option value="B" id="option-2">B</option>
<option value="C" id="option-3">C</option>
</select>
</td>
<td><input type="number" id="new_quantity"></td>
<td><input type="date" id="new_date"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>
</div>
</body>
</html>
Javascript
function edit_row(no)
{
document.getElementById("edit_button"+no).style.display="none";
document.getElementById("save_button"+no).style.display="block";
var product=document.getElementById("product_row"+no);
var quantity=document.getElementById("quantity_row"+no);
var date=document.getElementById("date_row"+no);
var product_data=product.innerHTML;
var quantity_data=quantity.innerHTML;
var date_data=date.innerHTML;
product.innerHTML='<select id="product_text'+no+'">\
<option value="A" id="option-1">A</option>\
<option value="B" id="option-2">B</option>\
<option value="C" id="option-3">C</option>\
</select>' ;
document.getElementById("product_text"+no).value = product_data;
quantity.innerHTML="<input type='number' id='quantity_text"+no+"' value='"+quantity_data+"'>";
date.innerHTML="<input type='date' id='date_text"+no+"' value='"+date_data+"'>";
}
function save_row(no)
{
var product_val=document.getElementById("product_text"+no).value;
var quantity_val=document.getElementById("quantity_text"+no).value;
var date_val=document.getElementById("date_text"+no).value;
document.getElementById("product_row"+no).innerHTML=product_val;
document.getElementById("quantity_row"+no).innerHTML=quantity_val;
document.getElementById("date_row"+no).innerHTML=date_val;
document.getElementById("edit_button"+no).style.display="block";
document.getElementById("save_button"+no).style.display="none";
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row()
{
var new_product=document.getElementById("new_product").value;
var new_quantity=document.getElementById("new_quantity").value;
var new_date=document.getElementById("new_date").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='product_row"+table_len+"'>"+new_product+"</td><td id='quantity_row"+table_len+"'>"+new_quantity+"</td><td id='date_row"+table_len+"'>"+new_date+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_product").value="";
document.getElementById("new_quantity").value="";
document.getElementById("new_date").value="";
}
First off, consider posting this over at https://codereview.stackexchange.com/ to get an extensive review of your code, because there is a lot that could be done better. Two suggestions for now:
Avoid hard coding HTML inside your JS (this question is a first good step)
There is normally no need to give everything a unique ID. Instead you usually can reference everything in relation to each other, possibly with help of classes. For example, the edit/save/delete buttons can look up which table row their in to find the elements they needs.
In this specific case you could clone the existing select from the HTML:
val productText = document.getElementById("product_text").cloneNode();
// Change the ID
productText.id = "product_text" + no;
// Set the value
productText.value = product_data;
// Clear the parent
// (There are better ways to empty an element, but I'm just using this for now)
product.innerHTML = "";
// Insert the cloned element
product.appendChild(productText);
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);
}
}
*/
}
});
});
i have one select box there in that options are,
none
current
future
if you select 'NONE' the all text box should be editable.
if you select 'current' the class="current" those text box should be editable and remaining should be only readonly.
similarly same like to future also. When i select future the future text boxes should be editable and remaining should be readonly
$('#cognizant').change(function(){
if(this.value == ""){
$('.current').prop('readonly',true);
} else{
$('.current').prop('readonly',false);
}
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="curator">
<tbody id="tableToModify">
<tr>
<td>
<select id="cognizant" class="discount-type" >
<option value="">none</option>
<option value="1">current</option>
<option value="2">future</option>
</select>
</td>
<td>
<input type="text" id="clientbi" class="current"/>
<input type="text" id="cognizantbi" class="current"/>
<input type="text" id="futurevsm" class="future" />
<input type="text" id="futuresymbols" class="future" />
</td>
</tr>
</tbody>
</table>
Let's change your javascript code only.
We need to use jQuery's change() function (documentation) and then validate the selected option.
The final code:
$('#cognizant').change(function(){
var value = $(this).val();
if(value == ''){
// NONE
$('#curator input[type="text"]').removeAttr('readonly');
}
else if(value == '1'){
// CURRENT
$('#curator input[type="text"]').attr('readonly', true);
$('#curator .current').removeAttr('readonly');
}
else if(value == '2'){
// FUTURE
$('#curator input[type="text"]').attr('readonly', true);
$('#curator .future').removeAttr('readonly');
}
});
See it in action: https://jsfiddle.net/x5fdLqff/4/
$('#cognizant').change(function(){
switch(this.value) {
case "":
$('.current').prop('readonly',false);
$('.future').prop('readonly',false);
break;
case "1":
$('.current').prop('readonly',false);
$('.future').prop('readonly',true);
break;
case "2":
$('.current').prop('readonly',true);
$('.future').prop('readonly',false);
break;
}
}).change();
<table id="curator">
<tbody id="tableToModify">
<tr>
<td>
<select id="cognizant" class="discount-type" >
<option value="">none</option>
<option value="current">current</option>
<option value="future">future</option>
</select>
</td>
<td>
<input type="text" id="clientbi" class="current myinputs"/>
<input type="text" id="cognizantbi" class="current myinputs"/>
<input type="text" id="futurevsm" class="future myinputs" />
<input type="text" id="futuresymbols" class="future myinputs" />
</td>
</tr>
</tbody>
</table>
<script>
$('#cognizant').change(function(){
var type = $("#cognizant").val();
$( ".myinputs" ).each(function( index ) {
$( this ).prop('readonly', false);
});
if(type != ""){
$("."+type).each(function( index ) {
$( this ).prop('readonly', true);
});
}
});
</script>
I have change option value in select box and made little change in javascript code.
hope it works for you.
As an alternative approach, with a small change in the html. You add a class name of 'none' to all the input fields, which is the same as option 1.
<table id="curator">
<tbody id="tableToModify">
<tr>
<td>
<select id="cognizant" class="discount-type" >
<option value="">none</option>
<option value="1">current</option>
<option value="2">future</option>
</select>
</td>
<td>
<input type="text" id="clientbi" class="current none"/>
<input type="text" id="cognizantbi" class="current none"/>
<input type="text" id="futurevsm" class="future none" />
<input type="text" id="futuresymbols" class="future none" />
</td>
</tr>
</tbody>
</table>
Then the jQuery to be like this. Comments explain approach.
$(function(){
$('#cognizant').on("change", function() {
//Set all text boxes to readonly
$("input[type='text']").prop("readonly", true);
//Select the option text, based on its value.
var text = $("#cognizant option[value='"+$(this).val()+"']").text();
//Set the property readonly to false on the selected class.
$("."+text).prop('readonly', false);
}).trigger("change");
});
Hello all,
I need to create textbox dynamically(depending on condition), when user clicks on employee it should get added next to employee, if user clicks on another element, it should get added next to another element
I have tried following, but I am not able to get exact td and function by which i can append textbox to it.
$("#emlpyeetd").after('<s:textfield id="employeeVal" name="employeeView.policyOrQuoteNumber" maxlength="15" style="width: 200px;" class="hideForAnotherField" theme="simple"></s:textfield>');
<td width="25%">
employee
</td>
<td id="policytd" class= "anotherfield" width="25%"></td>
Try something like this, it will remove 1st textbox when you click on 2nd option.
Jquery code
<script>
$(document).ready(function(){
$(".radio_action").click(function(){
if($(this).val() == "E" ){
$("#other_text").html("");
$("#emp_text").html("<input type='text' >");
}
else if($(this).val() == "A" ) {
$("#emp_text").html("");
$("#other_text").html("<input type='text' >");
}
})
});
</script>
HTML code
<table>
<tr>
<td><input type="radio" name="radio_type" value="E" class="radio_action" /> Employee</td>
<td id="emp_text"></td>
</tr>
<tr>
<td><input type="radio" name="radio_type" value="A" class="radio_action" /> Another Element</td>
<td id="other_text"></td>
</tr>
</table>
Html
<div>
<div class="container">
<div><input type="radio"/ name="somename" value="1">Val1</div>
<div class="editor-wrapper"></div>
</div>
<div class="container">
<div><input type="radio"/ name="somename" value="1">Val2</div>
<div class="editor-wrapper"></div>
</div>
</div>
JS
$(document).ready(function() {
$('input[name="somename"]').click(function() {
$(this.closest('.container')).find('.editor-wrapper').html($('<input>'))
});
});
jsfiddle
I need help with this fiddle.
The workflow:
Select civil status
If select value = 1, show hidden div with 2 radio buttons.
If answer is yes, show 2nd hidden div with 2 radio buttons.
If answer is yes, show 3rd hidden div with text input field.
After input is filled out, show hidden Next button.
If select value was 0, answer no, 2nd answer no, show hidden Next button.
The code works for me on my local save till the last radiobutton, but when I select no there, the Next button doesn't show.
Can you please help to fix my code?
function showDiv(elem) {
switch (elem.value) {
case '1':
document.getElementById('questionHIDDEN').style.display = 'block';
document.getElementById('employedHIDDEN').style.display = 'none';
document.getElementById('numberinputHIDDEN').style.display = 'none';
document.getElementById('stepsHIDDEN').style.display = 'none';
break;
case '0':
document.getElementById('stepsHIDDEN').style.display = 'block';
break;
}
};
$(document).ready(function() {
$('input[name="employed"]').click(function() {
if ($(this).attr("value") == "no") {
$("#stepsHIDDEN").show();
$("#employedHIDDEN").hide();
$("#numberinputHIDDEN").hide();
} else if ($(this).attr("value") == "yes") {
$("#employedHIDDEN").show();
$("#stepsHIDDEN").hide();
} else {
$("#stepsHIDDEN").hide();
}
});
$('input[name="epworking"]').click(function() {
if ($(this).attr("value") == "no") {
$("#stepsHIDDEN").show();
$("#numberinputHIDDEN").hide();
} else
$("#numberinputHIDDEN").show();
$("#stepsHIDDEN").hide();
});
$('input[name=fname]').keyup(function() {
if ($(this).val().length == 6) {
$('#stepsHIDDEN').show();
} else
$('#stepsHIDDEN').hide();
});
});
#questionHIDDEN,
#employedHIDDEN,
#numberinputHIDDEN,
#stepsHIDDEN {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<main>
<div id="content">
<div id="text">
<h4>2/3 Civil Status</h4> What is your civil status?
<br>
<br>
<select name="status" id="soflow2" onchange="showDiv(this)">
<option>Select</option>
<option value="0">Single</option>
<option value="1">Married</option>
<option value="1">Registered Legal Partnership</option>
<option value="1">Remarried</option>
<option value="0">Legally Separated</option>
<option value="0">Divorced</option>
<option value="0">Widowed</option>
<option value="1">Informal Partnership</option>
</select>
<div id="spouse">
<table id="questionHIDDEN">
<tr>
<td>
Is your spouse/legal partner employed?
</td>
</tr>
<tr>
<td class="left">
<form>
<span class="radiobutton"><input type="radio" name="employed" value="yes"> Yes </span>
<span class="radiobutton"><input type="radio" name="employed" value="no"> No </span>
</form>
</td>
</tr>
</table>
<table id="employedHIDDEN">
<tr>
<td>
Is your spouse/legal partner working in our institution?
</td>
</tr>
<tr>
<td class="left">
<form>
<span class="radiobutton"><input type="radio" name="epworking" value="yes"> Yes </span>
<span class="radiobutton"><input type="radio" name="epworking" value="no"> No </span>
</form>
</td>
</tr>
</table>
<table id="numberinputHIDDEN">
<tr>
<td>
<span>His/her personal number: <input class="personnelnumber" type="text" name="fname"> <i class="fa fa-info-circle tooltip" aria-hidden="true"><span class="tooltiptext">A 6 digit number, you can find it on an offical document.</span>
</i>
</span>
<td>
</tr>
</table>
</div>
</div>
<div id="stepsHIDDEN">
<button onclick="window.location='03Children.html'" class="nextstep">Next</button>
</div>
</div>
</main>
https://jsfiddle.net/pLv4uams/
The problem is with your $('input[name="epworking"]') - click event. In the else part you did not enclose the lines with {} and hence else was taking up only one line of execution. $("#stepsHIDDEN").hide(); would execute at any cost on that event. So even when you showed it, the later part was hiding it. Below is the fix.
$('input[name="epworking"]').click(function() {
if ($(this).attr("value") == "no") {
$("#stepsHIDDEN").show();
$("#numberinputHIDDEN").hide();
} else {
$("#numberinputHIDDEN").show();
$("#stepsHIDDEN").hide();
}
});
DEMO